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 can be used on the page. These blocks are called components, and they allow you to quickly add new elements to the page.

The components are initially configured to work at different screen resolutions. They’re adapted to different browsers and platforms, so when you use them, you can be confident that everything will be displayed correctly.

Bootstrap now has more than 20 components, which we can’t cover in one lesson. In this lesson, we’ll look at the button component, and in the additional assignment you’ll be able to try out the components in your own template.

Buttons

This is one of the most used components. You’ll have seen this structure many times while studying this profession. The .btn class is used to create a button and can be applied to 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 way. This is one of the principles of Bootstrap. Components and classes should not be tied to specific tags, thereby 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);
}

This is how all the components are presented inside Bootstrap. Almost any external change is a result from using of variables. This approach ensures that all components are bound to the framework and change when you change the basic settings.

Many developers miss this point when creating their own components, which negatively affects future support for the project, since changing the settings won’t change the component. To do this, you’ll need to edit the CSS separately. The more of these components there are, the higher the chance there is of an error occurring, and there’ll also be more time needed to implement changes.

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

As you can see from the button styles, they don’t have any visual effects by default, although they have most of the structural styles. This is similar to the OOCSS approach of separating styles for structure and styles for design. They’re listed as a separate class. To give visual styles to the buttons, you’ll need to add a modifier.

Modifiers

The style modifiers are similar for most components. They’re 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/add colors, thereby changing the color palette of the site 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 common framework variables

  • Using individual variables to customize a component


Recommended materials

  1. Buttons component
  2. Card component

Hexlet Experts

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
Layout Designer icon
Profession
Under development beginner
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

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.