Button Types and Sizes in Bootstrap

Bootstrap provides a wide range of button styles, sizes, and states to create buttons that are both functional and visually appealing. Buttons are one of the most essential components in any web project, and Bootstrap offers predefined classes to style buttons easily.

Button Types (Variants)

Bootstrap offers several button variants that are styled using contextual classes. Each variant applies different colors and effects to buttons.

1. Primary Button (.btn-primary)

The primary button represents the main action on a page, usually with a prominent, attention-grabbing color.

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

2. Secondary Button (.btn-secondary)

The secondary button is often used for actions of lesser importance than the primary button.

<button type="button" class="btn btn-secondary">Secondary</button>

3. Success Button (.btn-success)

This button is typically used for actions that indicate success or positive outcomes.

<button type="button" class="btn btn-success">Success</button>

4. Danger Button (.btn-danger)

The danger button indicates potentially destructive actions, like deleting content or canceling an operation.

<button type="button" class="btn btn-danger">Danger</button>

5. Warning Button (.btn-warning)

This button is often used to draw attention to actions that might require caution.

<button type="button" class="btn btn-warning">Warning</button>

6. Info Button (.btn-info)

The info button can be used to indicate informational or neutral actions.

<button type="button" class="btn btn-info">Info</button>

7. Light Button (.btn-light)

A light button is often used in dark backgrounds or minimalistic interfaces.

<button type="button" class="btn btn-light">Light</button>

8. Dark Button (.btn-dark)

The dark button is usually used on light backgrounds to contrast against them.

<button type="button" class="btn btn-dark">Dark</button>

9. Link Button (.btn-link)

The link button looks like a hyperlink but behaves like a button. It’s used when you want to give a button-like functionality to a text link.

<button type="button" class="btn btn-link">Link</button>

Outline Buttons

In addition to solid-colored buttons, Bootstrap offers outline buttons using .btn-outline-* classes. These buttons have a transparent background with colored borders.

Example of 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>

• Outline buttons are typically used for secondary actions or where a less bold appearance is needed.

Button Sizes

Bootstrap allows you to change the size of buttons using specific classes. There are three main sizes for buttons: large, small, and the default size.

1. Large Button (.btn-lg)

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

• .btn-lg: Increases the size of the button to make it more prominent.

2. Small Button (.btn-sm)

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

• .btn-sm: Decreases the size of the button, making it smaller and more compact.

3. Default Size

If no size class is added, the button will use the default size.

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

Block-Level Buttons

To make a button span the entire width of its parent container, you can use the .btn-block class (or for Bootstrap 5 and above, use .d-block w-100).

Example of a block-level button:

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

• Block buttons are typically used for full-width buttons on mobile devices or where you want a button to be 100% of the width of the container.

Button States

Bootstrap provides several states for buttons to indicate different interactive states.

1. Active Button

Buttons can have an active state, indicating they are currently pressed or toggled.

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

• .active: Adds an active (pressed) appearance to the button.

2. Disabled Button

To disable a button, you can use the disabled attribute or add the .disabled class.

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

• disabled attribute: Disables the button so it is no longer clickable.
• .disabled class: Visually disables a button, but the button is still focusable.

Button Groups

Bootstrap allows buttons to be grouped together using .btn-group. Button groups are useful for grouping related actions or options together.

Example of a button group:

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

• .btn-group: Groups buttons together in a single line.

Button Tags

While buttons are usually created using <button>, Bootstrap allows you to apply button styles to other elements like links (<a>) or input elements (<input>).

Example using <a> tag:

<a href="#" class="btn btn-success">Link Button</a>

Example using <input> tag:

<input type="button" class="btn btn-info" value="Input Button">

Icon Buttons

You can easily create buttons with icons using font icons such as Font Awesome or Bootstrap Icons alongside button text.

Example of icon button:

<button type="button" class="btn btn-warning">
  <i class="bi bi-alarm"></i> Alarm Button
</button>

• <i> tag: Used to add an icon inside the button.

Summary of Button Types and Sizes in Bootstrap:

• Button Types (Variants): Includes primary, secondary, success, danger, warning, info, light, dark, and link buttons.
• Outline Buttons: Use .btn-outline-* classes to create buttons with transparent backgrounds and colored borders.
• Button Sizes: Use .btn-lg for large buttons, .btn-sm for small buttons, or omit size classes for default buttons.
• Block-Level Buttons: Use .btn-block (or .d-block w-100 in Bootstrap 5+) to make a button full-width.
• Button States: Include .active for active buttons and the disabled attribute or .disabled class for disabled buttons.
• Button Groups: Use .btn-group to group multiple buttons together in a single line.