Bootstrap Tutorial - Bootstrap Group Button








Bootstrap button group groups a series of buttons together in a single line.

To create a button groups, wrap a series of buttons in a <div> element and apply the class .btn-group on it.

<!--from www.  j ava  2  s  .co  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>
</body>
</html>

Click to view the demo





Vertical button groups

To create vertical button groups, use the .btn-group-vertical class.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{<!--from w w  w . ja  v a 2 s .  c o m-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">Top</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Bottom</button>
    </div>
</div>
</body>
</html>

Click to view the demo





Button Toolbar

We can combine button groups together to create button toolbar.

To create button toolbar, wrap button groups in a <div> element and apply the class .btn-toolbar on it.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{<!--from w  w  w  .j  a  v a 2s.  c om-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
            <button type="button" class="btn btn-primary">4</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">5</button>
            <button type="button" class="btn btn-primary">6</button>
            <button type="button" class="btn btn-primary">7</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">8</button>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Height of Button Groups

We can apply relative sizing classes like .btn-group-lg, .btn-group-sm or .btn-group-xs on button groups to create larger or smaller button groups.

<!--  w w  w .j  a  v  a2  s  .c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-toolbar">
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
    </div>
    <br>
    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
    </div>
    <br>
    <div class="btn-toolbar">
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
    </div>
    <br>
    <div class="btn-toolbar">
        <div class="btn-group btn-group-xs">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Justified Button in Groups

We can make a group of buttons stretch at the same size to span the entire width of its parent by applying an extra class .btn-group-justified to the .btn-group base class.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{<!--   w  w w  .ja  v a  2s . c  o  m-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Left</a>
        <a href="#" class="btn btn-primary">Middle</a>
        <a href="#" class="btn btn-primary">Right</a>
    </div>
</div>
</body>
</html>

Click to view the demo

Justify button groups

To justify button groups using the <button> elements, wrap each button individually in a .btn-group class.

<!-- www.  ja v a  2  s . com-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Left</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Middle</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Right</button>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo