Bootstrap 5: Layout basics
2026-02-21 03:01 Diff
https://hexlet.io/courses/bootstrap_basic/lessons/components/theory_unit

In addition to small classes for working with standard HTML elements, Bootstrap provides ready-made blocks that we can use on the page. These blocks are components. They allow you to add something new to the page quickly.

The components come configured to work with different screen resolutions. They support many browsers and platforms, so you can be confident that everything will accurately display when you use them.

Bootstrap now has over 20 components, which we can’t cover in one lesson. In this lesson, we look at the button component, and you can try it out in your template in the additional assignment.

Buttons

It is one of the most used components. You’ll have seen this structure many times while studying this profession. The .btn class creates a button in any HTML element.

To do this, the class has properties that take into account the features of the different elements:

Regardless of which element has the `.btn`` class, it’ll be displayed the same. It is one of the principles of Bootstrap.

Components and classes should not be tied to specific tags, giving the layout designer more freedom to implement the layout how they want.

These rules are written in the framework in a much more complex way because they use functions and variables from the entire project:

It is how we present it inside Bootstrap. Almost every external change is a result of using variables. This approach ensures that all components are bound to the framework and change when you change the basic settings.

Many developers overlook this, which hurts future support for the project because changing the settings doesn’t change the component. You’d have to edit the CSS separately. The more of these components there are the greater the chance of an error and the more time it will take to implement changes.

Let’s add three buttons, which we will use to examine the mechanism for using components.

As you can see, they have no visual effects by default, even though they have the most structural styles.

It is similar to the OOCSS approach of separating structural styles from styles for design, listed as a separate class. We need to add a modifier to add visual styles to the buttons.

Modifiers

The style modifiers are similar for most components. They are nameComponent-color type classes. Buttons are no exception. By default, there are eight such classes for buttons:

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

Each of these classes adds a specific color that corresponds to its name.

Let’s add classes for buttons to the example.

These colors can be changed and added using the $theme-colors variable in the _variables.scss file:

This file also contains specific color values, and you can change or add colors, thereby changing the site’s palette or adding new features when using classes.

The key points to note when working with components are:

  • No tagging
  • Using functions to generate styles
  • Using usual framework variables
  • Using individual variables to customize a component