Getting Started with Bootstrap 5 Helpers

0
20

BootstrapSam Norton • March 29, 2021 • 9 minutes READ

Bootstrap is one of the most popular frameworks for building websites and applications. It enables you as a developer to use the same layout configuration across your design, with predefined classes and themes provided by the framework. With bootstrap, you can speed up your development while maintaining the coherence of the elements used.

Bootstrap includes a number of helper classes for a certain purpose. Helpers are bootstrap classes that make certain customization as quickly as possible. These classes are built to offer a single purpose and reduce CSS frequency of repeated rules. Bootstrap comes with good CSS structure and the framework was established to promote best coding practices with the concept of DRY (Don’t Repeat Yourself) and naming convention or methodology quite practically similar to BEM (Block Element Modifier) and OOCSS (Object Oriented CSS) in principle, making your CSS code more maintainable. The end goal of bootstrap is to always increase the pace of development as much as possible without completely reinventing the wheel.

In this tutorial, you will learn what the existing predefined Bootstrap 5 helper classes are and how to use them in certain situations. Bootstrap offers tons of them with the same objective. You might have already used some of them in the past unknowingly. By the end of this tutorial, you will be able to quickly handle particular component customization through built in helper classes provided by bootstrap.

Bootstrap 5 Helpers

Float & Clearfix

Bootstrap 5 contains built-in helpful classes to make an element float. By simply adding the .float-start or .float-end class in a div, you can make your elements float left (start) or right (end), accordingly. Of course, there are other responsive floats that exist that you can use for each value based on the current viewport size. Keep in mind though that both classes apply the !important modifier to avoid specificity issues.

Here are all the support classes for float:

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none

To fully understand what the use of a clearfix is, let’s have a basic example of floated elements.

Online Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

FLOATED LEFT ELEMENT
FLOATED RIGHT ELEMENT

As you can see on the markup above, we have a

tag with a class .wrapper and inside it we have another two

tags with class .float-start and .float-end which will basically float the elements on both left (start) and right (end).

With some custom CSS added for demonstration, the result in the browser should look like this:

As you can see, without the clearfix the wrapping

tag would not span around the two

tags which would cause a broken layout.

Using the same markup above, let’s try to add a .clearfix class inside our .wrapper

tag:

FLOATED LEFT ELEMENT
FLOATED RIGHT ELEMENT

With .clearfix class added, the result in the browser should look like this:

Float & Clearfix

Clearfix is a way to easily clear the floating of an element related to its child element within a container and without any additional markup. The Bootstrap 5 columns are all floated left, and the parent row has a clearfix. This allows every column to appear right next to each other, and the row does not overlap with other rows.

Colored Links

Hyperlinks or links are one of the essential components of the web. It allows you to click/tap a link and navigate from one web page to another which is a definite way to implement reference mechanisms from one source to another related source.

Bootstrap 5 offers a way to style links using its colored links helper classes through its extensive default theme colors that theme its styles and components without worrying about adding extra CSS or making use of pseudo-classes to style link states.

In order to take advantage on colored links feature, you need to remember this class syntax .link-*. The “*” represents the supported theme colors utilized in various states or situations (e.g primary, secondary etc.). Compared with .text-* classes, colored links helper classes have a :hover and :focus state.

The following are list of supported colored links classes:

  • .link-primary
  • .link-secondary
  • .link-success
  • .link-danger
  • .link-warning
  • .link-info
  • .link-light
  • .link-dark

Let’s see how all these classes’ works. Check out the markup below.

Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link

With some custom CSS added for demonstration, the result in the browser should look like this:

Colored Links

As you can see on the image above, the color of the links varies according to the theme color class setup to .link-* class. Additionally, if you hover your mouse or click on each of the links you’ll see a nice hover and focus state color.

Ratio

Bootstrap 5 also allows you to make your external content elements such

Let’s go over each code to fully understand this:

On the first

tag, we used both class .ratio and .ratio-1×1 as our wrapping element to antag which contains a video. This will produce an aspect ratio with equal width and height similar to a square shape.
On the second

tag, we used both class .ratio and .ratio-4×3 as our wrapping element to an