Bootstrap: vertical toolbar for placing groups btn-group-vertical
So, I was looking through the download documentation for a solution to this problem and couldn't find anything. Is there a way, using bootstrap components, to display groups of buttons vertically one after the other?
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 does:
A1 B1 C1
A2 B2 C2
A3 B3 C3
...
when i really want:
A1
A2
A3
... (Break in Toolbar)
B1
B2
B3
... (Break in Toolbar)
C1
C2
C3
If not in bootstrap itself, maybe there is a way to do it with CSS, if anyone has an idea how to do this. Thanks in advance!
Edited for clarity
+3
source to share
1 answer
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>
+4
source to share