Why Bootstrap — Bootstrap 5: Layout basics

Bootstrap’s main advantage is speed. This is an underestimated advantage that’s often forgotten. In this day and age, speed is very important. Products change and updates make everyday changes. If such changes are delayed because of a complex layout, by the time the update appears on the site, it’ll no longer be actually up to date.

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

As with any framework Bootstrap — challenge is how it can be used on different browsers, such as Safari, Firefox, Chrome, Edge. These browsers are supported by the framework, so you don’t have to worry about users having problems using the site.

t’s worth clarifying that Bootstrap always tries to keep up with the times. This means that it starts using new CSS modules quickly. Therefore, Bootstrap sometimes has problems on older versions of browsers. This is the price of new technology. If support for older browsers is needed, it’s worth keeping a close eye on what Bootstrap is using.

Bootstrap has dozens of ready-made components. This allows you to create websites or apps quickly. All these components are used in real projects and are constantly updated.

Bootstrap’s structure involves reusing classes from a set of components. This means that it makes no difference to the component which tags are used. Using classes and nesting properly is important. For example, when creating the «Buttons» component, there’s nothing that binds the element to being a button. It can be a link or a block element. Bootstrap will create identical buttons in these cases. This is achieved by creating base classes that discard potentially unnecessary styles and add their own.

By using pre-made components, you can ensure that they’ll be shown well on different devices. The components are adaptive, and the utilities have multiple prefixes so that you can use them at the desired resolution. This will be discussed in more detail in the corresponding lesson of the course.

To take full advantage of accessibility, you just need to read the documentation and code examples carefully. When you come across unfamiliar attributes, just think, “why are they here?” They’re most likely needed to use special devices or applications when working with the site.

For many components, you can also find best practices for using special attributes.

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

Bootstrap doesn’t require expert knowledge of HTML and CSS to be used. 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.

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

Part of this problem is solved by using builders such as Webpack. When using Bootstrap you can connect only functionality the functionality you need. If you need the grid, you can connect only it and not keep unnecessary CSS and JS code on the site.

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 creating these layouts, as it means you have to rewrite the framework itself.

This approach will be successful if you create your own framework with ready-made components. In that case, you’ll most likely take a popular framework and optimize it for the task. This is often used in web studios, which create websites.

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

Many Bootstrap components rely on JavaScript. This is an added complexity because using components incorrectly, whether they’re structure or classes, can cause a component to fail to do its task. 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 by the time the new version is released. Developers are slowly abandoning dependencies, so soon this flaw will disappear.