title: How to use form-inline bootstrap 3?
body: <p>I have a view in HTML and Razor and I am trying to build a form to look like the following:
  <a href="https://i.stack.imgur.com/zoRGT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zoRGT.png" alt="mockup image"></a></p>
  
  <p>However, the best I can achieve is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/GYdBy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GYdBy.png" alt="result image"></a></p>
  
  <p>As you can see the labels are not inlined. 
  To achieve this I have read about the <code>form-inline</code> class in Bootstrap 3 (<a href="http://getbootstrap.com/components/#navbar-forms" rel="nofollow noreferrer">http://getbootstrap.com/components/#navbar-forms</a>) but no matter how I use form-inline I cannot get the labels into the right place without making the whole layout a mess.</p>
  
  <p>This is my current code (without form-inline):</p>
  
  <pre><code> &lt;fieldset class="group-border"&gt;
                      &lt;legend class="group-border"&gt;Info&lt;/legend&gt;
  
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-4"&gt;
                              &lt;div class="form-group"&gt;
                                  @Html.LabelFor(doc =&gt; doc.NumDoc, new { @class = "control-label" })
                                  @Html.TextBoxFor(doc =&gt; doc.NumDoc, new { @class = "form-control input-sm", placeholder = "Nº Documento", disabled = "disabled" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-4"&gt;
                              &lt;div class="form-group"&gt;
                                  @Html.LabelFor(doc =&gt; doc.ProcessNum, new { @class = "control-label" })
                                  @Html.TextBoxFor(doc =&gt; doc.ProcessNum, new { @class = "form-control input-sm", placeholder = "Nº Processo", disabled = "disabled" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-4"&gt;
                              &lt;div class="form-group"&gt;
                                  @Html.LabelFor(doc =&gt; doc.State, new { @class = "control-label" })
                                  @Html.TextBoxFor(doc =&gt; doc.State, new { @class = "form-control input-sm", placeholder = "Estado", disabled = "disabled" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-6"&gt;
                              &lt;div class="form-group"&gt;
                                  @Html.LabelFor(doc =&gt; doc.Name, new { @class = "control-label" })
                                  @Html.TextBoxFor(doc =&gt; doc.Name, new { @class = "form-control input-sm", placeholder = "Nome Documento", disabled = "disabled" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-6"&gt;
                              @Html.LabelFor(doc =&gt; doc.IsArchived, new { @class = "control-label" })
                              @Html.CheckBoxFor(doc =&gt; doc.IsArchived, new { @class = "input-sm", disabled = "disabled" })
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-6"&gt;
                              &lt;div class="form-group"&gt;
                                  @Html.LabelFor(doc =&gt; doc.Description, new { @class = "control-label" })
                                  @Html.TextBoxFor(doc =&gt; doc.Description, new { @class = "form-control input-sm", placeholder = "Descrição", disabled = "disabled" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-6"&gt;
                              &lt;div class="form-group"&gt;
                                  @Html.LabelFor(doc =&gt; doc.Date, new { @class = "control-label" })
                                  @Html.TextBoxFor(doc =&gt; doc.Date, new { @class = "form-control input-sm", placeholder = "dd/MM/yyyy", disabled = "disabled" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/fieldset&gt;
  </code></pre>
  
  <p>Bellow is a code snippet in HTML CSS and Javascript, trying to replicate what I have.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt; legend.group-border {
    width: inherit;
    /* Or auto */
    padding: 0 10px;
    /* To give a bit of padding on the left and right */
    border-bottom: none;
  }
  fieldset.group-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;fieldset class="group-border"&gt;
    &lt;legend class="group-border"&gt;Info&lt;/legend&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-lg-4"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="NumDoc"&gt;Nº Documento&lt;/label&gt;
          &lt;input class="form-control input-sm" data-val="true" data-val-number="The field Nº Documento must be a number." data-val-required="O campo Nº Documento é necessário." disabled="disabled" id="NumDoc" name="NumDoc" placeholder="Nº Documento" type="text"
          value="21354"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-4"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="ProcessNum"&gt;Nº Processo&lt;/label&gt;
          &lt;input class="form-control input-sm" data-val="true" data-val-number="The field Nº Processo  must be a number." data-val-required="O campo Nº Processo  é necessário." disabled="disabled" id="ProcessNum" name="ProcessNum" placeholder="Nº Processo" type="text"
          value="54463"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-4"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="State"&gt;Estado&lt;/label&gt;
          &lt;input class="form-control input-sm" disabled="disabled" id="State" name="State" placeholder="Estado" type="text" value="Em Inbox"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-lg-6"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="Name"&gt;Nome&lt;/label&gt;
          &lt;input class="form-control input-sm" disabled="disabled" id="Name" name="Name" placeholder="Nome Documento" type="text" value="A134-MULTAS"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-6"&gt;
        &lt;label class="control-label" for="IsArchived"&gt;Arquivado?&lt;/label&gt;
        &lt;input checked="checked" class="input-sm" data-val="true" data-val-required="O campo Arquivado? é necessário." disabled="disabled" id="IsArchived" name="IsArchived" type="checkbox" value="true"&gt;
        &lt;input name="IsArchived" type="hidden" value="false"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-lg-6"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="Description"&gt;Descrição&lt;/label&gt;
          &lt;input class="form-control input-sm" disabled="disabled" id="Description" name="Description" placeholder="Descrição" type="text" value="Fast and Furious"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-6"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="Date"&gt;Data Documento&lt;/label&gt;
          &lt;input class="form-control input-sm" data-val="true" data-val-date="The field Data Documento must be a date." data-val-required="O campo Data Documento é necessário." disabled="disabled" id="Date" name="Date" placeholder="dd/MM/yyyy" type="text" value="25/08/2015 15:03:26"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, I have a row, divided into 3 columns (each one occupying a width of 4 units) and inside I have my forms using Razor.</p>
  
  <p>How would one modify my current HTML code to achieve the result in the mockup? </p>