I am trying to align my two bootstrap buttons side by side (horizontally), right now they are aligned one on top of another (vertically). I have found a few questions on here, but still can't seem to get it right...
I will post my code below:
<div class="row">
<div class="col-sm-12">
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-primary btn-md center-block" Style="width: 100px; margin-bottom: 10px;" OnClick="btnSearch_Click" />
<asp:Button ID="btnClear" runat="server" Text="Clear" CssClass="btn btn-danger btn-md center-block" Style="width: 100px;" OnClick="btnClear_Click" />
</div>
</div>
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.
1) use display: inline-block
#btnSearch,
#btnClear{
display: inline-block;
vertical-align: top;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-12 text-center">
<button id="btnSearch" class="btn btn-primary btn-md center-block" Style="width: 100px;" OnClick="btnSearch_Click" >button</button>
<button id="btnClear" class="btn btn-danger btn-md center-block" Style="width: 100px;" OnClick="btnClear_Click" >button</button>
</div>
</div>
or
2) remove class .center-block
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-12 text-center">
<button class="btn btn-primary btn-md">button</button>
<button class="btn btn-danger btn-md">button</button>
</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