Bootstrap 4 Tutorial

BS4 Introduction

How to use Bootstrap

BS4 Layout

BS4 Grid System

BS4 Typography

BS4 Colors

BS4 Table

BS4 Images

BS4 Jumbotron

BS4 Alerts

BS4 Buttons

BS4 Button Group

BS4 Badges

BS4 Progress Bar

BS4 Pagination

BS4 Breadcrumb

BS4 Card

BS4 Collapse

BS4 Nav Tabs Pills

BS4 Navbar

BS4 Tooltip

BS4 Carousel

BS4 Scrollspy

BS4 Forms

BS4 Form Validation

BS4 Form Custom

Page Stats

Visitor: 187

Bootstrap 4 Button Group

Button Group

Bootstrap allows you to group a series of buttons together in a single line. Use a <div> element with class ".btn-group" to create a button group:

Example 1: Bootstrap 4 Button Group

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>


Button Sizing

Instead of applying button sizes to every button in a group, use class .btn-group-lg|sm in a group or groups.

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>






Button toolbar

Combine the sets of button groups into button toolbars

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

Vertical Button Groups

To create a vertical button group, use Bootstrap class ".btn-group-vertical".

<div class="btn-group-vertical">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>


Dropdown Menus

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <div class="btn-group">
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Course </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">HTML</a>
          <a class="dropdown-item" href="#">CSS</a>
          <a class="dropdown-item" href="#">JS</a>
        </div>
    </div>
</div> 


Split Dropdown Button

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Course</button>
    
    <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"><span class="caret"></span></button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">HTML</a>
        <a class="dropdown-item" href="#">CSS</a>
        <a class="dropdown-item" href="#">JS</a>
    </div>
</div>


Dropdown Button with Divider

<ul class="dropdown-menu">
    <li><a href="#">Our Work</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#">More..</a></li>
</ul>


Dropdown Header

<ul class="dropdown-menu">
    <li class="dropdown-header">HTML</li>
    <li><a href="#">HTML 4</a></li>
    <li><a href="#">HTML 5</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">CSS</li>
    <li><a href="#">CSS 1</a></li>
    <li><a href="#">CSS 2</a></li>
    <li><a href="#">CSS 3</a></li>
</ul>


Dropup menu

If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropup".

<button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <div class="btn-group dropup">
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Course</button>
        <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JS</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
</div>

Styling Checkbox

Bootstrap's button styles can be applied to other elements, such as checkbox or radio button. Add data-toggle="buttons" to a .btn-group and add .btn-group-toggle to style the <input>s within your buttons. The checked state for these buttons is only updated via click event on the button.
Note that pre-checked buttons require you to manually add the .active class to the input's label.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-danger active">
    <input type="checkbox" checked autocomplete="off"> Active
  </label>
  <label class="btn btn-danger">
    <input type="checkbox" autocomplete="off"> Check
  </label>
  <label class="btn btn-danger">
    <input type="checkbox" autocomplete="off"> Check
  </label>
</div>

Styling RadioButton

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-danger active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>