I am currently utilizing Bootstrap 3.3.6 and have a basic form enclosed in a panel:
https://i.stack.imgur.com/UOFI6.png
Although it is quite simple, the alignment of the "Post" button is not displaying properly.
Here is the HTML code for the form:
<div class="panel panel-primary">
<div class="panel-heading">Say something...</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control"
rows="5"
placeholder="What are you up to?"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-11 col-md-1">
<button type="submit" class="btn btn-primary">Post</button>
</div>
</div>
</form>
</div>
</div>
Based on the Bootstrap documentation, .form-group acts like .row when placed inside a .form-horizontal - therefore, offsetting the button (col-md-offset-11) should align the button vertically with the textarea.
This panel is inserted within a row on another page:
<div class="container">
...
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div ui-view="quickPost"></div>
</div>
</div>
...
Since .form-group mimics a .row, it should function correctly when inside a .row (nesting rows within rows is acceptable).
As I lack expertise in CSS and Bootstrap, I am certain that this issue stems from my oversight. Can anyone identify the mistake I have made?