0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>Developers often think Bootstrap is only handy for creating admin panels and prototype sites. Bootstrap has become so famous because of its simplicity.</p>
1
<p>Developers often think Bootstrap is only handy for creating admin panels and prototype sites. Bootstrap has become so famous because of its simplicity.</p>
2
<p>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:</p>
2
<p>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:</p>
3
<ul><li><strong>SASS variables</strong>are responsible for dozens of parameters. You can change parameters without rewriting classes, as developers with little knowledge of Bootstrap often do</li>
3
<ul><li><strong>SASS variables</strong>are responsible for dozens of parameters. You can change parameters without rewriting classes, as developers with little knowledge of Bootstrap often do</li>
4
<li><strong>SASS functions</strong></li>
4
<li><strong>SASS functions</strong></li>
5
<li><strong>SASS mixins</strong>containing the available components and utilities</li>
5
<li><strong>SASS mixins</strong>containing the available components and utilities</li>
6
</ul><p>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.</p>
6
</ul><p>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.</p>
7
<p>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.</p>
7
<p>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.</p>
8
<p>Bootstrap is constantly evolving. Many people from many different countries are involved in its development. If you like, you can be one of them.</p>
8
<p>Bootstrap is constantly evolving. Many people from many different countries are involved in its development. If you like, you can be one of them.</p>
9
<h2>Advantages</h2>
9
<h2>Advantages</h2>
10
<h3>The speed</h3>
10
<h3>The speed</h3>
11
<p>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.</p>
11
<p>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.</p>
12
<p>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.</p>
12
<p>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.</p>
13
<h3>Cross-Browser</h3>
13
<h3>Cross-Browser</h3>
14
<p>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.</p>
14
<p>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.</p>
15
<p>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.</p>
15
<p>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.</p>
16
<h3>Ready-made components</h3>
16
<h3>Ready-made components</h3>
17
<p>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.</p>
17
<p>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.</p>
18
<p>The structure of Bootstrap involves reusing classes from a set of components. It does not matter where we use the tags.</p>
18
<p>The structure of Bootstrap involves reusing classes from a set of components. It does not matter where we use the tags.</p>
19
<p>Proper use of classes and nesting is essential. For example, when creating the<a>Buttons</a>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.</p>
19
<p>Proper use of classes and nesting is essential. For example, when creating the<a>Buttons</a>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.</p>
20
<h3>Adaptability</h3>
20
<h3>Adaptability</h3>
21
<p>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.</p>
21
<p>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.</p>
22
<p>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.</p>
22
<p>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.</p>
23
<p>You can also find best practices for using specific attributes for many components.</p>
23
<p>You can also find best practices for using specific attributes for many components.</p>
24
<h3>The accessibility</h3>
24
<h3>The accessibility</h3>
25
<p>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.</p>
25
<p>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.</p>
26
<h3>Low threshold of entry</h3>
26
<h3>Low threshold of entry</h3>
27
<p>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.</p>
27
<p>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.</p>
28
<h2>Disadvantages</h2>
28
<h2>Disadvantages</h2>
29
<p>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.</p>
29
<p>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.</p>
30
<h3>Weight</h3>
30
<h3>Weight</h3>
31
<p>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.</p>
31
<p>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.</p>
32
<p>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.</p>
32
<p>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.</p>
33
<h3>Using it in design projects</h3>
33
<h3>Using it in design projects</h3>
34
<p>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.</p>
34
<p>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.</p>
35
<p>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.</p>
35
<p>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.</p>
36
<h3>New CSS Practices</h3>
36
<h3>New CSS Practices</h3>
37
<p>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.</p>
37
<p>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.</p>
38
<h3>Dependence on JavaScript libraries</h3>
38
<h3>Dependence on JavaScript libraries</h3>
39
<p>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.</p>
39
<p>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.</p>
40
<h2>Bootstrap projects</h2>
40
<h2>Bootstrap projects</h2>
41
<p>If you’re still convinced that Bootstrap isn’t suitable for creating colorful sites, check out<a>the official Bootstrap blog</a>, which features sites that use Bootstrap as a framework. Among them are both small projects and quite large ones.</p>
41
<p>If you’re still convinced that Bootstrap isn’t suitable for creating colorful sites, check out<a>the official Bootstrap blog</a>, which features sites that use Bootstrap as a framework. Among them are both small projects and quite large ones.</p>
42
<p>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.</p>
42
<p>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.</p>