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.
border: 1px solid transparent;
padding: .375rem .75rem;
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.
text-decoration: if($link-decoration == none, null, none);
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
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.
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:
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
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:
Using functions to generate styles
Using common framework variables
Using individual variables to customize a component