Menu
Take a look at the below example.
Link to Bootply
I want the <a> tag to be besides Button 2.
892
You can use an out div with a class btn-group . This helps to align the buttons horizontally. Using col-md-6 for each button div can make the buttons missaligned with unwanted space in between.
Use the . btn-group class in Bootstrap to group buttons on a single like.
If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
Bootstrap allows us to align elements by using the utility class float. As we want to align the button to the right side of the text box, we have to use the float-right class.
Bootstrap uses 12 column grid. Right now two buttons take the whole available space (both 6-column width) leaving no space for the third. You can layout your buttons as 5+5+2 columns. For example:
<div class="col-md-6 col-md-offset-2">
<button type="submit" class="btn btn-default btn-md col-md-5">Button 1</button>
<button type="reset" class="btn btn-default btn-md col-md-5">Button 2</button>
<a href="#" class="btn btn-default btn-md col-md-2"><span class="glyphicon glyphicon-search"></span></a>
</div>
You want to place the third button outside the row container, you can position it absolutely relatively to the col group:
<a href="#" class="btn btn-default btn-beside"><span class="glyphicon glyphicon-search"></span></a>
CSS:
.btn-beside {
position: absolute;
left: 100%;
top: 0;
margin-left: -10px;
}
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
