Bootstrap 5 components

by Gisle Hannemyr

This chapter describes the most interesting components and CSS utility classes that comes with Bootstrap 5 and how to use them. It also provides example of alternative classes I use in my themes.

Introduction
Layout
Content
Forms
Components
Helpers
Utilities
Extend
HNM classes
Final word

Introduction

Boostrap 5 comes with a lot of things that that can be reused. To get some ideas about what exists, see the the Examples section in the Bootstrap 5 documentation.

In the left sidebar of the documentation pages, there is an overview that contains these seven sections:

Layout
Content
Forms
Components
Helpers
Utilities
Extend

This chapter contains curated excerpts from this documentation, supplied with some examples and guidance from other sources.

In the Drupal bridge theme Bootstrap5, The Bootstrap 5 files that is distributed with the theme live in in the directory dist/bootstrap/5.1.3/scss/. The version number may be different as the bridge theme gets upgraded.

Layout

Breakpoints

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap. Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.

Default breakpoints
Breakpoint	Class infix	Dimensions
X-Small		<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions- The ranges should provide a strong and consistent foundation to build on for nearly any device.

Bootstrap provide classes to set the visibility of an item. This table shows what classes to use to use to show a different item on three different device sizes:

Bootstrap classes to set visibility
Device	Visibility	Classes
phone	below md	`d-md-none`
tablet	only on md	`d-none d-md-block d-lg-none`
pc	on and above lg	`d-none d-lg-block`

The example below shows how to flip between two different sizes of the same image. The first (img-lg.png) will be visible on screens that are of size large and above. The second (img-md.png) will be visible on screens that are smaller than this.

<img class="d-none d-lg-block src="…/img-lg.png" />
<img class="d-lg-none src="…/img-md.png" />

The example below shows how to set up two alternate versions of the page for different viewport sizes. The first row will be visible on screens that are of size medium and above. It will show a smaller version of the image aligned right. The second row will be visible on screens that are smaller than this. It will show a larger version of the image aligned centered above the text.

<div class="container">
  <div class="row d-none d-md-block">
    <div><img data-align="right"  src="…" data-image-style="h325" width="274" height="325" /></div>
    <div>Large screen version</div>
  </div>
  <div class="row d-md-none">
    <div><img data-align="center" src="…" data-image-style="w375" width="375" height="445" /></div>
    <div>Small screen version</div>
  </div>
</div>

[TBA]

Containers

Containers are the most basic layout element of Bootstrap that contain, pad, and align your content within a given device or viewport. They are required when using our default grid system.

Bootstrap comes with three different containers:

container, which sets a max-width at each responsive breakpoint.
container-fluid, which is width: 100% at all breakpoints.
container-xx, which is width: 100% until the specified breakpoint.

The placeholder "xx" in the last one is the clas infix defined for Breakpoints above.

GBS: Containers.

[TBA]

Grid system

GBS: Grid system.

The grid system uses a series of containers, rows, and columns to layout and align content. It is built with flexbox and is fully responsive.

For example, the markup below creates two equal-width columns across all devices and viewports using the predefined grid class .col. Those columns are centered in the page with the parent .container.

<div class="container">
  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
  </div>
</div>

The grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

To use the grid system on viewports larger than small, use:

<div class="container">
  <div class="row">
    <div class="col-sm">
      Column 1
    </div>
    <div class="col-sm">
      Column 2
    </div>
  </div>
</div>

Columns

GBS: Columns.

Columns provide options for alignment, ordering, and offsetting.

[TBA]

Ordering

Bootstrap 5 let one combine order classes with breakpoints to have different orders at different breakpinsts, see GBS: Order classes.

This markup will show "Sidebar first", "Main content", "Sidebar second" from left to right on large screens, while it will show "Sidebar second", "Main content", "Sidebar first" stacked from top to bottom on smaller screens:

≶div class="order-3 order-lg-1">
  {{ page.sidebar_first }}
≶/div>
≶div class="order-2 order-lg-2">
  {{ page.content }}
≶/div>
≶div class="order-1 order-lg-3">
  {{ page.sidebar_second }}
≶/div>

Backround DOF: How to display second sidebar on top on mobile devices?

Content

Images

GBS: Images.

[TBA]

Forms

[TBA]

Components

A component classes encapsulates all the declarations required to style an element within the context of a component (e.g. a button).

Most documentation pages ends with a list of Sass-variables used by the components. These may be overridden in the _variables_bootstrap.scss in your subtheme.

Accordion

This component is used to create vertically collapsing accordion panerls.

Two identifiers mist be unique for each item, in the first item in the first example on GBS, they are:

headingOne
collapseOne

To start with all items closed, you need to apply the following changes to first accordion item:

The default for the first accordion item is:

<button class="accordion-button" type="button" data-bs-toggle="collapse"
  data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
  aria-controls="panelsStayOpen-collapseOne">
  Accordion Item #1
</button>

Add the class collapsed to the button. Tell aria it is not expanded by changing the value of aria-expanded to "false":

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false"
  aria-controls="panelsStayOpen-collapseOne">
  Accordion Item #1
</button>

The body can be hidden as normal by removing show from class="accordion-collapse collapse show":

<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse"
  aria-labelledby="panelsStayOpen-headingOne">
 <div class="accordion-body">
  Body Text
 </div>
</div>

GBS: Accordion, SO: Bootstrap Accordion - start all closed.

Alerts

[TBA]

Badge

[TBA]

Breadcrumb

[TBA]

Buttons

GBS: Buttons.

Button group

[TBA]

Card

Cards provide a flexible and extensible content container with multiple variants and options.

You may use Views Boostrap to show an aggregate of cards:

Install and activate Views Bootstrap (composer require drupal/views_bootstrap) (#3).
Create a View list of content.(#3).
Format items as Bootstrap cards (#3).

GBS: Cards.

Carousel

A slideshow component for cycling through elements – images or slides of text – like a carousel. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

note Carousels are generally not compliant with accessibility standards.

Set a unique id on the <div> with the carousel-class for optional controls, especially if you're using multiple carousels on a single page.

The active class needs to be added to one of the slides otherwise the carousel will not be visible.

<div class="carousel slide" data-bs-ride="carousel" id="UniqueId">
  <div class="carousel-inner">
    <div class="carousel-item active"><img alt="…" class="d-block w-100" src="…" /></div>
    <div class="carousel-item"><img alt="…" class="d-block w-100" src="…" /></div>
    <div class="carousel-item"><img alt="…" class="d-block w-100" src="…" /></div>
  </div>
</div>

To add controls, use the following:

<button class="carousel-control-prev" type="button" data-bs-target="#UniqueId" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#UniqueId" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

The control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element.

To add a carousel indicator, use the following (I got it working once, but not again - this has to do with colours, it shows white on white):

<div class="carousel-indicators">
  <button type="button" data-bs-target="#UniqueId" data-bs-slide-to="0"
    class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#UniqueId" data-bs-slide-to="1"
    aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#UniqueId" data-bs-slide-to="2"
    aria-label="Slide 3"></button>
</div>

$carousel-indicator-active-bg

To remove auto-slide replace data-bs-ride="carousel" with data-bs-interval="false"

<div class="carousel slide" data-bs-ride="carousel" id="UniqueId">
<div class="carousel slide" data-bs-interval="false" id="UniqueId">

Source SO: Remove auto slide.

note The CKediitor breaks carousel markup. Do not use a text format that uses the editor.

GBS: Carousel.

Close button

[TBA]

Collapse

[TBA]

Dropdowns

[TBA]

List group

[TBA]

Modal

[TBA]

Navs & tabs

[TBA]

Navbar

[TBA]

Offcanvas

[TBA]

Pagination

[TBA]

Popovers

[TBA]

Progress

[TBA]

Scrollspy

[TBA]

Spinners

[TBA]

To remove auto-slide, replace data-ride="carousel" with data-bs-interval="false" Source: https://stackoverflow.com/questions/14977392/bootstrap-carousel-remove-auto-slide

Toasts

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They are built with flexbox, so they are easy to align and position.

GBS: Toasts.

Tooltips

[TBA]

GBS: Tooltips.

Helpers

A Bootstrap Helper class is utility class (see below). It is not clear why they are classified as such.

Clearfix

GBS: Clearfix.

<div class="clearfix">&nbsp;</div>
<div class="clearfix">…</div>

Clear floated content within a container.

Coloured links

Coloured links with hover states.

Ratio

Pseudo elements to make an element maintain the aspect ratio.

GBS: Ratios

Position

Set the position of an element (e.g. fixed-top).

Visually hidden

Visually hide elements, but keep them accessible to assistive technologies such as screen readers.

GBS: Visually hidden.

Stretched link

Make any HTML element or Bootstrap component clickable by "stretching" a nested link via CSS.

Text truncation

Truncate long strings of text with an ellipsis.

Utilities

A Utility class applies a single rule or a very simple, universal pattern. They should be as simple and reusable as possible. They are designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development. Example:

<div class="p-3 bg-light text-dark border-secondary rounded">
  Lorem Ipsum Dolor Sit Amet
</div>

This will generate a padded div with a light gray background, black text, a dark gray border, and rounded corners.

David Clark: The Role of Utility Classes in Scalable CSS.

Flex

The flexbox utilities are used to manage layout, alignment, and sizing of grid columns, navigation, components, and more.

To have a row logos equally spaced:

<div class="d-flex justify-content-between">
  <img alt="Logo #1" src="/sites/default/files/unmanaged/logo1.png" />
  <img alt="Logo #2" src="/sites/default/files/unmanaged/logo2.png" />
  <img alt="Logo #3" src="/sites/default/files/unmanaged/logo3.png" />
</div>

note This works best if the images are of equal size (e.g. 100px × 75px) and unmanaged. If the images have unequal, heights the shortest will be stretched to match the height of the tallest.

To only use a flex utility for the medium grid tier and below, ad md to the class:

<div class="d-md-flex justify-content-between">
  <img alt="Logo #1" src="/sites/default/files/unmanaged/logo1.png" />
  <img alt="Logo #2" src="/sites/default/files/unmanaged/logo2.png" />
  <img alt="Logo #3" src="/sites/default/files/unmanaged/logo3.png" />
</div>

To avoid having logos to close on small screens, have a class that adds a spacer. Example:

.hnmlogos {
  margin-left: ($spacer * 0.2);
  margin-right: ($spacer * 0.2);
}

GBS: Flex
MDBootstrap.com: Horizontal alignment

Float

The float-… utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. Bootstrap 5 uses the same viewport breakpoints as the grid system.

note Float utilities have no effect on flex items.

This example shows how to align two text divisionns left and right.

<div class="float-start">Left align</div>
<div class="float-end">Right align</div>

GBS: Float
MDBootstrap.com: Float
StudyTonight.com: Align text

Text

GBS: Text.

Visibility

Control the visibility of elements, without modifying their display, with visibility utilities.

To remove elements from the display, but make them visible to screen readers, use the Visually hidden helper class.

GBS: Visibility.

[TBA]

Extend

[TBA]

HNM classes

My design philosohy is not to redefine Bootstrap 5 classes. Instead I define my own, prefixed with hnm if I am not happy with what is provided by Bootstrap 5.

Blockquote

/* _type.scss */
.blockquote {
  margin-bottom: $spacer;
  font-size: $blockquote-font-size;
}

The default Bootstrap 5 blockquote class uses a font size of 1.25 rem and no indent. To have a more distict blockquote, I define htmlblockquote:

.hnmblockquote {
  font-family: $font-family-serif;
  font-size: 1.1rem;
  margin-left: ($spacer * 0.9);
  border-left: 2px solid $gray-500;
  padding-left: ($spacer * 0.3);
}

Example in theme: HNM Starter Theme.

Final word

[TBA]

Last update: 2021-04-15 [gh].

Bootstrap 5 components

Table of contents

Introduction

Layout

Breakpoints

Containers

Grid system

Columns

Ordering

Content

Images

Forms

Components

Accordion

Alerts

Badge

Breadcrumb

Buttons

Button group

Card

Carousel

Close button

Collapse

Dropdowns

List group

Modal

Navs & tabs

Navbar

Offcanvas

Pagination

Popovers

Progress

Scrollspy

Spinners

Toasts

Tooltips

Helpers

Clearfix

Coloured links

Ratio

Position

Visually hidden

Stretched link

Text truncation

Utilities

Flex

Float

Text

Visibility

Extend

HNM classes

Blockquote

Final word