Table of Contents

    Bootstrap Button Groups: Creating Button Groups

    Rumman Ansari July 05, 2024 5,963 views
    Bootstrap Button Groups: Creating Button Groups

    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 id="article-heading-3">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 id="article-heading-5">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 id="article-heading-7">Button Groups Sizes</h2>
  <p>Add class .btn-group-* to size all buttons in a button group.</p>
  <h3 id="article-heading-8">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 id="article-heading-9">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 id="article-heading-10">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 id="article-heading-12">Button Groups Sizes</h2>
  <p>Add class .btn-group-* to size all buttons in a button group.</p>
  <h3 id="article-heading-13">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 id="article-heading-14">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 id="article-heading-15">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 id="article-heading-18">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 id="article-heading-20">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 id="article-heading-23">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 id="article-heading-26">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 id="article-heading-29">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 id="article-heading-32">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