5 Common Mistakes When Using the Bootstrap Framework.

At first glance, this framework seems to us as simple and easy to deal with, and of course, it is so, and starting to use it is not difficult. Documenting this framework is well written and contains a lot of programming code related to HTML, CSS, and JavaScript. but some errors and problems may not be apparent or may be present in ambiguous use cases. Because the Bootstrap framework seems simple and easy to use, this framework spread like wildfire and many developers started using it, which led to many errors and some problems.

Therefore, in this article, I will list 5 common mistakes that users of this framework make.

Mistake 1: This framework was misunderstood in the first place.

There are some misconceptions present in the minds of developers about this framework, and this may be because these concepts are not explicitly and clearly present in the framework site or because developers do not take the time to read the documentation of this framework. Developers may do a lot of things wrong and then blame the framework itself, so let us clarify some important facts.

The Bootstrap framework is a comprehensive and integrated framework, but it is not bulky or massive. This framework comes with basic templates that contain many user interface components such as tables, forms, buttons, dropdowns, and much more. You can use these components to create an interface that works best for multiple browsers, devices, and dimensions.

It is true that the framework will not do everything, but it provides a set of options for you to choose from, which helps developers focus on development more than design and helps them get a beautiful website in less time.

Mistake 2: Thinking that you would not need to know CSS to use this framework.

If you thought you would not need to know CSS to use this framework then you are wrong, as any web developer needs knowledge of CSS and HTML5. It is true that it saves you the trouble of dealing with some of the annoying CSS issues (such as the vendor prefixie) and gives you many default formats, but you must understand CSS. You may not need to know how media queries work, but you will of course need to know how responsive design works in general. Frameworks are not designed to teach you CSS, but they may help.

Mistake 3: Changing the default CSS file for this frame.

Let me make it simple and straightforward: Never modify bootstrap.css file.

If you modify that file, things will become complicated, and you will destroy the design when you update Bootstrap files when a new version of this framework is released. You can replace the default formats of this frame with the formats you want (such as colors, margins, paddings) and there is no need to modify the bootstrap.css file at all.

Do not know how to use LESS or SASS? No problem with that, all you must do is create the CSS file and put in it the formatting that you want to replace from the main bootstrap.css file. And as we mentioned earlier, knowing CSS is extremely important even if you think otherwise. You can create new CSS selectors or classes and put them in your HTML file to replace the default bootstrap layouts (do not forget to put your CSS file after the bootstrap default CSS files for everything to work correctly).

Mistake 4: Using everything that the Bootstrap framework provides.

I have mentioned said earlier that this framework is comprehensive and integrated and provides many user interface components and many HTML and CSS templates and JavaScript plugins as well. But you should not use everything that this framework offers if you will not need it for the project you are working on.

This is especially true with JavaScript plugins, as you should choose only the plugins that you will need and you should not use everything because it looks beautiful and awesome, as this may overload your site and make it slow. So, you should first not insert the bootstrap.js file and create your site using only HTML and CSS and then add the components you need one by one.

Mistake 5: complicating things with JavaScript and neglecting the "data-" attribute.

Designers or beginners to JavaScript can easily create web pages using HTML, CSS, and Bootstrap. But if they are not good at programming, they may fall into the trap of misuse of JavaScript or even complicate matters. It is important to note that JavaScript plugins can be used using an API provided by the Bootstrap framework without having to write a single JavaScript line.

For example, we can enable a modal dialog without writing a single line of JavaScript by using:

On an element such as a button or anchor and passing additional values using the -data attributes. In the code below we specified an element with id "#myModal" and used the data-backdrop option to prevent the window from disappearing if the user clicked outside the window, and by using the data-keyboard option we disabled the escape button on the keyboard. That closes the window when pressed. And all of this was done using just one HTML line: