Web front-end
8 minute read

The 10 Most Common Bootstrap Mistakes That Developers Make

Tomislav (MSc) has spent more than 15 years in full-stack development and data analysis, but geospatial visualizations are his favorite.

At first glance, Bootstrap seems quite simple. And indeed, it is not difficult to start using Bootstrap. There is a very well written Bootstrap documentation with many HTML, CSS, and JavaScript code examples. Most of the important pitfalls are mentioned there, but still some mistakes are pretty subtle, or have ambiguous causes. Because Bootstrap looks very simple and easy to use, many developers are rushing into the framework, and so mistakes happen.

Bootstrap Mistakes

We will take a look at 10 of the most common Bootstrap mistakes, problems, and misconceptions when developers start using it.

Common Bootstrap Mistake #1: Basic misconceptions about the framework

There are some basic misconceptions about the Bootstrap framework that people have. This may be because it is not clearly advertised on the Bootstrap site, or because people don’t take enough time to read the documentation. The fact is that sometimes developers end up in the corner doing stuff wrongly, and then blame the framework. So lets make some basic facts clear.

Bootstrap is comprehensive, but it is neither huge nor enormous. 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. You can choose and pick a few of them, and with its default configuration quickly generate a UI that handles multiple browsers, devices, and resolutions with nice format.

Bootstrap will not do everything for you, but it provides a set of reasonable defaults to choose from and it will help developers to concentrate more on the development work than worrying about design, and help them to get a good looking website up and running quickly. It allows fast prototyping, but it is not limiting developers on the way.

It is extensible enough that anyone can adjust it to fit to his or her needs. In the beginning, Bootstrap had some limitations, and back then it was complicated to extend default styles. But as the framework matured, extensibility also improved.

Common Bootstrap Mistake #2: Thinking that you don’t need to know CSS to use Bootstrap, and that you don’t need a designer

If you are thinking that if you are using Bootstrap you will not need to know CSS, you are very wrong. Any front-end developer needs to learn CSS and HTML5. Bootstrap is removing a lot of tricky CSS parts from developers shoulders (like vendor specific prefixes) and it is offering basic default styling, but you still need to understand CSS. You don’t need to know how media queries work, but you need to understand how responsive design works. Bootstrap is not meant to teach you CSS, but it can help if you want. Examining source code in LESS or SASS is a great starting point.

On a similar topic, you don’t need to be a designer, and you can argue that you don’t need a designer with Bootstrap. However if possible, use help from a designer. A common complaint against Bootstrap is that all Bootstrap sites look alike, and it is easy to end up with a website that looks just like any other Bootstrap site. But this doesn’t need to be true. Millions of websites across the web are being built with Bootstrap. Great showcases of how different designs can be achieved can be found on the Bootstrap Expo, which collects sites that are built with Bootstrap. Take a look, get some inspiration, and start building your own design variation.

Common Bootstrap Mistake #3: Changing Bootstrap CSS file

To make it plain and simple: Do not modify the bootstrap.css file.

If you make changes to the bootstrap.css file, things will get complicated very fast. The whole design will break when you want to upgrade Bootstrap files. You can overwrite in your own stylesheet default bootstrap colors, styles, margins, paddings, everything. There is no need to touch the bootstrap.css stylesheet at all.

Don’t know LESS or SASS? No problem, you can create your own CSS file and overwrite whatever you want from the original bootstrap.css stylesheet. Just as we mentioned in the previous mistake, knowing CSS is mandatory. Create your new CSS selector, use it in the HTML, and as long you declare your CSS classes after Bootstrap styles, your definitions will overwrite Bootstrap defaults.

Still want to know more and dive deeper? I strongly suggest and encourage you to do so. Use the Bootstrap LESS source code. You will get better understanding what is going on, and where is what if you use the LESS source and not static CSS.

Common Bootstrap Mistake #4: Using everything that Bootstrap offers

As mentioned before, Bootstrap is comprehensive. It 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.

This is especially true for plugins. Pick and choose only plugins that make sense, and don’t use everything because it looks nice and cool. Your website can be easily overdone. Consider for a start that you don’t include bootstrap.js file at all, and create a site using just plain HTML and CSS. And then, add components only as needed for specific roles, one by one.

Common Bootstrap Mistake #5: Misusing a modal prompt

Bootstrap modals offer flexible dialog prompts with the minimum required functionality, and it comes with smart defaults. Although modal is easy to use and offers rich customization, there are a few things we need to keep in mind to avoid common misuses.

Showing more than one modal prompt at the time

Bootstrap doesn’t support overlapping modals. Only one modal at the time can be visible. Showing more than one modal at a time can be achieved, but it requires custom code to be written to handle this properly.

Bootstrap modal appears under background

If the modal container or its parent element has a fixed or relative position, the modal will not show properly. Always make sure that the modal container and its parent elements don’t have any special positioning applied. The best practice is to place a modal’s HTML just before the closing </body> tag, or even better in a top-level position in the document just after the opening <body> tag. This is the best way to avoid other components affecting the modal’s appearance and functionality.

There are some caveats that developers need to be aware of when dealing with modals on mobile devices with virtual keyboards. This is especially true for iOS devices, where a rendering bug exists that doesn’t update the position of fixed elements when the virtual keyboard is triggered. This is not handled by Bootstrap, so it is up to the developer to handle these situations in the code in the best way for the application in question.

Common Bootstrap Mistake #6: File input button component problem

Bootstrap doesn’t have a designated component for a file upload button. A simple and elegant solution using only HTML and CSS can be achieved with the following sample code:

<span class="btn btn-default btn-file">
  Browse <input type="file">
.btn-file {
  position: relative;
  overflow: hidden;
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;

There are many examples of how to get similar effect. This code example is borrowed from Cory LaViska, and on his site you can read a more detailed explaination of this problem. There is also an extended example with more functionality that is using additional JavaScript code.

Common Bootstrap Mistake #7: Overcomplicating with JavaScript and ignoring “data-” attributes

Designers, or just novice JavaScript developers, can very easily dive into web development and create web pages using only HTML, CSS, and Bootstrap. If they are not very good at coding, they can fall into the trap of misusing JavaScript or just overcomplicating. 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.

For example, we can activate a modal dialog without writing any JavaScript just by setting data-toggle="modal" on a controller element like a button or anchor, and pass additional parameters using data- attributes. In the code below, we are targeting HTML code with the ID #myModal. We have specified that the modal won’t close when user clicks outside the modal by using the data-backdrop option, and we have disabled escape key event that close a modal with data-keyboard option. All in one HTML line of code:

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Common Bootstrap Mistake #8: Ignoring tools that ease Bootstrap development

Mistakes happen, and every developer makes them occasionally. This is inevitable, but it is how you deal with the mistake that matters. The Bootstrap team noticed by watching the issue tracker that people are doing some mistakes more often. That’s why they tried to automate development process. The result is Bootlint, an HTML linting tool for Bootstrap projects. Bootlint can be used either in-browser or from the command line via Node.js, and it will automatically check Bootstrapped webpages for many common Bootstrap usage mistakes. Adding Bootlint to your web development toolchain can eliminate a lot of common mistakes that usually slow down a project’s development.

In case you want to contribute to Bootstrap project, it is worth checking Rorschach. Rorschach is a Bootstrap pull request sanity checker bot, which runs a few checks on every new pull request. If a sanity check fails, it leaves an informative comment on the pull request explaining the mistake and how to fix it, and then closes the pull request.

Common Bootstrap Mistake #9: IE8 and older browsers incompatibility issues

Bootstrap is built to work at its best in the latest desktop and mobile browsers. Older browsers might display components and elements differently styled, but everything should be fully functional. Support includes Internet Explorer 8 and 9, with an important note that some CSS3 properties and HTML5 elements are not fully supported by these 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. Your HTML head in the end should look something like this:

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

In case of Respond.js, beware of the following caveats in the development and production environments.

Common Bootstrap Mistake #10: Ignoring best practices

One of the common questions on the Stack Overflow is how to make Bootstraps menu dropdown to open on hover, rather than on click. While the solution to this question is not complicated and can be done by using only CSS, it is not recommended. This feature was left out of the framework on purpose, and this is a design decision made by the development team. Again, it can be done, but one needs to understand repercussions and understand that best practices exist, especially for mobile first frameworks. The reasoning behind this specific issue is that making things to work on hover does not help users that have touch devices. On such devices there is no hover, only touch events. Thus, this will not work properly on any touch-enabled devices.

Bootstrap Mistakes Conclusion

I hope this short Bootstrap guide will help you to avoid some of the common mistakes, clear usual misconceptions, and help you to get most of the framework. Keep in mind, Bootstrap is not for everyone, nor is it suited for every project. When choosing a framework you need to take some time to read the documentation, and you need to spend some time playing with the framework to get a better sense and picture of how it works. This is valid for Bootstrap too.

Read the documentation, play and experiment with the samples, get the basics right, and enjoy creating new and beautiful designs.


Evan Wieland
Really good article! When first using bootstrap, #3 was my biggest mistake. I learned the hard way, but never did that again! :) And even if your to lazy to override bootstrap with custom css, you can always download a custom bootstrap build was well. Love the art in this article as well!
István Ujj-Mészáros
#7 states that "all Bootstrap plugins can be used purely through the markup API, without writing a single line of JavaScript", but that is not true for <code>popover</code> and for <code>tooltip</code>. For performance reasons, the <code>tooltip</code> and <code>popover</code> data-apis are opt-in, meaning you must initialize them yourself: <pre><code> $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); </code></pre>
Tijana Dojcinovic
Nice article, but aimed at total beginners in web frontend matters. Also a good part of it basically just says RTFM. Still, a nice article, many will find it very useful.
Shairyar Baig
Nice refreshing article about bootstrap
Luboš Volkov
We are glad you like the article and the art! #toptaldesignteam
very good article, thanks you.
GOOD ARTICLE - http://www.w3technology.info/
Monika Pilare
Which things we should keep in mind while making changes in bootstrap classes that will break responsiveness of the website?
José Esteva
Great tips, thank you!
Thank you Tomislov Bacinger. I am enjoying your advice and explanations very much. I am a beginner web designer/developer just learning Bootstrap... and I've got to work on #3. I've subscribed to your updates list and look forward to reading more.
I have the table in Bootstrap Model , also i have the text box to add the Items to table, when i the data is added and delete its not updating in the bootstrap modal how can i over come this... thanks in advance.
Walking Dead Fans Loud
Do you have blog and have some serious or small HTML or CSS or jQuery issues? Click below for best solution https://goo.gl/sIqZLb
sandy pa
when I use add and don't fill any field and close the bootstrap popup and try to delete a row . This error showing in the picture arrives. code: <button class="btn btn-default" data-toggle="modal" data-target="#Modal1" style="color:red;margin-left:330px;" data-backdrop="static" data-keyboard="false" > <span class="glyphicon glyphicon-plus"></span> </button> </div> <!-- 1st DIV close() --> <!-- Modal1 --> <div class="modal fade" id="Modal1" role="dialog"> <!-- popup for add user start--> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"class="form-signin" method="post" id="login-form"> <center> i think this happens because variable 'id' is still having its value. So how to dismiss 'id' variable/
Pushkar Dayal
very useful article, Thanks
I created a website in Bootstrap Studio, my first one. Turned out ok, but when it loads, the bottom of the page loads first. How do I fix it?
Dattatray Gorde
sir how can i store data on model
I'm about to start working on a site using Bootstrap for the first time, so this article was really helpful. Thank you!
You can have a look at this Youtube bootstrap tutorial: bit.ly/bootstrap2017
For those, who are beginners and want to learn Bootstrap. You can look at this tutorial on YouTube: bit.ly/bootstrap2017
Stephen Deere
Many people suggest if you should use sass to complie everything into one css file . So you have the bootrap sass folder untouched and then a folder with your on scss files for example called thme. I have done sites this way. Everything is all compiled to one css. How come i rarely see this done in website i view source on. They all seem to use the bootstrap cdn and then add an additional .css file in the header overriding defaults etc.. Question : Is using the deafult bootstrap cdn and then overiding with an additional ccs file result in better end user performance than using sass to compile 1 optimised minimal css file store locally on website server.
The biggest mistake with Bootstrap is using bootstrap to begin with.
thank you
This is good ... shared this with few of my new developers on the team ... would definitely help them a lot in not making these mistakes. Thanks again.
arunace no but
arunace briefly
vukovljak Nikola
hi, can you tell me how i use css on android app. i have code like this and not previwe on android app css, just img and text under img like no css exist.. what i do wrong.thanks sory for lang <!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1" name="viewport" /> <style type="text/css"> * { box-sizing: border-box; } body { font-family: Arial; font-size: 17px; } .container { position: relative; max-width: 800px; margin: 0 auto; } .container img {vertical-align: middle;} .container .content { position: absolute; bottom: 0; background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */ color: #f1f1f1; width: 100%; padding: 20px; } </style> </head> <body>
comments powered by Disqus