JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Button Groups

June 21, 2014 by Sutha Kaliannan Leave a Comment

Bootstrap provides facility to group a series of buttons on a single line using the Bootstrap’s class .btn-group. We just use this class within div element and apply the class .btn-group on it. It manages the selected or unselected state for a set of buttons. This tutorial explains how to use the button groups in bootstrap.

also read:

  • Bootstrap Setup
  • Bootstrap CSS
  • Introduction to Foundation Framework
  • Bootstrap vs Foundation

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Buttons Group</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-success">Two</button>
<button type="button" class="btn btn-info">Three</button>
<button type="button" class="btn btn-warning">Four</button>
<button type="button" class="btn btn-danger">Five</button>
</div>
<h2>Buttons Checkbox</h2>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default">Checkbox One</button>
<button type="button" class="btn btn-default">Checkbox Two</button>
<button type="button" class="btn btn-default">Checkbox Three</button>
<button type="button" class="btn btn-default">Checkbox Four</button>
<button type="button" class="btn btn-default">Checkbox Five</button>
</div>
<h2>Buttons Radio</h2>
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-default">
<input type="radio" name="options">Option One</button>
<button class="btn btn-default">
<input type="radio" name="options">Option Two</button>
<button class="btn btn-default">
<input type="radio" name="options">Option Three</button>
</div>
</div>
</body>
</html>
[/code]

Above script defines different types of buttons in a one group, buttons checkbox group and buttons radio group on the web page. All the buttons type must be defined under the class .btn-group. You can run the above example in the below link:

  • Run Bootstrap Button Group Demo

Bootstrap Button Group Example

Bootstrap Button Toolbar

We can set button groups together like button toolbar. Use .btn-group class within .btn-toolbar class for complex components. We just use this class within div element and apply the class .btn-toolbar on it. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Buttons Toolbar</h2>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-success">Two</button>
<button type="button" class="btn btn-info">Three</button>
<button type="button" class="btn btn-warning">Four</button>
<button type="button" class="btn btn-danger">Five</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-success">Two</button>
<button type="button" class="btn btn-info">Three</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-success">Two</button>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Button Toolbar Demo

Bootstrap Button Toolbar Example

Bootstrap Nesting of Button Groups

We can nest a button group within another button group i.e. nest a .btn-group within another .btn-group. This class can be used within the div element. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Nesting of Button Groups</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-success">Two</button>
<button type="button" class="btn btn-info">Three</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">India</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Srilanka</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">New Zealand</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Nesting Button Groups Demo

Bootstrap Nesting Button Groups Example

Bootstrap Vertical Button Group

The Bootstrap provides facility to display button group vertically rather than horizontally by using .btn-group-vertical class. But when working with dropdowns, we can’t split dropdown buttons vertically. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical Button Groups</h2>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-success">Two</button>
<button type="button" class="btn btn-warning">Three</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Country List<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">India</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Srilanka</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">New Zealand</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Vertical Button Group Demo

Bootstrap Vertical Button Groups Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

About Sutha Kaliannan

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved