Register to get access to free programming courses with interactive exercises

Why Bootstrap Bootstrap 5: Layout basics

Bootstrap is often misunderstood. Developers consider this framework to be of use only for creating admin panels and prototype sites. Bootstrap got so famous because of its simplicity and accessibility. Creating a prototype on an off-the-shelf framework is a simple task. However, Bootstrap is a complex and multifaceted framework with standard components and modules. This doesn’t prevent you from creating modules based on it with a unique design, using the tools that Bootstrap has at its disposal. Among them are:

  • SASS variables, which 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. They contain the available components and utilities. Unique blocks are created based on components and utilities.

This leads to the fact that accusations of templates and lack of flexibility in use are nothing more than speculation of developers who haven’t fully explored the possibilities of the framework. This framework has limitations because it’s a one-size-fits-all solution, but the possibilities are much wider than they seem at first glance.

Bootstrap is constantly evolving. Many people from many different countries are involved in the development. If you’d like, you can be among them too.

Advantages

Speed

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.

Cross-browser

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.

Ready-made components

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.

Adaptability

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.

Accessibility

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.

Low threshold of entry

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.

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. 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.

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 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.

New CSS Practices

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.

Dependence on JavaScript libraries

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.

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, and often in the standard version. For speed of development, we deliberately minimize the amount of CSS code that is written in-house. This allows us to quickly update versions of Bootstrap and implement new functionality. Have a look around the site, look at the pages, and see how Bootstrap does its job.


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.