user3766930 user3766930 - 7 months ago 6
HTML Question

How can I align the button properly next to the group of checkboxes in bootstrap?

I have the following

html
code:

<div class="container">
<form name ="queryForm">

<div class="form-group">
<p class="checkbox-inline">
<input type="checkbox" name="optionsRadios" id="checkOne" value="one">
One
</p>
<p class="checkbox-inline">
<input type="checkbox" name="optionsRadios" id="checkTwo" value="two">
Two
</p>
<p class="checkbox-inline">
<input type="checkbox" name="optionsRadios" id="checkThree" value="three">
Three
</p>
<p class="checkbox-inline">
<input type="checkbox" name="optionsOther" id="checkFour" value="four">
Four
</p>
</div>

<button type="submit" class="btn btn-fill btn-info">Reload</button>
</form>

</div>


and the result of this code is as on the screen below:

enter image description here

I want to move the
Reload
button next to the checkboxes. First I thought about moving the
<button...
right after the last checkbox, so the code would end like:



Four


<button type="submit" class="btn btn-fill btn-info">Reload</button>
</div>


but then the result is:

enter image description here

and I would prefer to have it centered vertically, something more like:

enter image description here

Can you give me a hint what could I modify in my code to achieve such effect?

Answer

The bootstrap .btn class is inline-block, so simply move the button into the .form-group div after the final .checkbox-inline paragraph.

<div class="container">
 <form name ="queryForm">
  <div class="form-group">
   <p class="checkbox-inline">
    <input type="checkbox" name="optionsRadios" id="checkOne" value="one">
    One
   </p>
   <p class="checkbox-inline">
    <input type="checkbox" name="optionsRadios" id="checkTwo" value="two">
    Two
   </p>
   <p class="checkbox-inline">
    <input type="checkbox" name="optionsRadios" id="checkThree" value="three">
    Three
   </p>
   <p class="checkbox-inline">
    <input type="checkbox" name="optionsOther" id="checkFour" value="four">
    Four
   </p>
   <button type="submit" class="btn btn-fill btn-info">Reload</button>
  </div>
 </form>
</div>