##### Default Button

Create buttons in Bootstrap by adding the `.btn` class along with contextual classes like `.btn-primary`, `.btn-secondary`, or `.btn-success` to style the button.

Use the `.btn` class to create buttons in Bootstrap. Add the `.rounded-pill` class to give the button rounded edges, creating a pill-shaped button.

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

##### Light Button

Create light-themed buttons in Bootstrap by using the `.btn-light` class. You can also add variations like `.btn-light-primary` or `.btn-light-secondary` for different color accents.

Create light-themed, pill-shaped buttons in Bootstrap by combining the `.btn-light-*` class with `.rounded-pill`. This gives the button a light color and rounded edges for a sleek look.

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

##### Outline Button

Create outline buttons in Bootstrap using the `.btn-outline-*` class. This gives the button a border and transparent background, with color variations like `.btn-outline-primary` or `.btn-outline-secondary`.

Create outline buttons with rounded edges in Bootstrap by using the `.btn-outline-*` class along with `.rounded-pill`. This combines a transparent button with a sleek, pill-shaped design.

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

##### Shadow Button

Create text-only buttons in Bootstrap using the `.btn-text-*` class. This removes the background and border, leaving only the text styled as a button.

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

##### Text Button

Create text-only buttons in Bootstrap using the `.btn-text-*` class. This removes the background and border, leaving only the text styled as a button.

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

##### Buttons Size

Adjust button sizes in Bootstrap by using the size classes `.btn-sm` for smaller buttons and `.btn-lg` for larger buttons. The default size is applied when no size class is used.

    <!-- Small Button -->
    <button type="button" class="btn btn-primary btn-sm">Small button</button>

    <!-- Normal Button -->
    <button type="button" class="btn btn-primary">Large button</button>

    <!-- Large Button -->
    <button type="button" class="btn btn-primary btn-lg">Large button</button>

##### Social Buttons

Create social media buttons in Bootstrap by using the `.btn` class along with custom color classes for each platform, such as `.btn-facebook`, `.btn-light-facebook`,`.btn-twitter` or `.btn-light-twitter`, to match the respective brand styles.

Create social media outline buttons in Bootstrap using the `.btn btn-outline-youtube` class. This gives the button a transparent background with a colored border, styled for the YouTube brand.

    <button type="button" class="btn btn-facebook icon-btn">
      <i class="ri-facebook-fill"></i>
    </button>
    <button type="button" class="btn btn-google icon-btn">
      <i class="ri-google-fill"></i>
    </button>
    <button type="button" class="btn btn-twitter icon-btn">
      <i class="ri-twitter-fill"></i>
    </button>
    <button type="button" class="btn btn-instagram icon-btn">
      <i class="ri-instagram-fill"></i>
    </button>
    <button type="button" class="btn btn-youtube icon-btn">
      <i class="ri-youtube-fill"></i>
    </button>
    <button type="button" class="btn btn-linkedin icon-btn">
      <i class="ri-linkedin-box-fill"></i>
    </button>

    <button type="button" class="btn btn-light-facebook icon-btn">
      <i class="ri-facebook-fill"></i>
    </button>
    <button type="button" class="btn btn-light-google icon-btn">
      <i class="ri-google-fill"></i>
    </button>
    <button type="button" class="btn btn-light-twitter icon-btn">
      <i class="ri-twitter-fill"></i>
    </button>
    <button type="button" class="btn btn-light-instagram icon-btn">
      <i class="ri-instagram-fill"></i>
    </button>
    <button type="button" class="btn btn-light-youtube icon-btn">
      <i class="ri-youtube-fill"></i>
    </button>
    <button type="button" class="btn btn-light-linkedin icon-btn">
      <i class="ri-linkedin-box-fill"></i>
    </button>
    <button type="button" class="btn btn-outline-facebook icon-btn">
        <i class="ri-facebook-fill"></i>
    </button>
    <button type="button" class="btn btn-outline-google icon-btn">
        <i class="ri-google-fill"></i>
    </button>
    <button type="button" class="btn btn-outline-twitter icon-btn">
        <i class="ri-twitter-fill"></i>
    </button>
    <button type="button" class="btn btn-outline-instagram icon-btn">
        <i class="ri-instagram-fill"></i>
    </button>
    <button type="button" class="btn btn-outline-youtube icon-btn">
        <i class="ri-youtube-fill"></i>
    </button>
    <button type="button" class="btn btn-outline-linkedin icon-btn">
        <i class="ri-linkedin-box-fill"></i>
    </button>

##### Icon Buttons

Create icon buttons in Bootstrap by combining the `.btn` class with an icon, such as using an icon from a library like Remix Icon. This allows you to add visual elements alongside button text.

Create icon buttons in Bootstrap by using the `.icon-btn` class along with an icon from an icon library. This class styles the button to incorporate an icon, making it visually appealing and functional.

    <button type="button" class="btn btn-primary">
      <i class="ri-star-line me-2"></i>
      Primary
    </button>
    <button type="button" class="btn rounded-pill btn-primary">
      <i class="ri-star-line me-2"></i>
      Primary
    </button>
    <button type="button" class="btn btn-secondary">
      <i class="ri-notification-4-line me-2"></i>
      Secondary
    </button>
    <button type="button" class="btn rounded-pill btn-secondary">
      <i class="ri-notification-4-line me-2"></i>
      Secondary
    </button>
    <button type="button" class="btn btn-light-primary">
      <i class="ri-star-line me-2"></i>
      Primary
    </button>
    <button type="button" class="btn rounded-pill btn-light-primary">
      <i class="ri-star-line me-2"></i>
      Primary
    </button>
    <button type="button" class="btn btn-light-secondary">
      <i class="ri-notification-4-line me-2"></i>
      Secondary
    </button>
    <button type="button" class="btn rounded-pill btn-light-secondary">
      <i class="ri-notification-4-line me-2"></i>
      Secondary
    </button>
    <button type="button" class="btn btn-outline-primary">
      <i class="ri-star-line me-2"></i>
      Primary
    </button>
    <button type="button" class="btn rounded-pill btn-outline-primary">
      <i class="ri-star-line me-2"></i>
      Primary
    </button>
    <button type="button" class="btn btn-outline-secondary">
      <i class="ri-notification-4-line me-2"></i>
      Secondary
    </button>
    <button type="button" class="btn rounded-pill btn-outline-secondary">
      <i class="ri-notification-4-line me-2"></i>
      Secondary
    </button>
    <button type="button" class="btn btn-primary icon-btn">
      <i class="ri-star-line"></i>
    </button>
    <button type="button" class="btn btn-secondary icon-btn">
      <i class="ri-notification-4-line"></i>
    </button>
    <button type="button" class="btn btn-primary rounded-pill icon-btn">
      <i class="ri-star-line"></i>
    </button>
    <button type="button" class="btn btn-secondary rounded-pill icon-btn">
      <i class="ri-notification-4-line"></i>
    </button>

    <button type="button" class="btn btn-light-primary icon-btn">
      <i class="ri-star-line"></i>
    </button>
    <button type="button" class="btn btn-light-secondary icon-btn">
      <i class="ri-notification-4-line"></i>
    </button>
    <button type="button" class="btn btn-light-primary rounded-pill icon-btn">
      <i class="ri-star-line"></i>
    </button>
    <button type="button" class="btn btn-light-secondary rounded-pill icon-btn">
      <i class="ri-notification-4-line"></i>
    </button>

    <button type="button" class="btn btn-outline-primary icon-btn">
      <i class="ri-star-line"></i>
    </button>
    <button type="button" class="btn btn-outline-secondary icon-btn">
      <i class="ri-notification-4-line"></i>
    </button>
    <button type="button" class="btn btn-outline-primary rounded-pill icon-btn">
      <i class="ri-star-line"></i>
    </button>
    <button type="button" class="btn btn-outline-secondary rounded-pill icon-btn">
      <i class="ri-notification-4-line"></i>
    </button>

##### Icon Button Size

Create icon buttons in Bootstrap using the `.icon-btn` class. Adjust the size with `.icon-btn-sm` for smaller buttons, allowing for a compact design while incorporating icons.

    <button type="button" class="btn btn-primary icon-btn-sm">
      <i class="ri-home-2-line"></i>
    </button>
    <button type="button" class="btn btn-primary icon-btn">
      <i class="ri-home-2-line"></i>
    </button>
    <button type="button" class="btn btn-primary icon-btn-lg">
      <i class="ri-home-2-line"></i>
    </button>

##### Custom Toggle Buttons

Create custom toggle buttons in Bootstrap using the `.btn-loader` class to show a loading state. By default, use `.indicator-label` for button text, which changes to `.indicator-progress` after clicking to indicate the loading process.

    <button type="button" class="btn btn-primary btn-loader">
      <span class="indicator-label">
        Submit
      </span>
      <span class="indicator-progress flex gap-2 align-items-center">
        <span>Loading...</span>
        <i class="ri-loader-2-fill"></i>
      </span>
    </button>
    <button type="button" class="btn btn-danger btn-loader">
      <span class="indicator-label">
        Submit
      </span>
      <span class="indicator-progress flex gap-2 align-items-center">
        <span>Please Wait...</span>
        <i class="ri-loader-2-fill"></i>
      </span>
    </button>
    <button type="button" class="btn btn-primary custom-toggle" data-bs-toggle="button">
      <span class="icon-on">
        <i class="ri-add-line align-bottom me-1"></i> Unfollow
      </span>
      <span class="icon-off">
        <i class="ri-user-unfollow-line align-bottom me-1"></i> Follow
      </span>
    </button>
    <button type="button" class="btn btn-primary custom-toggle" data-bs-toggle="button">
      <span class="icon-on">
        Inactive
      </span>
      <span class="icon-off">
        Active
      </span>
    </button>
    <button type="button" class="btn btn-dark icon-btn custom-toggle" data-bs-toggle="button">
      <span class="icon-on">
        <i class="ri-bookmark-line"></i>
      </span>
      <span class="icon-off">
        <i class="ri-bookmark-fill"></i>
      </span>
    </button>
    <button type="button" class="btn btn-success icon-btn custom-toggle" data-bs-toggle="button">
      <span class="icon-on">
        <i class="ri-heart-line"></i>
      </span>
      <span class="icon-off">
        <i class="ri-heart-fill"></i>
      </span>
    </button>

##### Loading Animations

Add loading animations in Bootstrap using the `.btn-loader` class. Incorporate `.spinner-grow` or `.spinner-border` classes to show different types of spinners, providing visual feedback during loading processes.

    <button type="button" class="btn btn-primary btn-loader">
      <span class="d-flex gap-2 align-items-center">
        <span class="flex-grow-1">
          Loading...
        </span>
        <span class="flex-shrink-0">
          <i class="ri-loader-2-fill"></i>
          <span class="visually-hidden">Loading...</span>
        </span>
      </span>
    </button>
    <button type="button" class="btn btn-secondary btn-loader">
      <span class="d-flex gap-2 align-items-center">
        <span class="flex-grow-1">
          Please Wait...
        </span>
        <span class="flex-shrink-0">
          <i class="ri-refresh-line"></i>
          <span class="visually-hidden">Please Wait...</span>
        </span>
      </span>
    </button>
    <button type="button" class="btn btn-primary">
      <span class="d-flex align-items-center">
        <span class="spinner-border spinner-border-sm me-2 flex-shrink-0" role="status">
          <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
          Loading...
        </span>
      </span>
    </button>
    <button type="button" class="btn btn-secondary">
      <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
          Wait...
        </span>
        <span class="spinner-border spinner-border-sm me-2 flex-shrink-0" role="status">
          <span class="visually-hidden">Wait...</span>
        </span>
      </span>
    </button>
    <button type="button" class="btn btn-success icon-btn">
      <span class="spinner-grow spinner-grow-sm flex-shrink-0" role="status">
        <span class="visually-hidden">Wait...</span>
      </span>
    </button>
    <button type="button" class="btn btn-success icon-btn">
      <span class="spinner-border spinner-border-sm flex-shrink-0" role="status">
        <span class="visually-hidden">Wait...</span>
      </span>
    </button>

##### Full width button

Create a full-width button in Bootstrap by using the `.w-100` class along with the `.btn` class. This makes the button stretch to fill its container, ensuring it occupies the entire width available.

    <button class="btn btn-primary w-100" type="button">Button</button>
    <button class="btn btn-secondary w-100" type="button">Button</button>

    <button class="btn btn-light-primary w-100" type="button">Button</button>
    <button class="btn btn-light-secondary w-100" type="button">Button</button>

    <button class="btn btn-outline-primary w-100" type="button">Button</button>
    <button class="btn btn-outline-secondary w-100" type="button">Button</button>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark