There are different ways to work with Bootstrap in our projects. Today we are going to find out what these ways are.

Very different from what you might think, Bootstrap can be added in several ways. Below we will see in detail each of these options, however, many people still do not like to work with Bootstrap in their projects, due to lack of knowledge regarding the framework, or, because they believe that all available components will be the same on all sites. Let’s break this taboo and learn to work with the framework. Let’s also know all the possible ways.

First, we need to know what “CDN” is, the acronym comes from Content Delivery Network, which is nothing more than a set of servers spread around the world, so that your content is accessed in a stable way. If you want to learn more about CDN’s, I recommend reading the article What is CDN? that we have here on our blog.

Now that we have this information, let’s understand this way of importing. When we use Bootstrap in this way, every time someone loads our site, the server closest to their location will provide the styles for the page. Regardless of whether you make use of it, if it’s just the grid system, or some specific component. So your loading will load unnecessary styles. Causing slowdowns depending on the user’s internet speed.

Another important point is that, in this case, it is not possible to change any variables or Bootstrap classes. You will have to use it the way they appear on your official website as an example. It is possible, eventually, to override the classes if you want to change some color, border or spacing. Still, it is not a recommended practice, due to the possibility of causing conflicts between classes.

Of course, this is a very simple way to use it. It does not require any special skills to perform this procedure. The developer manages to make use of all the necessary classes without any problem. The high stability of the servers makes the implementation via CDN the most common way of using Bootstrap.

Download Bootstrap Styles Manual

Another way to use the framework is the manual download, which is also a very simple way to work with Boostrap. When we download the styles we get four separate CSS files, and another four sub separations, giving a total of 16 different files. We get the: reboot, utilities, gridand full CSS. All these files have, as I said earlier, four separate files, which are: minified CSS files rtl (right to left), rtlminified, and normal CSS as we know it. Minified files are used for production, they are the same CSS styles, only in a way that the computer reads faster. os rtlis an implementation that only exists in version 5 of the framework. It is for people who use this type of writing, from right to left.

This way of working with Boostrap leaves us with a little more freedom, because if we are working only with the grid system, we can use the bootstrap-grid.css.

However, this shape also does not give us full manipulation of the tool. Again we are stuck with the styles defined by them, of course, like the CDN, we can override classes. But we will also be prone to the same problems.

This way assures us that if something happens to the Bootstrap servers, we don’t run out of styles. Well, we will use the files we downloaded, in the same way that we use our styles.

Installation via Package managers of Boostrap styles

This is the way of working with Bootstrap that provides us with total manipulation of all variables, right at the root of the styling. That is, this way you can make your style file considerably lighter. Bringing only what to use, such as, for example, you can import just one component style, without the need to import numerous unused classes.

As not everything is flowers, implementing via package managers has its consideration, as it becomes more complex to use, especially for a person who is starting and doesn’t have much experience. In that case you will need to have a prior knowledge of Sass. It is also important to know the package manager you are using. Widely used in large projects, which need high performance.

We have here on the blog the article How to install and use Bootstrap via npm teaching the step by step of this installation. Using one of the most popular package managers npm .