Bootstrap Button Groups: Creating Button Groups

Rumman Ansari   Software Engineer   2024-07-05 05:34:23   5582  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

Button Groups

Bootstrap 4 allows you to group a series of buttons together (on a single line) in a button group:

Only Important Code

 

<div class="container">
  <h2>Button Group</h2>
  <p>The .btn-group class creates a button group:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Apple</button>
    <button type="button" class="btn btn-success">Samsung</button>
    <button type="button" class="btn btn-success">Sony</button>
  </div>
</div>

Full Code For The Above Example



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button Group</h2>
  <p>The .btn-group class creates a button group:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Apple</button>
    <button type="button" class="btn btn-success">Samsung</button>
    <button type="button" class="btn btn-success">Sony</button>
  </div>
</div>

</body>
</html>
See Live Preview of the above code

Tip: Instead of applying button sizes to every button in a group, use class .btn-group-lg for a large button group or the .btn-group-sm for a small button group:

Only Important Code

 

<div class="container">
  <h2>Button Groups Sizes</h2>
  <p>Add class .btn-group-* to size all buttons in a button group.</p>
  <h3>Large Buttons:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-success">Man</button>
    <button type="button" class="btn btn-success">Woman</button>
    <button type="button" class="btn btn-success">Others</button>
  </div>
  <h3>Default Buttons:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Love</button>
    <button type="button" class="btn btn-success">Hate</button>
    <button type="button" class="btn btn-success">Sad</button>
  </div>
  <h3>Small Buttons:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-success">Hair</button>
    <button type="button" class="btn btn-success">Eyes</button>
    <button type="button" class="btn btn-success">Shirt</button>
  </div>
</div>

Full Code For The Above Example



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button Groups Sizes</h2>
  <p>Add class .btn-group-* to size all buttons in a button group.</p>
  <h3>Large Buttons:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-success">Man</button>
    <button type="button" class="btn btn-success">Woman</button>
    <button type="button" class="btn btn-success">Others</button>
  </div>
  <h3>Default Buttons:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Love</button>
    <button type="button" class="btn btn-success">Hate</button>
    <button type="button" class="btn btn-success">Sad</button>
  </div>
  <h3>Small Buttons:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-success">Hair</button>
    <button type="button" class="btn btn-success">Eyes</button>
    <button type="button" class="btn btn-success">Shirt</button>
  </div>
</div>

</body>
</html>
See Live Preview of the above code

Vertical Button Groups

Bootstrap 4 also supports vertical button groups:

Only Important Code

 
 
 <div class="container">
  <h2>Vertical Button Group</h2>
  <p>Use the .btn-group-vertical class to create a vertical button group:</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-success">Chana Dal</button>
    <button type="button" class="btn btn-success">Chana Masala</button>
    <button type="button" class="btn btn-success">Chapati</button>
	<button type="button" class="btn btn-success">Chicken Biriyani</button>
	<button type="button" class="btn btn-success">Chicken 65</button>
	<button type="button" class="btn btn-success">Chili Chicken</button>
  </div>
</div>

Full Code For The Above Example



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical Button Group</h2>
  <p>Use the .btn-group-vertical class to create a vertical button group:</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-success">Chana Dal</button>
    <button type="button" class="btn btn-success">Chana Masala</button>
    <button type="button" class="btn btn-success">Chapati</button>
	<button type="button" class="btn btn-success">Chicken Biriyani</button>
	<button type="button" class="btn btn-success">Chicken 65</button>
	<button type="button" class="btn btn-success">Chili Chicken</button>
  </div>
</div>

</body>
</html>
See Live Preview of the above code

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus (you will learn more about dropdowns in a later chapter):

Full Code For The Above Example



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nesting Button Groups</h2>
  <p>Nest button groups to create dropdown menus:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Mango Lassi</button>
    <button type="button" class="btn btn-success">Masala Chai</button>
    <div class="btn-group">
      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
      Sweet
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Dhokla</a>
        <a class="dropdown-item" href="#">Jalebi</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>
See Live Preview of the above code

Split Button Dropdowns

Full Code For The Above Example



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Split Buttons</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Alu items</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Alu Gobi</a>
      <a class="dropdown-item" href="#">Alu Matar</a>
	  <a class="dropdown-item" href="#">Alu Barfi</a>
	  <a class="dropdown-item" href="#">Alu Vindaloo</a>
	  <a class="dropdown-item" href="#">Alu Chicken</a>
    </div>
  </div>
</div>

</body>
</html>
See Live Preview of the above code

Vertical Button Group w/ Dropdown

Full Code For The Above Example



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical Button Group with Dropdown</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-success">Tikka</button>
    <button type="button" class="btn btn-success">Dall Puri</button>
    <div class="btn-group">
      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        Chicken
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Chicken razala</a>
        <a class="dropdown-item" href="#">Chicken Tikka masala</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>
See Live Preview of the above code

Button Groups Side by Side

Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:

Full Code For The Above Example



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button Group</h2>
  <p>Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Choco pie</button>
    <button type="button" class="btn btn-success">Chowder</button>
    <button type="button" class="btn btn-success">City chicken</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Clam cake</button>
    <button type="button" class="btn btn-success">Clam chowder</button>
    <button type="button" class="btn btn-success">Coleslaw</button>
  </div>
</div>

</body>
</html>
See Live Preview of the above code