Button Collections

A button group is a collection of buttons that can be arranged on a single line using Bootstrap:

Apple

Samsung

Sony

Construct a button group by using a <div> element with class.btn-group:

For instance:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Tip: Use class.btn-group-lg|sm|xs to size all of the buttons in the group rather than applying button sizes to each individual button:

For instance:

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Button Groups on the Vertical

Moreover, Bootstrap allows vertical button groups:

Apple

Samsung

Sony

For a vertical button group, use the class .btn-group-vertical:

For instance:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Button Groups That Are Justifiable

In order to fill the screen, utilize the.btn-group-justified class:

Apple

Samsung

Sony

With <a> element as an example:

For instance:

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

Note: For <button> elements, it is necessary to surround every button with a.btn-group class:

For instance:

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

Groups of Button Nesting and Dropdown Menus

Apple

Samsung

Sony ⌄

Create dropdown menus by nesting button groups:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

Distinct Button Dropdowns

For instance:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>

Test Yourself Through Exercises

Practice:

Create a Bootstrap class to organize the buttons.

<div class="         ">
  <button class="btn btn-primary">Apple</button>
  <button class="btn btn-primary">Samsung</button>
  <button class="btn btn-primary">Sony</button>
</div>

Bootstrap Symbols

Glyphicons

260 glyphicons from the Glyphicons Halflings set are available through Bootstrap.

Text, buttons, toolbars, navigation, forms, and more can all employ glyphics.

Here are a few glyphicon examples:

The envelope glyphicon: (insert envelope icon)

The Printer glyphicon: (insert the printer icon)

Search up glyphicon: (insert the search icon)

Download glyphicon: (insert download icon)

Syntax of Glyphicons

The syntax used to insert a glyphicon is as follows:

<span class="glyphicon glyphicon-name"></span>

The correct name of the glyphicon must be used in place of the name portion in the syntax above.

Example of Glyphicon

Several applications of glyphicons are demonstrated in the following example:

For instance:

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print
  </a>
</p>

Try Yourself With Exercises

Work out:

To have the span display as a “search” icon, use a Glyphicon class value.

<span class="            "></span>

Full Reference to Bootstrap Glyphicon

Visit our comprehensive Bootstrap Glyphicon Reference for a comprehensive list of all glyphicons.

Labels and Badges in Bootstrap

Badges

The badges have the numbers 5, 10, and 3.

To make badges, use the <span> elements together with .badge class:

For instance:

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

Additionally, badges can be utilized inside buttons and other elements:

Primary (7)

Here’s an example of how to add badges to buttons:

For instance:

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

The Labels

Labels serve to add details about an object:

New Example 

New Example 

New Example 

New Example 

New Example 

New Example 

To generate a label, use the .label class inside a <span> element, followed by one of the six contextual classes: .label-default, .label-primary, .label-success, .label-info, .label-warning, or .label-danger:

For instance:

<h1>New <span class="label label-default">Example</span></h1>
<h2>New <span class="label label-default">Example</span></h2>
<h3>New <span class="label label-default">Example</span></h3>
<h4>New <span class="label label-default">Example</span></h4>
<h5>New <span class="label label-default">Example</span></h5>
<h6>New<span class="label label-default">Example</span></h6>

Every contextual label class is displayed in the example below:

Default Label

Primary Label

Success Label

Info Label

Warning Label

Danger Label

For instance:

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

Try Yourself With Exercises

Work out:

Create a badge with the number two inside using a span element after the “Comments” phrase.

<button>Comments                      </button>