Utilities — Bootstrap 5: Layout basics

The third way of using Bootstrap styles is utilities. Utilities are a great help when creating layouts, and are most often represented as atomic classes.

An atomic class is a class consisting of a single property and which has a description of the property that the class uses in its name. For example, d-block refers to the display property with the value as block. The overflow-hidden class refers to the overflow property with the value as hidden.

The key advantage of using these classes is speed. To interpret these classes, the browser doesn’t need to handle long selectors with lots of properties inside that need to be applied to elements. However, this is a key part of its disadvantage; atomic classes require you to use many classes within HTML, which can affect its readability.

All utilities in Bootstrap can be roughly divided into two main groups:

Structural utilities. These include classes that affect width/height, display method, indents, and position.
Design Utilities. These include classes affecting color and shadow.

As an example for this lesson, we’ll go through the text color utility. It almost completely covers all possible scenarios of text layout on the page, meaning you don’t have to use separate CSS. The other utilities work according to similar principles. All of them can be found in the official Bootstrap documentation.

One of the features of utilities in Bootstrap is the use of the !important flag inside the CSS code. Although the practice is frowned upon as it violates normal CSS cascading, it has a purpose. Utilities are used to override the current CSS and add a new one. Since you can’t guarantee that custom CSS code will be above utilities, you need to use !important to override styles. This must be taken into account when writing your CSS. If you use the !important, flag inside the custom selector, there’s a chance that the utilities associated with this property won’t work. This would break the standard behavior of the framework. Consequently, the !important flag must only be used when creating custom utilities. Other classes mustn’t use this flag.

Colors

In the lesson about components, we saw that Bootstrap has its own color map that allows classes relating to colors to be generated. The same colors are available for text. The following classes are created after compilation:

<p class="text-primary">Primary</p>
<p class="text-secondary">Secondary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-warning">Warning</p>
<p class="text-info">Info</p>
<p class="text-light">Light</p>
<p class="text-dark">Dark</p>

By changing the $theme-colors array, you can add any custom colors you want:

$theme-colors: (
  "brand": #66bb6a
);

After compilation, a new .text-brand class will be available.

Note that: in addition to adding colors for text, changing $theme-colors will create new classes for other utilities and components, such as .bg-, .border-, alert-* and so on. This will increase the size of the resulting CSS file. If the color isn’t part of your brand and is only needed for some elements, it’s better to add it to the $colors array. After compilation, these colors will be available as global CSS variables.

Creating custom utilities

When you’re designing layouts, there aren’t always enough default utilities. Developers often add the necessary code themselves to CSS files, but this isn’t good practice. Any utility can be created using Bootstrap, which means not deviating from the framework, and accelerating the creation of custom utilities.

Create a utility that allows you to change the cursor type when hovering over an HTML element. To begin with, it’s worth determining which classes will be needed as utility values. Most websites use the pointer cursor. Let’s also create default and none.

We’ll get the following classes:

cursor-pointer
cursor-default
cursor-none

Starting with Bootstrap 5 all utilities are generated automatically. To this end, the necessary values are added to the variable $utilities. After compiling all the source files, the utilities will appear in the main CSS file. To get a better idea of how utilities are generated, it’s worth taking a look at the existing utilities.scss. It contains all the utilities that are generated by _Bootstrap by default. As an example, let’s look at how the justify-content utility was created:

"justify-content": (
  responsive: true,
  property: justify-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
)

At first, seeing so many different values may be confusing or scary, but once you create your own utility, you’ll see how much easier this API makes life for developers. Which array keys are represented here?

responsive — do you want to create utilities for different screen resolutions? If responsive is true, utilities will be created with the prefixes -sm-, -md-, -lg- and so on
property — the name of the CSS property. In this case, it’s justify-content
values — the values the property can take. There are several variations of how values can be set that are possible here. For the justify-content property, we also specify aliases, i.e., alternative names, so we can get readable class names when generating utilities. Compare:

/* No aliases specified */
.justify-content-space-around {
  justify-content: space-around;
}

/* Alias specified */
.justify-content-around {
  justify-content: space-around;
}

In addition to these keys, there are several others:

class — alternative name for the class. The default name for the class is the name of the utility itself. This can sometimes be quite cumbersome

"justify-content": (
  responsive: true,
  property: justify-content,
  class: jc,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
)

.jc-around {
  justify-content: space-around;
}

state — the ability to add utilities for pseudoclasses, such as :hover, :focus

"justify-content": (
  responsive: true,
  property: justify-content,
  state: hover,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
)

.justify-content-around-hover:hover {
  justify-content: space-around;
}

*Only the property and values keys are mandatory. Other keys are used based on the developer’s needs

Creating a cursor utility is now a fairly simple task - you need to add the new utility to the $utilities variable and compile the project. Note that the creation of the utility is done through the map-merge function

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      values: pointer grab help progress,
    ),
  )
);

After compilation, the following classes will be added to the main CSS file:

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-grab {
  cursor: grab !important;
}

.cursor-help {
  cursor: help !important;
}

.cursor-progress {
  cursor: progress !important;
}

Recommended materials

Bootstrap Utilities API

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

Article “How to Learn and Cope with Negative Thoughts“
Article “Learning Traps“
Article “Complex and simple programming tasks“

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access

130

courses

1000

exercises

2000+

hours of theory

3200

tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

130 courses, 2000+ hours of theory
1000 practical tasks in a browser
360 000 students

Our graduates work in companies:

Suggested learning programs

Profession

Under development beginner

Layout Designer

Layout with the latest CSS standards

start anytime 5 months

Use Hexlet to the fullest extent!

Ask questions about the lesson
Test your knowledge in quizzes
Practice in your browser
Track your progress

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.