The 10 Most Common Bootstrap Mistakes That Developers Make

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.

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.

Modal on the mobile devices

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">
</span>

.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:

<head>
  ...
  <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>
  <![endif]-->
</head>

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.