Here is a snippet of HTML code that I am working with:
<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>
The current layout of the code looks like this:
https://i.sstatic.net/JhfFa.png
I would like to reposition the Reload button next to the checkboxes. Initially, I attempted to move the <button... code right after the last checkbox as seen below:
Four
<button type="submit" class="btn btn-fill btn-info">Reload</button>
</div>
However, this resulted in an undesired layout:
https://i.sstatic.net/NMF0M.png
My goal is to have the button centered vertically, similar to this:
https://i.sstatic.net/nH9j5.png
If anyone has suggestions on how I can modify my code to achieve this desired effect, I would greatly appreciate it.