Menu
I'm trying to do something really simple : have some text and a group of buttons (using the btn-group class) next to it:
Make your choice : BUTTON
Here is the code I use :
<div>
<p>Make your choice :</p>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="btn1">Select 1</a></li>
<li><a href="#" id="btn2">Select 2</a></li>
<li><a href="#" id="btn3">Select 3</a></li>
</ul>
</div>
</div>
This code produces something like:
Make your choice :
BUTTON
I'm looking for a Bootstrap solution to have the text and the button on the same line. I don't want to create my own styles, I'd like to achieve this using existing Bootstrap classes/components.
306
To allow the input and button elements to be next to each other without spacing, the font-size has been set to 0 in the . input-append class (this removes the white spacing between the inline-block elements).
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.
Add data-toggle="buttons" to a . btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add . btn-group-toggle to style the <input> s within your buttons. Note that you can create single input-powered buttons or groups of them.
remove the <p></p> :
<div>
Make your choice :
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="btn1">Select 1</a></li>
<li><a href="#" id="btn2">Select 2</a></li>
<li><a href="#" id="btn3">Select 3</a></li>
</ul>
</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
