Bootstrap Buttons And Button Groups Complete Guide

 Last Update:2025-06-22T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    9 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of Bootstrap Buttons and Button Groups

Bootstrap Buttons:

Introduction: Bootstrap is one of the most popular front-end frameworks for building responsive web applications and websites. It simplifies the process of creating complex designs by providing pre-designed components like buttons that can be easily customized to fit into the application’s overall theme and functionality.

Basic Structure and Usage:

  • HTML Element: The default button in Bootstrap is created using the <button> element or the <a> element.
  • Classifiers: Use the .btn class followed by a modifier class (like .btn-primary, .btn-secondary) to quickly style your button.
  • Color Variants: Bootstrap provides several color variants (e.g., primary, secondary, success, danger, warning, info, light, dark, link) for buttons. This makes it easy to match buttons to particular actions (e.g., .btn-success for a save button, .btn-danger for a delete button).

Example:

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>

Button Sizes:

  • Large Button: Add .btn-lg class for larger buttons. Helps in drawing more attention or for use as primary action buttons.
  • Small Button: Add .btn-sm class for smaller buttons, suitable for compact interfaces or action buttons within forms.

Example:

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Active and DISABLED State:

  • Active State: Adding .active class gives a button an active or pressed appearance.
  • Disabled State: Adding the disabled attribute to button elements will make it unclickable.

Example:

<button type="button" class="btn btn-primary active" aria-pressed="true">Active button</button>
<button type="button" class="btn btn-secondary" disabled>Disabled button</button>

Button with Icons: Bootstrap works seamlessly with icon libraries like Font Awesome. Combining icons with buttons can make interfaces more intuitive and engaging.

Example with Font Awesome:

<button type="button" class="btn btn-primary"><i class="fas fa-search"></i> Search</button>
<button type="button" class="btn btn-success"><i class="fas fa-save"></i> Save</button>

Button Groups:

Introduction: Button groups can be used to combine a series of buttons into a single, cohesive element. This is particularly useful when presenting multiple actions closely together or creating segmented links.

Basic Structure and Usage:

  • Simple Group: Group a series of buttons together by placing them inside a <div> element that also contains the .btn-group class.
  • Button Toolbar: To create a larger grouping or a toolbar, nest .btn-group within a .btn-toolbar.

Example:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Nesting Button Groups within Toolbars: Example:

<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>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">4</button>
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
  </div>
</div>

Mixed Styles: Button groups also support mixed styles, enabling different buttons to have different appearances within a single group.

Example:

<div class="btn-group" role="group" aria-label="Button group with mixed styles">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-danger">Danger</button>
</div>

Vertical Variation: For a vertical arrangement of buttons, add the .btn-group-vertical class.

Example:

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-secondary">Button</button>
  <button type="button" class="btn btn-secondary">Button</button>
  <button type="button" class="btn btn-secondary">Button</button>
</div>

Split Button Dropdowns: To create a split dropdown button, use the dropdown class and combine the .btn and .dropdown-toggle classes appropriately.

Example:

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Justified Button Groups: In Bootstrap 3, button groups could be justified to fill the width of its parent, but this feature does not exist in Bootstrap 4 and 5. However, you can use flexbox utilities like d-flex and justify-content-between to achieve similar results.

Example:

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Bootstrap Buttons and Button Groups

Bootstrap Buttons: Complete Example, Step-by-Step

Step 1: Set up your HTML file

First, set up a basic HTML structure. Ensure that you link to Bootstrap CSS and JS files.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Buttons Example</title>
    <!-- Link to Bootstrap -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Content will go here -->
    
    <!-- Include jQuery and Bootstrap JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Step 2: Adding a Basic Button

Now, add a basic button inside the <body> tag using Bootstrap's button classes.

<button type="button" class="btn btn-primary">Primary Button</button>

This creates a blue button with rounded corners and a shadow effect.

Step 3: Adding Different Styled Buttons

Bootstrap provides several built-in styles for buttons like secondary, success, danger, etc. Let's add buttons of all these styles.

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-link">Link Button</button>

Step 4: Adding Outline Buttons

Outline buttons are just border without the background color. They can be added by using the btn-outline- prefix.

<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
<button type="button" class="btn btn-outline-success">Success Outline Button</button>
<button type="button" class="btn btn-outline-danger">Danger Outline Button</button>
<button type="button" class="btn btn-outline-warning">Warning Outline Button</button>
<button type="button" class="btn btn-outline-info">Info Outline Button</button>
<button type="button" class="btn btn-outline-light">Light Outline Button</button>
<button type="button" class="btn btn-outline-dark">Dark Outline Button</button>

Step 5: Adding Button Sizes

Bootstrap also allows you to define the size of the button using btn-sm, btn-lg, or no class for default sizes.

<button type="button" class="btn btn-primary btn-sm">Small Primary Button</button>
<button type="button" class="btn btn-primary">Default Primary Button</button>
<button type="button" class="btn btn-primary btn-lg">Large Primary Button</button>

Step 6: Adding Block Level Buttons

Sometimes, you may need a button that spans across the entire width of the parent element. Use btn-block for this purpose.

<button type="button" class="btn btn-primary btn-block">Block Level Primary Button</button>
<button type="button" class="btn btn-secondary btn-block">Block Level Secondary Button</button>

Full Code for Buttons

Combining all of the above examples into one, here is the full code for Bootstrap buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Buttons Example</title>
    <!-- Link to Bootstrap -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Normal Buttons -->
    <div class="container mt-5">
        <h2>Normal Buttons</h2>
        <button type="button" class="btn btn-primary">Primary Button</button>
        <button type="button" class="btn btn-secondary">Secondary Button</button>
        <button type="button" class="btn btn-success">Success Button</button>
        <button type="button" class="btn btn-danger">Danger Button</button>
        <button type="button" class="btn btn-warning">Warning Button</button>
        <button type="button" class="btn btn-info">Info Button</button>
        <button type="button" class="btn btn-light">Light Button</button>
        <button type="button" class="btn btn-dark">Dark Button</button>
        <button type="button" class="btn btn-link">Link Button</button>
    </div>

    <!-- Outline Buttons -->
    <div class="container mt-5">
        <h2>Outline Buttons</h2>
        <button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
        <button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
        <button type="button" class="btn btn-outline-success">Success Outline Button</button>
        <button type="button" class="btn btn-outline-danger">Danger Outline Button</button>
        <button type="button" class="btn btn-outline-warning">Warning Outline Button</button>
        <button type="button" class="btn btn-outline-info">Info Outline Button</button>
        <button type="button" class="btn btn-outline-light">Light Outline Button</button>
        <button type="button" class="btn btn-outline-dark">Dark Outline Button</button>
    </div>

    <!-- Button Sizes -->
    <div class="container mt-5">
        <h2>Button Sizes</h2>
         <button type="button" class="btn btn-primary btn-sm">Small Primary Button</button>
        <button type="button" class="btn btn-primary">Default Primary Button</button>
        <button type="button" class="btn btn-primary btn-lg">Large Primary Button</button>
    </div>

    <!-- Block Level Buttons -->
    <div class="container mt-5">
        <h2>Block Level Buttons</h2>
        <button type="button" class="btn btn-primary btn-block">Block Level Primary Button</button>
        <button type="button" class="btn btn-secondary btn-block">Block Level Secondary Button</button>
    </div>

    <!-- Include jQuery and Bootstrap JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap Button Groups: Complete Example, Step-by-Step

Step 1: Create a Button Group

Button groups allow you to group a series of buttons together on a single line. Here's how to create a simple button group.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Step 2: Add Tooltips or Popup Information

You can add tooltips to each button in the button group to provide more information when hovered over.

<div class="btn-group" role="group" aria-label="Tooltip example">
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Left</button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Middle</button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Right</button>
</div>

Make sure to initialize tooltips via JavaScript at the bottom of the body.

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

Step 3: Add Split Button Dropdown

Split button dropdowns allow you to have a dropdown menu attached to a button. The button itself and the dropdown are split into two separate elements but behave as one.

<div class="btn-group">
  <button type="button" class="btn btn-secondary">Action Button</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Step 4: Vertical Button Group

You can also vertically stack buttons using the btn-group-vertical class.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Full Code for Button Groups

Combining all of the above examples into one, here is the full code for Bootstrap button groups.

Top 10 Interview Questions & Answers on Bootstrap Buttons and Button Groups

  1. What are Bootstrap Buttons?

    • Answer: Bootstrap Buttons are styled using predefined CSS classes that provide a consistent and visually appealing look across various devices. Bootstrap offers a range of button styles including primary, secondary, success, warning, danger, light, dark, and more. Buttons in Bootstrap are created using the <button> element or <a> elements styled to look like buttons.

  2. How do you create a standard Bootstrap Button?

    • Answer: To create a standard Bootstrap button, you add the class .btn along with a contextual class like .btn-primary, .btn-secondary, etc., to a button element. For example: 
      <button type="button" class="btn btn-primary">Primary Button</button>

  3. What is a Button Group in Bootstrap?

    • Answer: A Button Group in Bootstrap allows you to group a series of buttons together on a single line. You use the .btn-group class around the buttons to achieve this. Buttons inside a group are typically styled with borders aligned and adjusted for better display.

  4. How can you create a vertical Button Group?

    • Answer: To create a vertical Button Group in Bootstrap, you add the class .btn-group-vertical to the container of the buttons. Here is an example: 
      <div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Button 1</button>
  <button type="button" class="btn btn-secondary">Button 2</button>
</div>

  5. Can Button Groups be nested?

    • Answer: Yes, Button Groups can be nested. You can place a .btn-group inside another .btn-group to create a more complex button structure, like a split dropdown inside a button group.

  6. How can you make Button Groups responsive?

    • Answer: Bootstrap's Button Groups are inherently responsive. However, for better control or specific layouts, use responsive utility classes on the .btn-group. For example, .d-lg-inline-flex can make the button group inline only on large screens. 
      <div class="btn-group d-lg-inline-flex">
  <!-- Buttons inside -->
</div>

  7. What are the differences between Button Groups and Button Toolbars?

    • Answer: Button Toolbars are container elements for groups of button groups or input groups, providing a means to combine multiple groups CONTINUOUSLY. Button Groups, on the other hand, are individual groups of buttons. A Button Toolbar wraps and aligns multiple button groups.

  8. How do you disable buttons in a Button Group?

    • Answer: To disable buttons within a Button Group, add the disabled attribute to each individual button: 
      <button type="button" class="btn btn-secondary" disabled>Disabled button</button>

  9. What are some useful classes for customizing Bootstrap Buttons?

    • Answer: Bootstrap offers various utility classes to further customize button appearance, such as .btn-lg for a larger button, .btn-sm for a smaller button, .active to make a button appear pressed, .disabled to disable interaction, and more.

  10. How do you create a Split Button Dropdown with Bootstrap?

    • Answer: To create a Split Button Dropdown, wrap two buttons (one with .btn, and another with .btn and .dropdown-toggle) inside a .btn-group. Here’s an example:

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.