Global Typography Defaults

Boootstrap 5 establishes a base font-size of 16px with a line-height of 1.5. The default font stack applies sans-serif families, and paragraph (<p>) elements receive a bottom margin of 1rem (16px) with a top margin of 0.

Headings and Heading Classes

Standard HTML headings (h1 through h6) are styled distinctively. Alternatively, you can apply the corresponding .h1 to .h6 classes to inline or non-heading elements to match their visual wieght.

<div class="container">
  <h1>Main Page Title</h1>
  <p class="h2">Section Subtitle</p>
</div>

Display Headings

For larger, more prominent headings outside the standard hierarchy, Bootstrap provides Display classes: .display-1 through .display-4. These are ideal for hero sections.

<div class="content-wrapper">
  <h1 class="display-2">Featured Banner</h1>
</div>

Secondary Text

Use the <small> tag or the .small class to create lighter, smaller subtext within headings.

<h1>Product Name <small>Version 2.0</small></h1>

Highlighted Text

The <mark> element or the .mark class applies a yellow background and slight padding to emphasize text.

<p>Ensure you <mark>review the terms</mark> carefully.</p>

Abbreviations

Styling for <abbr> adds a dotted underline to indicate a acronym or abbreviation, with the full title appearing on hover.

<p>The <abbr title="HyperText Markup Language">HTML</abbr> standard is widely used.</p>

Blockquotes

Wrap quoted content in a <blockquote> element and add the .blockquote class. Use .blockquote-footer for source attribution.

<blockquote class="blockquote">
  <p>Design is not just what it looks like. Design is how it works.</p>
  <footer class="blockquote-footer">Steve Jobs in <cite title="Source">Interview</cite></footer>
</blockquote>

Additional Typography Utilities

Class	Purpose
.lead	Makes a paragraph stand out as the primary content.
.small	Reduces text size to 85% of the parent element.
.text-start	Aligns text to the left.
.text-center	Centers text horizontally.
.text-end	Aligns text to the right.
.text-nowrap	Prevents text from wrapping.
.text-lowercase	Transforms text to lowercase.
.text-uppercase	Transforms text to uppercase.

Contextual Text Colors

Apply semantic colors using classes like .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-muted, .text-secondary, .text-dark, .text-body, and .text-light. These also work on anchor (<a>) tags, providing hover states.

<p class="text-success">Profile updated successfully.</p>
<a href="#" class="text-danger">Delete account</a>

Opacity Variants

For 50% opacity on text, use .text-black-50 or .text-white-50.

<p class="text-black-50">Dimmed secondary info.</p>
<p class="text-white-50 bg-dark">Light dimmed text on a dark background.</p>

Background Colors

Contextual background classes (.bg-primary, .bg-success, etc.) alter the element's background. Combine them with text color classes to maintain readability.

<div class="bg-warning text-dark">System maintenance scheduled.</div>
<div class="bg-info text-white">New feature released.</div>

Image Styling

Rounded corners can be applied via .rounded, while .rounded-circle makes an image elliptical. The .img-thumbnail class adds a bordered frame.

<img src="profile.jpg" class="rounded" alt="User profile">
<img src="avatar.png" class="rounded-circle" alt="User avatar">
<img src="snapshot.gif" class="img-thumbnail" alt="Preview">

Image Alignment

Float images left or right with .float-start and .float-end. To center an image, combine .mx-auto (horizontal margins) with .d-block.

<img src="hero.jpg" class="float-end" alt="Hero">
<img src="banner.svg" class="mx-auto d-block" alt="Center Banner">

Responsive Images

The .img-fluid class restricts the image's maximum width to the parent container (max-width: 100%; and height: auto;).

<img src="landscape.png" class="img-fluid" alt="Responsive Landscape">

Button Styles

Bootstrap offers multiple predefined button styles via contextual classes like .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light, and .btn-link.

<button type="button" class="btn btn-success">Confirm</button>
<button type="button" class="btn btn-danger">Remove</button>
<button type="button" class="btn btn-link">Learn More</button>

These classes can be applied to <button>, <a> (with role="button"), and <input> elements.

<a href="/action" class="btn btn-info" role="button">Trigger Action</a>
<input type="submit" class="btn btn-primary" value="Save Changes">

Outline Buttons

Create bordered buttons without solid backgrounds using .btn-outline-* classes. Hovering fills the background.

<button type="button" class="btn btn-outline-warning">Acknowledge</button>
<button type="button" class="btn btn-outline-dark">Details</button>

Button Sizes

Scale buttons larger with .btn-lg or smaller with .btn-sm.

<button type="button" class="btn btn-primary btn-lg">Large Action</button>
<button type="button" class="btn btn-secondary btn-sm">Small Link</button>

Block-Level Buttons

To create full-width buttons, wrap them in a parent container using .d-grid. Use .gap-* to add spacing between stacked buttons.

<div class="d-grid gap-2">
  <button type="button" class="btn btn-primary">Full-Width Save</button>
  <button type="button" class="btn btn-secondary">Full-Width Cancel</button>
</div>

Button States

Make a button appear pressed by adding the .active class. Disable interaction by adding the disabled attribute to <button> tags, or the .disabled class to <a> tags.

<button type="button" class="btn btn-success active">Selected</button>
<button type="button" class="btn btn-primary" disabled>Unavailable</button>
<a href="#" class="btn btn-outline-info disabled">Disabled Link</a>

Loading Spinners

Indicate ongoing processing by inserting a spinner element inside a disabled button.

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span> Processing...
</button>
<button class="btn btn-secondary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span> Loading...
</button>

Button Groups

Group a series of buttons together on a single line using the .btn-group class on a wrapper <div>. Adjust the overall size with .btn-group-lg or .btn-group-sm.

<div class="btn-group">
  <button type="button" class="btn btn-dark">Left</button>
  <button type="button" class="btn btn-dark">Center</button>
  <button type="button" class="btn btn-dark">Right</button>
</div>

Vertical and Nested Button Groups

Stack buttons vertically using .btn-group-vertical. You can also nest button groups to include dropdown menus within the alignment.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-info">Home</button>
  <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">Settings</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Profile</a></li>
      <li><a class="dropdown-item" href="#">Security</a></li>
    </ul>
  </div>
</div>

Placing multiple button groups side by side creates toolbar-like interfaces.

<div class="btn-group">
  <button type="button" class="btn btn-outline-secondary">Copy</button>
  <button type="button" class="btn btn-outline-secondary">Paste</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-outline-secondary">Undo</button>
</div>