Utilizor
HomeBootstrap 5 BasicsBS5 Buttons

BBS5 Buttons

Learn how to style buttons in Bootstrap 5.

BS5 Buttons

Bootstrap 5 provides different styles of buttons:

  • .btn - Basic button
  • .btn-primary, .btn-secondary, .btn-success, etc. - Contextual buttons
  • .btn-link - Makes a button look like a link

Button Outline

Bootstrap 5 also provides eight outline colored buttons: .btn-outline-primary, .btn-outline-secondary, etc.

Button Sizes

Use .btn-lg for large buttons and .btn-sm for small buttons.

Block Level Buttons

To create a block level button that spans the entire width of the parent element, use the .d-grid "gap" helper div.

Examples

Button Styles

html/css

Various button styles.

<button type="button" class="btn">Basic</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-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Outline Buttons

html/css

Buttons with outline styles.

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

Block Buttons

html/css

Button spanning full width.

<div class="d-grid gap-2">
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>

Test Your Knowledge

1. Which class makes a button large?

2. Which class creates an outlined button?