Looking for suggestions on how to center a Bootstrap button group (btn-group) within an element? For instance, consider the following structure:
<div id='toolbar'>
<div class="btn-group">
<button type="button" class="btn btn-default">Command1</button>
<button type="button" class="btn btn-default">Command2</button>
</div>
</div>
Is there a way to ensure that the btn-group is always centered within toolbar, without resorting to trial and error or setting fixed widths? The current approach involves wrapping a div around the btn-group and manipulating its width and margin. However, this method has drawbacks:
(1) It requires manual adjustment to determine the exact width of the btn-group.
(2) Even slight changes in content width can disrupt the centering, causing buttons to wrap onto a new line.
Are there any alternative techniques? Share your thoughts! Below is my current setup (jsfiddle):
html:
<div id='toolbar'>
<div class='wrapper'>
<div class="btn-group">
<button type="button" class="btn btn-default">Command1</button>
<button type="button" class="btn btn-default">Command2</button>
</div>
</div>
</div>
css:
#toolbar {
width: 100%;
max-width: 700px;
margin: 10px;
border: 1px solid black;
padding: 10px;
}
#toolbar .wrapper {
width: 197px;
margin: 0 auto;
/*border: 1px solid blue; used to test width*/
}