html5 - column and row layout using CSS3 -

i trying achieve column style bootstrap. want label , field value in column. ideally looking 5 columns , each column contain label , field value. have commented out label , fields quite close still not got it. have attached output of code. show me going wrong.

css

<style> .requestdetail {     font-size: 9px;     font-family: helvetica, sans-serif, sans-serif;   }   </style>   <div class="requestdetail">     <div class="row">         <div>@html.label("country number", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">gb</div>         <div>@html.label("company code", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1">8100</div>         <div>@html.label("project name", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">nishan projectname</div>         <div>@html.label("name of responsible person", htmlattributes: new { @class = "editor-label col-sm-2" })</div><div class="col-sm-1 editor-field">desmond beckford</div>         @*<div>@html.label("modified by", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">nishan murugdfdd</div>*@     </div>     <div class="row">         <div>@html.label("customer number", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">0081000653</div>         <div>@html.label("customer shortname", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">amey</div>         <div>@html.label("project content", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">projectcontent</div>         @*<div>@html.label("applicant number", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">00000372</div>*@     </div>     <div class="row">         <div>@html.label("sales office code", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">8101</div>         <div>@html.label("sales office", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">hatfield ps</div>         <div>@html.label("contract start date", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">20/03/2017 17:04:36 +00:00</div>         @*<div>@html.label("applicant name", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">fgfgfgfgfgf</div>*@     </div>     <div class="row">         <div>@html.label("name", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">dnu - amey group information servic</div>         <div>@html.label("status", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">new request</div>         <div>@html.label("contract duration in months", htmlattributes: new { @class = "editor-label col-sm-2" })</div><div class="col-sm-2 editor-field">5</div>         @*<div>@html.label("is required send cost desk", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">@(model.isrequiredtosendtocostdesk)</div>*@     </div>     <div class="row">         <div>@html.label("city", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">belfast</div>         <div>@html.label("postal code", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">bt1 1ea</div>         <div>@html.label("priority", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">20/03/2017 17:04:36 +00:00</div>         @*<div>@html.label("calculation specials", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">dfdfdfdfdfdfdfd</div>*@     </div>     <div class="row">         <div>@html.label("street", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">1a royal avenue</div>         <div>@html.label("phone", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">028 8044 6464</div>         <div>@html.label("sap office username", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">dbeckfor</div>         @*<div>@html.label("created by", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">cvcvcvcvcv</div>*@     </div>     <div class="row">         <div>@html.label("general agreement name", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">generalagreementname</div>         <div>@html.label("is day business", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">true</div>         <div>@html.label("number of responsible person", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">00001724</div>         @*<div>@html.label("created date", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">20/03/2017 17:04:36 +00:00</div>*@         @*<div>@html.label("modified date", htmlattributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">20/03/2017 17:04:36 +00:00</div>*@     </div>    </div> 

since using bootstrap, can use both col-md-2 5 times, or col-md-1 ten times , style please.

remember, if want use col-md-2 should use offset.

.col-md-1{  border-style: solid;  border-width: 1px !important;  border-color: black;  }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />  <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>    <div class="row">      <div class="col-xs-1 col-md-1">1</div>      <div class="col-xs-1 col-md-1">2</div>      <div class="col-xs-1 col-md-1">3</div>      <div class="col-xs-1 col-md-1">4</div>      <div class="col-xs-1 col-md-1">5</div>      <div class="col-xs-1 col-md-1">6</div>      <div class="col-xs-1 col-md-1">7</div>      <div class="col-xs-1 col-md-1">8</div>      <div class="col-xs-1 col-md-1">9</div>      <div class="col-xs-1 col-md-1">10</div>               </div>