Bootstrap 4 Button groups

Bootstrap 4 Button groups

Learn how to work with Bootstrap 4  button groups 

 

Bootstrap 4 Buttons Groups

Bootstrap 4 give you permition  to groups multiple buttons within a single block or line with a button groups.Based on demand, JavaScript button plugin can also be used to create checkbox and radio button behaviour from button group.

bootstrap 4 buttons Group

 <!-- class="btn-group" -->
 <div class="btn-group" role="group">
  <button type="button" class="btn btn-success">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-danger">Right</button>
</div>

 

Bootstrap 4 Button Toolbar

Bootstrap 4

Multiple Button groups can be combined into a button toolbar for complex button set using class btn-toolbar.

<!-- button toolbar using class ".btn-toolbar" -->
 <div class="btn-toolbar" role="toolbar" aria-label="button group toolbar">
 
 <!-- Button group 1-->
  <div class="btn-group" role="group" aria-label="group one">
    <button type="button" class="btn btn-primary">On</button>
    <button type="button" class="btn btn-secondary">Off</button>
    <button type="button" class="btn btn-success">Auto</button>
    <button type="button" class="btn btn-danger">Manual</button>
  </div>
  
  <!-- Button group 2-->
  <div class="btn-group" role="group" aria-label="group two">
    <button type="button" class="btn btn-primary btn-lg">1</button>
    <button type="button" class="btn btn-secondary btn-lg">2</button>
    <button type="button" class="btn btn-danger btn-lg">3</button>
  </div>
 
 <!-- Button group 3--> 
  <div class="btn-group" role="group" aria-label="group three">
    <button type="button" class="btn btn-primary">$</button>
  </div>

 

Bootstrap 4 Button Groups Button Sizes

 

Bootstrap 4 Buttons Group

Entire button groups can be assigned button sizes using a single class .btn-group-* to each .btn-group, for nested button groups it must be applied to each group.

 

<!-- Button Group 1, class "btn-group-lg" -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-danger">Right</button>
  </div>
  <br>
   <!-- Button Group 2 , default size -->
  <div class="btn-group" role="group" aria-label="Default button group">
    <button type="button" class="btn btn-success">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-warning">Right</button>
  </div>
  <br>
   <!-- Button Group 3 ,  class "btn-group-sm"-->
  <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
    <button type="button" class="btn btn-danger">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-success">Right</button>
  </div>
  <br>
  <!-- Button Group 4 ,  class "btn-group-xs"-->
  <div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-danger">Right</button>
  </div>

Bootstrap 4  Button Nesting

Bootstrap 4 Button nasting

A Nested button group can be created by nesting one button group within another, it is used to create dropdown menu with mixed buttons.

<div class="btn-group" role="group" aria-label="nested dropdown">
  <button type="button" class="btn btn-danger">On</button>
  <button type="button" class="btn btn-success">OFF</button>

  <div class="btn-group" role="group">
    <button id="buttondropGroup" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Mode 
    </button>
    <!-- Dropdown Menu using class "dropdown-menu" -->
    <div class="dropdown-menu" aria-labelledby="buttondropGroup">
      <!-- Dropdown items using class "dropdown-item" -->
      <a class="dropdown-item" href="#">Auto</a>
      <a class="dropdown-item" href="#">Manual</a>
    </div>
  </div>
</div>

 

Bootstrap 4 Button Vertical DropDown

Bootstrap 4 Buttons

Bootstrap 4 Block level buttons which spans entire width of parent element can be created using class .btn-block.

<!-- class .btn-group-vertical -->
  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-secondary">Button</button>
    <div class="btn-group" role="group">
      <button id="verticalDropdown1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </button>
      <div class="dropdown-menu" aria-labelledby="verticalDropdown1">
        <a class="dropdown-item" href="#">Dropdown link</a>
        <a class="dropdown-item" href="#">Dropdown link</a>
      </div>
    </div>

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman