Rames Rames - 6 months ago 51
CSS Question

Bootstrap button group inside vertical button group

I'd like to create a vertical button group, containing a horizontal button group, and a few buttons inside. My attempt looks like this:

<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
<button type="button" class="btn btn-primary">Row 2</button>
<button type="button" class="btn btn-primary">Row 3</button>
</div>


I want button
Row 1.1
and
Row 1.2
to be in one row.

Answer

Enclose your button group in a row class:

<div class"row">
<div class="btn-group">
   <button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
   <button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
</div>

Check the Codepen. You might wanna change the width/border the way you want it.


EDIT

As for the buttons not being rounded, here's the class responsible for it, you can change it:

.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

From bootstrap.css, the btn class has a border-radius: 4px :

.btn {
    ...
    border: 1px solid transparent;
    border-radius: 4px;
}

You can either remove all the radius or change the second button to have the same border-radius

New Codepen