Common Bootstrap Mistakes That Developers Do

Bootstrap is a powerful web presentation framework formerly known as Twitter Bootstrap. Bootstrap is not the only option for a front-end web framework, but it is the most popular. I believe that everyone should base their CSS on a framework as there is no point recreating common elements and correcting the common shortcomings in CSS browser support.

 

Yes, it’s a powerful framework but still, it is common to hear that Bootstrap is bloated and limits your options if you are using it in your projects. Another complaint is that Bootstrap tries to be a theme and not just a presentation framework. So many things are there which I am going to discuss in this article according to my research.

Below are the mistakes –

 

Misunderstanding about the framework

People have some misunderstandings about the framework. May be it is because the documentation is not proper in Bootstrap website or people don’t have enough time to read full documentation. Bootstrap is a big library, but it doesn’t mean that it will do everything. Bootstrap comes bundled with basic HTML and CSS design templates that include many common UI components. These include Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons and Input Groups, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, and many more. It allows fast prototyping, but the best point is it is not limiting developers on the way.

 

No need to know CSS and no need of Designer

If you are thinking that if you are using Bootstrap you will not need to know CSS, and you don’t need any designer then you are very wrong. Every developer needs to learn CSS and HTML5. Bootstrap is removing a lot of tricky CSS parts from developers shoulders and it is offering basic default styling, but you still need to understand CSS. If the design is very complicated then you require the help of designers also. You don’t need to know how media queries work, but you need to understand how responsive design works. So it’s needed to know CSS, and Designers help is also required.

 

People are changing Bootstrap CSS file

The one thing people keep on doing is that, they are changing Bootstrap CSS file, which is wrong actually. If you make any changes in Bootstrap CSS file, its only going to make things more complicated and things will get more difficult. In future, when you try to upgrade your Bootstrap library then the whole design will break. So keep in mind to never change Bootstrap CSS file. If you want any change then create your own CSS file and write it there.

 

We use everything that bootstrap offers

Bootstrap offers a lot of UI components, HTML and CSS design templates, and JavaScript plugins. But please, be selective. You don’t have to use every feature of Bootstrap, specially when you are adding plugins. Pick and choose only plugins that are very much required.

 

Not a proper use of modal prompt

Bootstrap modal is easy to use and offers rich customization, there are a few things we need to keep in mind to avoid common problems.

 

  • Never show more than one modal at a time.
  • If the parent of modal element is “position:relative” or “absolute”, the modal will not show properly.
  • Be careful always when you are dealing with mobile devices.

 

Over-complicating with JavaScript and ignoring “data-” attributes

People are making code more complicated when they are adding javascript code. If code is already there in bootstrap then what is the use of adding javascript code? So avoid using unnecessary javascript code. It is important to state that all Bootstrap plugins can be used purely through the markup API, without writing a single line of JavaScript. This is Bootstrap’s first-class API and should be your first consideration when using plugins.

 

Avoiding tools that ease Bootstrap construction

All developers commit mistakes and error happens, it’s inevitable. It is how we can deal with errors. Bootstrap team made the building automated and the result is Bootlint. It automatically checks Bootstrapped webpages for a lot of popular Bootstrap usage mistakes and inform you where the code can be improved.

 

IE8 and older browsers incompatibility issues

Some CSS3 properties and HTML5 elements are not fully supported by these IE8 and older browsers. To get full support for Internet Explorer 8 and other older browsers, you need to use a polyfill for CSS3 Media Queries Respond.js, HTML 5 shim which enables use of HTML5 elements, and a proper IE “meta” tag in the HTML head to ensure that IE is not running in compatibility mode.

 

Conclusion

As long as these simple points are followed there should not be any issue in using Bootstrap. Hope it will be useful. We are looking forward to hearing from you.

We will be back with another more useful articles.

 

 

Ajay Malhotra

UI Developer & Designer

2 thoughts on “Common Bootstrap Mistakes That Developers Do

Leave a Reply

Your email address will not be published. Required fields are marked *