By: Tomislav Bacinger

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.