Bootstrap - Buttons

Button Styles

Bootstrap has built-in button styles that you can use to make buttons in your web pages. These styles include default button styles, color classes, size classes, block level buttons, active state buttons, and disabled state buttons.

The default button style in Bootstrap is a simple design that works well for most purposes. To create a default button, add the btn class to a <button> or <a> element.

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

Bootstrap also has color classes that you can use to change the look of your buttons. These classes include btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, and btn-dark. To use one of these color classes, add it to the element along with the btn class.

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

Bootstrap has size classes that you can use to change the size of your buttons. These classes include btn-lg for large buttons, btn-sm for small buttons, and btn-block for block level buttons that span the full width of their parent element. To use one of these size classes, add it to the element along with the btn class.

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

Block level buttons are useful when you want a button to fill the entire width of its parent element. To create a block level button, add the btn-block class to the element along with the btn class.

<button type="button" class="btn btn-block">Block Level Button</button>

Bootstrap lets you create buttons that appear in an active or disabled state. To create an active state button, add the active class to the element along with the btn class.

<button type="button" class="btn active">Active Button</button>

To create a disabled state button, add the disabled attribute to the element.

<button type="button" class="btn" disabled>Disabled Button</button>

By using these button styles and classes, you can create buttons that look good and are easy for users to use. Try different combinations of color, size, and state classes to find the best button style for your project.

Button Groups

Button groups in Bootstrap group a series of buttons together on a single line. This is useful when you have related buttons that you want to display together, such as a group of buttons for editing or formatting text.

To create a basic button group, wrap a series of buttons with the btn class in an element with the btn-group class. This will display the buttons next to each other on a single line.

<div class="btn-group">
  <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>

Button groups can also have different sizes, just like individual buttons. To create a button group with a specific size, add the btn-group-lg class for large button groups or the btn-group-sm class for small button groups.

<div class="btn-group btn-group-lg">
  <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>

<div class="btn-group btn-group-sm">
  <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>

Vertical button groups are another option in Bootstrap. To create a vertical button group, add the btn-group-vertical class to the element that wraps the buttons.

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

Justified button groups take up the full width of their parent element and distribute the available space evenly between the buttons. To create a justified button group, add the btn-group-justified class to the element that wraps the buttons.

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-secondary">Left</a>
  <a href="#" class="btn btn-secondary">Middle</a>
  <a href="#" class="btn btn-secondary">Right</a>
</div>

You can also nest button groups inside other button groups to create more complex layouts. To do this, simply place a button group inside another button group.

<div class="btn-group">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Button Dropdowns

Button dropdowns in Bootstrap are buttons that toggle dropdown menus for selecting options. They provide a way to group related actions or options within a dropdown menu attached to a button.

To create a single button dropdown, wrap a button with the classes btn and dropdown-toggle inside an element with the class dropdown. Then, add a <div> element with the class dropdown-menu next to the button to hold the dropdown menu items.

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </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>

Split button dropdowns separate the button action from the dropdown toggle. To create a split button dropdown, wrap two buttons with the classes btn and dropdown-toggle inside an element with the class btn-group. The first button is used for the main action, while the second button is used for toggling the dropdown menu.

<div class="btn-group">
  <button type="button" class="btn btn-secondary">Action</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <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>

Dropup variation is similar to dropdown, but it opens the menu upwards instead of downwards. To create a dropup, replace the dropdown class with dropup on the element that wraps the button and menu.

<div class="dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
    Dropup button
  </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>

Bootstrap provides options for changing the appearance and behavior of dropdown menus. You can add headers, dividers, and active items to dropdown menus using the dropdown-header, dropdown-divider, and active classes.

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <h6 class="dropdown-header">Dropdown header</h6>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item active" href="#">Active action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Button dropdowns provide a simple way to group related actions or options within a dropdown menu. By using the dropdown options and variations, you can create dropdown menus that fit the needs of your project.

Button Plugins

Bootstrap gives you several button plugins that extend the functionality of buttons. These plugins let you create buttons with loading states, toggle states, and checkbox/radio behavior.

The button plugin is included in the core Bootstrap JavaScript file. To use the button plugin, you first need to include the Bootstrap JavaScript file in your project. You can then use data attributes or JavaScript to initialize the plugin and control the behavior of buttons.

One useful feature of the button plugin is the ability to create buttons with loading states. Loading state buttons show a loading indicator while an action is being performed, such as submitting a form or making an API request. To create a loading state button, add the data-loading-text attribute to the button element with the text you want to display while loading.

<button type="button" class="btn btn-primary" data-loading-text="Loading...">
  Click me
</button>

Another feature of the button plugin is the ability to create toggle state buttons. Toggle state buttons can be clicked to toggle between different states, such as on/off or yes/no. To create a toggle state button, add the data-toggle="button" attribute to the button element.

<button type="button" class="btn btn-primary" data-toggle="button">
  Toggle me
</button>

The button plugin also lets you create checkbox and radio buttons. Checkbox buttons let you select multiple options, while radio buttons let you select a single option from a group. To create checkbox buttons, add the data-toggle="buttons" attribute to a btn-group element and add the btn-checkbox class to each button element. To create radio buttons, use the data-toggle="buttons" attribute and the btn-radio class instead.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Option 1
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox"> Option 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Option 1
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Customizing Buttons

Bootstrap has default button styles that you can use, but you may want to change these styles to better fit your project's design. There are a few ways you can customize buttons in Bootstrap:

One way to customize buttons is by overriding the default button styles. You can do this by writing your own CSS styles that target the button classes.

.btn-primary {
  background-color: #ff0000;
  color: #ffffff;
}

This would change the primary button's background color to red and its text color to white.

Another way to customize buttons is by creating your own custom button styles. You can do this by defining a new class name and styling it with CSS.

.btn-custom {
  background-color: #00ff00;
  color: #000000;
  border-radius: 20px;
  padding: 10px 20px;
}

This would create a new button style with a green background, black text, rounded corners, and extra padding.

You can also combine button classes to create new styles.

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

If you want more control over your button styles, you can use the button mixins provided by Bootstrap. Mixins are reusable pieces of CSS code that you can include in your own styles. Bootstrap provides mixins for button variants, sizes, and states.

.btn-custom {
  @include button-variant(#ff0000, #000000, #000000);
}