Bootstrap 5: Layout basics
2026-02-21 23:40 Diff
https://hexlet.io/courses/bootstrap_basic/lessons/why-bootstrap/theory_unit

Developers often think Bootstrap is only handy for creating admin panels and prototype sites. Bootstrap has become so famous because of its simplicity.

Creating a prototype on top of a standard framework is an easy task. However, Bootstrap is a complex and versatile framework with default components and modules. You can use the tools that Bootstrap has at its disposal to create modules with a unique design. Among them are:

  • SASS variables are responsible for dozens of parameters. You can change parameters without rewriting classes, as developers with little knowledge of Bootstrap often do
  • SASS functions
  • SASS mixins containing the available components and utilities

It leads to accusations of templates and lack of flexibility in use. It is nothing more than speculation by developers who have not fully explored all possibilities.

This framework has limitations because it is a one-size-fits-all solution, but the possibilities are much greater than they seem at first glance.

Bootstrap is constantly evolving. Many people from many different countries are involved in its development. If you like, you can be one of them.

Advantages

The speed

It is an underestimated and often forgotten advantage. Products change and update daily. If we delay those changes because of a complex layout, it is no longer up to date when the update appears on the site.

Bootstrap, with its out-of-the-box components and utilities, allows you to quickly add new functionality to the site and make it available to users.

Cross-Browser

As with any framework, the challenge of Bootstrap is its use in different browsers, such as Safari, Firefox, Chrome, and Edge. The framework supports these browsers, so you do not have to worry about users having problems using the site.

It is worth noting that Bootstrap always tries to keep up with the times. It means that it quickly starts using new CSS modules. As a result, Bootstrap sometimes has problems with older versions of browsers. It is the price of new technology. If support for older browsers is needed, it is worth paying attention to what Bootstrap uses.

Ready-made components

Bootstrap comes with dozens of already-built components. It allows you to build websites or applications quickly. All of these components are used in real projects and are constantly updated.

The structure of Bootstrap involves reusing classes from a set of components. It does not matter where we use the tags.

Proper use of classes and nesting is essential. For example, when creating the Buttons component, there is no binding between the element and a button. It can be a link or a block element. Bootstrap will create identical buttons in these cases. We achieve it by creating base classes that discard potentially unnecessary styles and add their own.

Adaptability

By using pre-made components, you can ensure they will look well on different devices. They are adaptive, and the utilities have multiple prefixes, meaning you can use them at the desired resolution. We will discuss it in more detail in the corresponding lesson of the course.

To take advantage of accessibility, you should read the documentation and code examples carefully. When you come across unfamiliar attributes, think about why they are here. They are most likely needed to use special devices or applications when working with the site.

You can also find best practices for using specific attributes for many components.

The accessibility

Bootstrap developers put a lot of work into creating an accessible framework for people with disabilities. Many components support a keyboard or special devices for voice-activated content playback.

Low threshold of entry

Bootstrap doesn’t require expert skills in HTML and CSS. Basic knowledge of how styles and tags work is enough. Using all the features, Bootstrap requires knowledge of HTML, CSS, and SASS. If you use all of this, Bootstrap turns from a framework for admins into a tool for creating a complex project.

Disadvantages

Of course, Bootstrap isn’t a perfect framework that solves all problems. Like any tool, it has limitations and disadvantages. All this is insignificant and doesn’t prevent you from using the framework in projects.

Weight

If you only use prebuilt files to connect Bootstrap and its dependencies, it gives the user more than 300 kilobytes of data to upload. It can be critical for some projects designed for a weak Internet connection.

We can solve a part of this problem using builders such as Webpack. When using Bootstrap, you can connect only functionality to the functionality you need. If you need the grid, you can add only it and not keep unnecessary CSS and JavaScript code on the site.

Using it in design projects

Creating a complex design is not an easy task. Different actions and animations, asymmetric blocks, and behavior are all things that make developers tremble. Using Bootstrap or another framework in these situations creates additional difficulties. Bootstrap isn’t suitable for these layouts, so you should rewrite the framework.

This approach will be successful if you create your framework with ready-made components. In that case, you’ll most likely choose a generic framework optimizing it for the task. Many web studios use it to create websites.

New CSS Practices

The advantages stated that Bootstrap tries to keep up with the times and uses new CSS tools. It was not entirely true. Because of the scale, Bootstrap can’t move the code from the old technology to the new one. It has to do with browser support.

Dependence on JavaScript libraries

Bootstrap depends on JavaScript in many ways. It adds complexity because incorrect use of structures or classes can cause components to fail to do their job. It also imposes an obligation to connect all necessary JavaScript dependencies. Up to version 5.0, one of these dependencies is JQuery, which will have lost relevance when the new version is released. Developers are slowly abandoning dependencies, so this bug will soon disappear.

Bootstrap projects

If you’re still convinced that Bootstrap isn’t suitable for creating colorful sites, check out the official Bootstrap blog, which features sites that use Bootstrap as a framework. Among them are both small projects and quite large ones.

Another project that uses Bootstrap — is Hexlet. Yes, every page of our site uses Bootstrap in the standard version. We deliberately minimize the amount of CSS code written in-house for speedy development. It allows us to update versions of Bootstrap and implement new functionality quickly. Look around the site, look at the pages, and see how Bootstrap does its job.