Register to get access to free programming courses with interactive exercises

Components Bootstrap 5: Layout basics

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:

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
}

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:

.btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  @include transition($btn-transition);
}

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:

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

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


Do it yourself

Using the .card component, create product cards in your layout. At the bottom of the cards, place the buttons "Order" and "Add to cart".


Recommended materials

  1. Buttons Component
  2. Card Component

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

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
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

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

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

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.