Bootstrap - Buttons Demo

Ethan D. - June 1, 2024

Bootstrap Buttons

Bootstrap buttons are pre-styled button elements that add interactive and appealing buttons to your web pages. These buttons come with options and styles, letting you create consistent and professional-looking user interfaces.

Bootstrap offers button types for different purposes and design preferences. The framework includes basic buttons in colors, such as primary, secondary, success, danger, warning, info, light, and dark. These button styles indicate the importance or purpose of each button.

Example: Basic Bootstrap buttons

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Bootstrap provides outline buttons, which have a transparent background and a colored border, offering an alternative to solid-colored buttons.

Example: Bootstrap outline buttons

<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

The framework also supports button sizes, including large, default, and small, giving you control over the visual hierarchy of your buttons.

Example: Bootstrap button sizes

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

Bootstrap lets you create button groups and toolbars, letting you combine related buttons together for an organized layout.

Example: Bootstrap button group

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

With the built-in dropdown functionality, you can add dropdown menus to your buttons, providing options or actions for users to select.

Example: Bootstrap button dropdown

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Bootstrap's button classes and styles offer a way to improve the usability and visual appeal of your web interfaces.

Basic Buttons

Bootstrap has button classes that let you make buttons with colors and styles. You can use these classes on <button>, <a>, or <input> elements to make them look like buttons.

To make a basic button in Bootstrap, use the btn class with a class that sets the button's color. Here are buttons with color variants:

Example

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Each button has the btn class and a class that sets its color. The color classes are:

btn-primary: The main or primary action.
btn-secondary: A less important or secondary action.
btn-success: A successful or positive action.
btn-danger: A dangerous or negative action.
btn-warning: A warning or cautionary action.
btn-info: An informational action or message.
btn-light: A light-colored button.
btn-dark: A dark-colored button.

By using these classes, you can make buttons with colors and meanings without writing CSS.

The btn class is needed for all Bootstrap buttons. It sets the basic style and behavior. The color classes are added to change the button's look based on its use or context.

With these basic button classes, you can make buttons that look good and are the same across your Bootstrap website or application.

Button Sizes

Bootstrap has size modifier classes that let you make buttons of different sizes. These classes can be used with the base btn class to control the size of your buttons, making them large, default, or small.

To make buttons of different sizes, you can add these classes to your button elements:

Class	Description
`btn-lg`	Makes a large button
`btn-sm`	Makes a small button
`btn-block`	Makes a block-level button that spans the full width of its parent container

Example: Buttons with different sizes

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button> 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-block">Block-level button</button>

A large button made by adding the btn-lg class.
A default-sized button with no extra size class.
A small button made by adding the btn-sm class.
A block-level button made by adding the btn-block class, which makes the button span the full width of its parent container.

Using these size modifier classes, you can change the size of your buttons to fit your design needs. The btn-lg class increases the padding and font size of the button, making it larger than the default size. The btn-sm class reduces the padding and font size, making a smaller button.

The btn-block class is useful when you want a button to take up the full width of its parent container. This is often used for call-to-action buttons or buttons that span across the entire width of a form or section.

You can combine these size modifier classes with the color classes talked about earlier to make buttons of different sizes and colors. For example, you can have a large primary button by using both btn-primary and btn-lg classes together.

By using the button size classes provided by Bootstrap, you can make a visual hierarchy and draw attention to important actions or buttons on your web page.

Outline Buttons

Bootstrap has outline buttons with a transparent background and a colored border. These buttons offer a different look than solid-colored buttons and can be useful in some designs.

To create an outline button, use the btn class with the btn-outline-* class, where * is the button color variant.

Example: Outline buttons with different color variants

<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

The btn-outline-* classes use the same color names as the solid-colored buttons (primary, secondary, success, danger, warning, info, light, and dark). But instead of using a solid background color, these classes add a colored border and text while keeping the background transparent.

Outline buttons are useful when you want to give a more subtle or secondary action that doesn't need the visual prominence of a solid-colored button. They can be used to create a sense of hierarchy or to group related actions together while still showing the difference between main and secondary actions.

Some situations where outline buttons can be useful include:

Situation	Explanation
Secondary actions	Use outline buttons for less important or less used actions, saving solid-colored buttons for main actions.
Grouped buttons	When grouping buttons together, you can use outline buttons to create visual separation between the main action and other options.
Contextual actions	Outline buttons can be used to give context-specific actions that relate to a specific section or component of your web page.
Emphasis on content	When you want to draw attention to the content rather than the button itself, outline buttons can be a good choice as they are less visually distracting.

Remember that while outline buttons give a different look, they should still be used carefully and in a way that matches your overall design and user experience goals. Using button styles consistently throughout your website or application helps create a cohesive and intuitive user interface.

Button States

Bootstrap has classes to represent different button states, such as active and disabled. These classes change the look and function of buttons to give users visual feedback about the button's current state or to prevent interaction with the button.

The two main button state classes in Bootstrap are:

active: Represents a button that is currently being pressed or is in an active state.
disabled: Represents a button that is disabled and cannot be interacted with.

To apply these states to a button, add the class to the button element.

Example: Button states

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-secondary active">Active Secondary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<button type="button" class="btn btn-secondary" disabled>Disabled Secondary</button>

When a button has the active class, it appears pressed or selected. This is useful for showing the current state of a button, such as a toggle button that has been turned on or a button in a group that has been selected.

Buttons with the disabled class have a faded look and do not respond to user interactions like hovering or clicking. This state is used when you want to prevent users from interacting with a button, such as when a form is being submitted or when an action is not available due to certain conditions.

Adding the disabled class to a <button> element will change its look and prevent it from being clicked or interacted with. However, if you add the disabled class to an <a> element styled as a button, it will only change the look and not prevent the default link behavior. To disable an <a> element button, you should also add the tabindex="-1" attribute and remove the href attribute.

Example: Disabled link button

<a class="btn btn-primary disabled" role="button" aria-disabled="true" tabindex="-1">Disabled Link Button</a>

Button states are an important part of user interface design as they provide visual cues and control over the interactivity of buttons. By using the active and disabled classes correctly, you can create a more intuitive and responsive user experience in your Bootstrap-based projects.

Button Groups

Bootstrap lets you group related buttons into button groups using the btn-group class. Button groups are useful when you have a set of buttons that perform similar actions or when you want to present a set of toggle buttons.

To create a horizontal button group, wrap a series of buttons with the btn class inside a <div> element with the btn-group class.

Example: Horizontal Button Group

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

The btn-group class styles the buttons to appear connected, with no space between them. The role="group" and aria-label attributes are added for accessibility, helping screen readers understand the purpose of the button group.

You can also create vertical button groups by adding the btn-group-vertical class to the wrapper <div> instead of btn-group.

Example: Vertical Button Group

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Top</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Bottom</button>
</div>

Vertical button groups stack the buttons vertically, which can be useful when you have limited horizontal space or when the related actions are better represented in a vertical layout.

Button groups are commonly used for:

Purpose	Description
Related actions	Group buttons that perform similar or related actions, such as "Bold", "Italic", and "Underline" in a text editor.
Toggle buttons	Create a set of toggle buttons where only one button can be active at a time, like a set of radio buttons.
Toolbar	Combine multiple button groups to create a more complex component, such as a formatting toolbar in a word processor.

Example: Button Group as Radio Buttons

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

The btn-check class is used on the <input> elements to hide the default radio buttons, and the labels are styled as buttons using the btn and btn-outline-primary classes.

By using button groups, you can create organized and consistent layouts for related buttons, making your user interface more intuitive and user-friendly.

Dropdown Buttons

Bootstrap lets you create dropdown buttons that toggle a dropdown menu when clicked. Dropdown buttons are helpful when you want to give users a list of actions or options related to a button.

To create a dropdown button, combine the btn class with the dropdown class on a <div> element that wraps the button and the dropdown menu.

Example: Single Button Dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

The <button> element has the btn and btn-secondary classes to style it as a button, and the dropdown-toggle class to show that it toggles a dropdown menu. The data-bs-toggle="dropdown" attribute triggers the dropdown functionality.

The dropdown menu is created using a <ul> element with the dropdown-menu class. Each menu item is an <li> element containing an <a> element with the dropdown-item class.

You can also create a split button dropdown, where the button is split into two parts: one that acts as a regular button and another that toggles the dropdown menu.

Example: Split Button Dropdown

<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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

To create a split button dropdown, wrap the buttons in a <div> with the btn-group class. The first button is a regular button, while the second button has the dropdown-toggle and dropdown-toggle-split classes to create the dropdown toggle. The <span> element with the visually-hidden class provides an accessible label for the dropdown toggle.

You can customize the look and behavior of dropdown menus by adding classes or styles.

Example: Right-Aligned Dropdown Menu

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Dropdown buttons let you group related actions or options together and show them to users in a compact and organized way. By using the dropdown class and its related classes, you can easily create working and customizable dropdown buttons in your Bootstrap projects.

Button Toolbars

Bootstrap lets you create button toolbars, which are containers that group multiple button groups, form controls, and other elements together. Button toolbars are helpful for creating more complex components, such as rich text editors or custom controls.

To create a button toolbar, use the btn-toolbar class on a <div> element that wraps the button groups and other elements you want to include in the toolbar.

Button Toolbar Example

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

The btn-toolbar class aligns the button groups and provides proper spacing between them. Each button group is wrapped in a <div> with the btn-group class, and the me-2 class is used to add some space between the groups.

You can also combine button groups with form controls, such as input groups or selects, within a button toolbar.

Example: Combining Button Groups and Form Controls

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

In the first example, a button group and an input group are combined within a button toolbar. The mb-3 class is added to the toolbar to provide some bottom margin.

The second example shows how you can use the justify-content-between class to align the button group and input group on opposite ends of the toolbar.

Button toolbars are helpful when you need to create more complex user interfaces that involve multiple groups of buttons and form controls. By grouping related elements together in a toolbar, you can provide a more organized and intuitive experience for your users.

Some common uses for button toolbars:

Use	Description
Text editors	Combine button groups for text formatting options (bold, italic, underline) with input groups for font selection or size.
Custom controls	Group related buttons and form controls to create custom control interfaces, such as a color picker or a date range selector.
Pagination	Use button groups for page numbers and input groups for "Go to page" functionality within a pagination toolbar.