« Previous Next »

Bootstrap Button Examples

What is a Bootstrap Button?

A Bootstrap button is a pre-styled interactive element that can be used for a variety of actions such as form submissions, navigation, or triggering custom JavaScript functions. Bootstrap provides different classes that allow you to create buttons with various styles, sizes, and responsive behavior. Buttons are an essential part of user interfaces, helping users interact with your website or application.

Key Features of Bootstrap Buttons:

  • Predefined Styles: Bootstrap offers buttons with different styles like primary, secondary, success, danger, and more, each representing different types of actions.
  • Responsive Design: Bootstrap buttons automatically adjust based on screen size, ensuring they look good on all devices (mobile, tablet, desktop).
  • Different Sizes: You can create small, medium, or large buttons with simple classes like btn-sm or btn-lg.
  • Customizable: You can easily customize Bootstrap buttons with classes like btn-outline for outline buttons, or w-100 for full-width buttons on small screens.
  • Easy to Use: Bootstrap buttons are easy to implement and require only simple HTML and Bootstrap classes to work.

Why Use Bootstrap Buttons?

Bootstrap buttons are used to maintain a consistent and responsive design across a website. They help in creating a uniform look for call-to-actions and navigation. Since they are responsive by default, they adjust to different screen sizes and devices, making them essential for mobile-friendly websites.

Buttons Code Examples


<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Buttons Example</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <!-- Basic Button Styles -->
      <h2>Basic Button Styles</h2>
      <div class="mb-3">
          <button type="button" class="btn btn-primary btn-lg w-100 mb-2">Primary</button>
          <button type="button" class="btn btn-secondary btn-lg w-100 mb-2">Secondary</button>
          <button type="button" class="btn btn-success btn-lg w-100 mb-2">Success</button>
          <button type="button" class="btn btn-danger btn-lg w-100 mb-2">Danger</button>
          <button type="button" class="btn btn-warning btn-lg w-100 mb-2">Warning</button>
          <button type="button" class="btn btn-info btn-lg w-100 mb-2">Info</button>
          <button type="button" class="btn btn-light btn-lg w-100 mb-2">Light</button>
          <button type="button" class="btn btn-dark btn-lg w-100 mb-2">Dark</button>
          <button type="button" class="btn btn-link btn-lg w-100 mb-2">Link</button>
      </div>
      
      <!-- Button Sizes -->
      <h2>Button Sizes</h2>
      <div class="mb-3">
          <button type="button" class="btn btn-primary btn-lg w-100 mb-2">Large Button</button>
          <button type="button" class="btn btn-primary btn-sm w-100 mb-2">Small Button</button>
      </div>
      
      <!-- Block-Level Button -->
      <h2>Block-Level Button (Full-width)</h2>
      <div class="mb-3">
          <button type="button" class="btn btn-success btn-lg w-100 mb-2">Block-Level Button</button>
      </div>
      
      <!-- Outline Buttons -->
      <h2>Outline Buttons</h2>
      <div class="mb-3">
          <button type="button" class="btn btn-outline-primary btn-lg w-100 mb-2">Primary</button>
          <button type="button" class="btn btn-outline-secondary btn-lg w-100 mb-2">Secondary</button>
          <button type="button" class="btn btn-outline-success btn-lg w-100 mb-2">Success</button>
          <button type="button" class="btn btn-outline-danger btn-lg w-100 mb-2">Danger</button>
          <button type="button" class="btn btn-outline-warning btn-lg w-100 mb-2">Warning</button>
          <button type="button" class="btn btn-outline-info btn-lg w-100 mb-2">Info</button>
          <button type="button" class="btn btn-outline-dark btn-lg w-100 mb-2">Dark</button>
      </div>
      
      <!-- Vertical Button Group -->
      <h2 class="mt-5">Vertical Button Group</h2>
      <div class="btn-group-vertical w-100">
          <button type="button" class="btn btn-outline-primary btn-lg mb-2">Button 1</button>
          <button type="button" class="btn btn-outline-primary btn-lg mb-2">Button 2</button>
          <button type="button" class="btn btn-outline-primary btn-lg mb-2">Button 3</button>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
 </html>

Output Example

Basic Button Styles

Button Sizes

Block-Level Button (Full-width)

Outline Buttons

Vertical Button Group

« Previous Next »