Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 - align text to form-control items across grids

What is the correct way in bootstrap to have proper alignment of inputs and labels across grids?

I would like to have the labels to be placed exactly the same as the first col. See my plunk:

http://plnkr.co/edit/jaMAp38Rr1g7BLW3R5AI

<div class="row">
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;">
        <label>OK</label>
      </div>
    </form>
  </div>
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline" role="form">
      <div class="form-group">
        <label>NOK</label>how to align it to the same as text 'OK'?
      </div>
    </form>
  </div>
</div>
like image 684
István Békési Avatar asked Dec 19 '22 10:12

István Békési


1 Answers

Use .form-control-static

Plunkr: http://plnkr.co/edit/0uVL2IIglzV0mrhqZdla?p=preview

HTML:

<div class="row">
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline">
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;"/>
      <label for="exampleInputEmail1">OK</label>
    </form>
  </div>
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <p class="form-control-static"><b>NOK</b></p>
  </div>
</div>
like image 105
cvrebert Avatar answered Dec 21 '22 22:12

cvrebert