A Complete Guide - Bootstrap Buttons and Button Groups

Last Updated: 03 Jul, 2025   
  YOU NEED ANY HELP? THEN SELECT ANY TEXT.

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.

 YOU NEED ANY HELP? THEN SELECT ANY TEXT.

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.