Search code examples
javascripthtmlcsstwitter-bootstrap-2

Vertical group of buttons in Bootstrap 2.3.2

Bootstrap 3 has CSS class btn-group-vertical. Could you help me please, how can I achieve the same result in Bootstrap 2.3.2?

Here is what i want to achieve:

http://jsfiddle.net/Lc9012o6/

Here is the same group of buttons in Bootstrap 2.3.2

http://jsfiddle.net/999tv48t/

<div class="btn-group-vertical">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Add
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" >
          <li><a href="#">Vertex</a></li>
          <li><a href="#">Edge</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Update
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" >
          <li><a href="#">Vertex</a></li>
          <li><a href="#">Edge</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Remove
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" >
          <li><a href="#">Vertex</a></li>
          <li><a href="#">Edge</a></li>
        </ul>
    </div>

    <button type="button" class="btn btn-default">Merge vertices</button>
</div>

edit:

When I use css class btn-group btn-group-vertical, behaviour of dropdown buttons is strange http://jsfiddle.net/q0r49anL/

Solution

  • this is CSS update of .btn-group-vertical class:

    .btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 0;
    display: block;
}

.btn-group-vertical>.btn:last-child {
    border-radius: 4px;
}