Bootstrap toolbar width - Button 100% - using btn-group command
I have some problems getting the bootstrap toolbar to fill 100% from left to right when I use btn-group
I've tried using: btn-group-justified
Example without btn-group-justified
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Left 1</button>
<button type="button" class="btn btn-default">Left 2</button>
<button type="button" class="btn btn-default">Left 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle 1</button>
<button type="button" class="btn btn-default">Middle 2</button>
<button type="button" class="btn btn-default">Middle 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right 1</button>
<button type="button" class="btn btn-default">Right 2</button>
<button type="button" class="btn btn-default">Right 3</button>
</div>
</div>
Example with rationale for btn-group
<div class="btn-toolbar btn-group-justified" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Left 1</button>
<button type="button" class="btn btn-default">Left 2</button>
<button type="button" class="btn btn-default">Left 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle 1</button>
<button type="button" class="btn btn-default">Middle 2</button>
<button type="button" class="btn btn-default">Middle 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right 1</button>
<button type="button" class="btn btn-default">Right 2</button>
<button type="button" class="btn btn-default">Right 3</button>
</div>
</div>
And also the function: width = "100%" doesn't work. any suggestions? or alternatives?
Thank you.
+3
source to share
2 answers
Use the btn-block class and the col-xx-yy class:
<div class="btn-group btn-block">
<button class="btn btn-default col-lg-4" type="button">Left 1</button>
<button class="btn btn-default col-lg-4" type="button">Left 2</button>
<button class="btn btn-default col-lg-4" type="button">Left 3</button>
</div>
+1
source to share
I think the solution is to add an extra div btn-group to the hierarchy and use btn-group-justified for that, i.e.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default" type="button">Left 1</button>
<button class="btn btn-default" type="button">Left 2</button>
<button class="btn btn-default" type="button">Left 3</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Middle 1</button>
<button class="btn btn-default" type="button">Middle 2</button>
<button class="btn btn-default" type="button">Middle 3</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Right 1</button>
<button class="btn btn-default" type="button">Right 2</button>
<button class="btn btn-default" type="button">Right 3</button>
</div>
</div>
</div>
-1
source to share