❮ Previous Next ❯

Button Components

  • Learn different Bootstrap button styles and customization techniques.

  • Introduction to Button Components

    Buttons are one of the most frequently used UI elements in any application.
    They trigger actions such as:

    • Submitting forms

    • Navigating pages

    • Opening modals

    • Confirming or cancelling operations

    In Bootstrap, buttons are pre-styled, accessible, responsive, and easy to customize using classes.

    Buttons

    What Is a Bootstrap Button ?

    A Bootstrap button is a styled clickable element created using:

    • <button>

    • <a>

    • <input>

    Bootstrap provides consistent styling through the .btn class and its variations.

    Basic Button Syntax

    Every Bootstrap button starts with:

    <button class="btn">Button</button>

    The .btn class activates Bootstrap button styling.

    Button Variants (Contextual Buttons)

    Bootstrap buttons come with predefined contextual styles to represent meaning.

Bootstrap Button Styles (.btn Classes)

Bootstrap provides contextual button classes like .btn-primary, .btn-success, .btn-danger, etc., to represent different actions and meanings using predefined colors and styles. 

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

  • Purpose of variants:

    • primary → main action

    • success → positive action

    • danger → destructive action

    • warning → caution

    Using correct variants improves UX and clarity.

    Buttons as Links

    Buttons can also be created using <a> tags.

Styling Anchor Tags as Buttons in Bootstrap

Bootstrap lets you use .btn classes to make links look like buttons. 

<a href="#" class="btn btn-primary">Go to Page</a>

  • Use this when:

    • Navigation is required

    • No form submission is involved

      Outline Buttons

      Outline buttons have borders instead of solid backgrounds.

    Outline Button Styles

    Bootstrap outline buttons use border colors instead of solid backgrounds by applying .btn-outline-* classes. 

    <button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-outline-danger">Delete</button>

    • Use cases:

      • Secondary actions

      • Less visual emphasis

      • Clean UI design

      Button Sizes

      Bootstrap provides predefined sizes.

    Button Size Classes

    Bootstrap provides .btn-lg and .btn-sm classes to create large and small sized buttons. 

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

    • Use size variation for:

      • Hierarchy

      • Responsive layouts

      • Call-to-action emphasis

      Disabled Buttons

      Disabled buttons prevent user interaction.

    Creating Disabled Buttons

    The disabled attribute makes a Bootstrap button inactive and prevents user interaction. 

    <button class="btn btn-primary" disabled>Disabled</button>

    • Purpose:

      • Indicate unavailable actions

      • Prevent invalid submissions

      Block-Level Buttons

      Block buttons take the full width of the parent.

    Creating Full-Width Buttons

    Using the .w-100 class makes the button take the full width of its parent container. 

    <button class="btn btn-success w-100">Full Width Button</button>

    • Common use cases:

      • Mobile layouts

      • Login and signup forms

      Buttons with Icons

      Buttons often include icons for clarity.

    Adding Icons Inside Bootstrap Buttons

    Icons can be added inside buttons using tags to improve clarity and visual appeal. 

    <button class="btn btn-primary">
  <i class="bi bi-check-circle"></i> Submit
</button>

    • Icons improve:

      • Recognition

      • Speed of understanding

      • Visual feedback

      Button Groups

      What Is a Button Group ?

      A Button Group combines multiple buttons into a single horizontal or vertical unit.

      Button groups are used when:

      • Buttons are related

      • Only one action should be chosen

      • Actions belong to the same context

    Creating a Button Group in Bootstrap

    The .btn-group class groups multiple buttons together in a single horizontal line. 

    <div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

    • Purpose:

      • Group related actions

      • Save space

      • Improve visual organization

    Changing Button Group Size

    The .btn-group-lg class increases the size of all buttons inside the group. 

    <div class="btn-group btn-group-lg">
  <button class="btn btn-secondary">Large</button>
  <button class="btn btn-secondary">Buttons</button>
</div>
    • Button groups follow the same size rules as buttons.

    Creating Vertical Button Groups

    The .btn-group-vertical class arranges buttons vertically instead of horizontally. 

    <div class="btn-group-vertical">
  <button class="btn btn-dark">Top</button>
  <button class="btn btn-dark">Middle</button>
  <button class="btn btn-dark">Bottom</button>
</div>

    • Use cases:

      • Sidebar actions

      • Mobile-friendly layouts

      • Tool panels

    Adding Dropdowns Inside Button Groups

    A dropdown can be combined with a button group to provide multiple related actions in a compact layout. 

    <div class="btn-group">
  <button class="btn btn-primary">Action</button>
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
  </ul>
</div>

    • Purpose:

      • Combine actions

      • Reduce UI clutter

      • Advanced interaction

      Toolbar with Button Groups

      Multiple button groups can be combined into a toolbar.

    Creating a Toolbar with Multiple Button Groups

    The .btn-toolbar class combines multiple button groups into a single horizontal toolbar. 

    <div class="btn-toolbar">
  <div class="btn-group me-2">
    <button class="btn btn-outline-secondary">1</button>
    <button class="btn btn-outline-secondary">2</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-secondary">A</button>
    <button class="btn btn-outline-secondary">B</button>
  </div>
</div>

    • Used in:

      • Editors

      • Dashboards

      • Control panels

      Choosing Between Buttons and Button Groups

      Use single buttons when:

      • Action is independent

      • Only one action is needed

      Use button groups when:

      • Actions are related

      • Options belong together

      • Space efficiency is required

      Common Mistakes

      1. Using wrong button variants

      2. Overusing primary buttons

      3. Ignoring button accessibility

      4. Mixing unrelated buttons in a group

      5. Forgetting responsive behavior

      Buttons should communicate intent clearly.
    ❮ Previous Next ❯