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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With