Categories
button css html javascript twitter-bootstrap

Bootstrap: Vertical toolbar to house btn-group-vertical groups

So, I was looking through the bootstrap documentation for a solution to this one and didn’t find anything. Is there a way, using bootstrap components, to display button groups vertically one after another?

This is what I have so far:

<div class="btn-toolbar" role="toolbar">
<div class = "btn-group-vertical" id = "A">
buttons...
</div> <!-- button group -->
<div class = "btn-group-vertical" id = "B">
buttons...
</div> <!-- button group -->
<div class = "btn-group-vertical" id = "C">
buttons...
</div> <!-- button group -->
</div> <!-- button toolbar -->

This essentially makes:

A1 B1 C1
A2 B2 C2
A3 B3 C3
...

when I actually want:

A1
A2
A3
... (Break in Toolbar)
B1
B2
B3
... (Break in Toolbar)
C1
C2
C3

If not in bootstrap itself, there is probably a way to make this happen with CSS if anyone has an idea how to do that. Thanks in advance!


Editted for Clarity

Remove the top Div with btn-toolbar and just use btn-group-vertical

<div class="btn-group-vertical">
<button type="button" class="btn btn-default">A1</button>
<button type="button" class="btn btn-default">A2</button>
<button type="button" class="btn btn-default">A3</button>
<br /><br />
<button type="button" class="btn btn-default">B1</button>
<button type="button" class="btn btn-default">B2</button>
<button type="button" class="btn btn-default">B3</button>
<br /><br />
<button type="button" class="btn btn-default">C1</button>
<button type="button" class="btn btn-default">C2</button>
<button type="button" class="btn btn-default">C3</button>
</div>