Bootstrap is one of the best and most used HTML/CSS/JS front-end frameworks. Almost any web developer who has made a website or two has heard of this popular framework. It offers so many ready-made components and resources, Bootstrap can significantly speed up your application development.

Best Practices for Speeding Up Your Application Development with Bootstrap

Best Practices for Speeding Up Your Application Development with Bootstrap

Every good developer is concerned with saving every second in their development process. Being efficient means faster deployment - the sooner and more often we deploy, the faster our end users get a better product. Therefore spending a few hours or days on planning the process and strategy can save us not only a few minutes, but many hours.

I personally have been working with this framework for the last 4 years on 90% of my projects. In this article, I would like to share with you a few tips which can help you to speedup your application development without missing some of Bootstrap’s awesome capabilities.

Understanding Bootstrap

Even though it’s a framework that is very easy to start with, don’t be fooled by its simplicity at first sight. Before rushing into a project, spend time playing with the framework and getting the lowdown on the key pieces of its infrastructure and exciting components. This will help avoid The 10 Most Common Bootstrap Mistakes.

Dedicate an hour to read documentation on Bootstrap’s site or learn more from a great post on Toptal’s blog, What is Bootstrap? A Short Tutorial on the What, Why, and How. And, great article Bootstrap 3 Tips and Tricks You Might Not Know on scotch.io.

If you find reading documentation a boring task and you would rather read some code instead, then the best place to start is Bootstrap’s website. Open up your web inspector, scan through the site’s source code, and check every code block and its elements. It is probably one of best and quickest ways to grasp the basics.

Dig into the page structure and learn how the layouts are constructed.

<div class="container">
    <div class="row">
    ...
    </div>
</div>

… resize your browser window or use Chrome’s Viewport Resizer to learn more about media query utilities.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width:
@screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width:
@screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width:
@screen-lg-min) { ... }
@media (max-width: @screen-xs-max) { ... }
@media (min-width:
@screen-sm-min) and (max-width: @screen-sm-max) { ...
}
@media (min-width:
@screen-md-min) and (max-width: @screen-md-max) { ...
}
@media (min-width:
@screen-lg-min) { ... }

… and how and when to use them, get familiar with column classes for the best responsive design results.

<div class="row">
    <div class="col-sm-7 col-md-9 col-xs-6">Left column</div>
    <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> 
</div>

Take a look at W3Schools where you will find a complete Bootstrap reference of all CSS classes, components, and JavaScript plugins - all with “Try it Yourself” examples:

Inspect source code and and try to get acquainted with as many class names as possible. Learn about their use cases - the hows, whens, and whys. This will help you move forward faster when writing HTML and styling UI elements. Learning more about these components will help you avoid bloating your stylesheets with lots of unnecessary duplicate code. Keep it lean and clean by using and reusing existing components, instead of creating too many new ones that do the same as the ones that already exist within the framework.

Learning more about Bootstrap components will help avoid bloating your stylesheets

Learning more about Bootstrap components will help avoid bloating your stylesheets

This is especially important when working in a team of several developers. Make sure you do not end-up writing tons of duplicated code creating too many styles for the same case each time over and over again when translating new designs to the code. Keeping the UI development consistent and well documented with UI style guides can also add a couple of knots up to the productive teamwork. In addition, you will find that when adding new features or pages to your application you will move forward with less frustration. I have been involved in over a dozen of big projects, and in comparison I’ve seen a number of cases where the framework was literally hacked and every time the new CSS code was added it would break UI on other pages. It would get pretty exhausting going through all the site and fixing these types of bugs. Not only that, think about the cost and all the money spent on extra developer time and QA help.

7 Most Common Time Wasting Styling Mistakes

1. When centering text or divs

If you need to center a div and/or content, you can use one of these classes:

Use text-center

<p class="text-center">I am centered text</p>

… or center-block

<div class="center-block">I am centered text</div>

not .center or <center>

2. When changing font size

If you need smaller or bigger fonts, you can use one of these classes:

<p class="lead">I'm bigger paragraph text.</p>
<p class="small">I'm smaller paragraph text.</p>

In case you need bigger or smaller headers don’t forget about .h1, .h2, .h3, .h4, .h5, .h6, .small. Use it like this:

<h1 class="h2">Smaller Title with .h2</h1>
<h3 class="h1">Bigger Title with .h1</h3>
<h4 class="small">Smaller Title with .small</h4>

3. When clearing floats or forcing elements to self-clear its children

No need to create classes like .clear, you can always use Bootstrap’s .clearfix instead.

<div class="clearfix">...</div>

4. When killing .row class margins

Just use .clearfix instead of defining your own styles (or worse, using inline styles):

<div class="clearfix">...</div>

5. When unstyling or inlining unordered lists and other elements

Remove the default list-style and left margin on list items. This only applies to immediate children list items. In case you need to apply the same for nested lists, you will need to add the class name on those as well.

<ul class="list-unstyled">
  <li>...</li>
</ul>
<ul class="list-inline">
  <li>...</li>
</ul>

Similarly, for checkboxes or radio buttons, we have .checkbox-inline and .radio-inline.

And you can always add .form-inline to your forms (which doesn’t have to be a <form>) for left-aligned and inline-block controls.

6. When sizing buttons

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

7. When floating and aligning items to the right or left

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins with any CSS preprocessor.

Use .pull-right, .pull-left, .text-right, .text-left instead of .right, .left, .left-float, .right-float.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Easily realign text to components with text alignment classes.

<p class="text-left">Left aligned text.</p>
<p class="text-right">Right aligned text.</p>

Do Not Customize the Framework Core Files Directly

When working on big projects, I found that the best way to use the framework effectively is to build off of it and not customize its core files directly. This concept is similar to other platforms and libraries you might use for the project.

Although, if you are building a small site and have a design mockup that might not require much change or updates, you might find that customizing the framework for your needs is a better option. For example you might want to strip out all of the stuff you don’t need directly in the framework files, or you can go to Bootstrap’s site customize section where you can easily configure all the components, variables, and jQuery plugins to get your very own version. In this case, you might speed up your site development and cut the time styling or dealing with overrides.

However, if you are starting or working on a big site with several developers or more - it is best to keep things separated and well organized. Move the framework files outside the main custom CSS folder and keep it in a non-edit non-version folder and remove unused CSS by utilizing Grunt or Gulp plugins grunt-uncss or gulp-uncss. Another alternative to keep it separate is to serve it through CDN. Having the framework’s code separate and untouched gives you a better and faster option when upgrading it to the latest version. It also helps to minimize a number of scalability and styling issues, or being slowed down when making additions with rapid continuous UI changes.

Utilize scaffolding tools like Yeoman or Slush, and package managers like Bower, Python’s pip, Node’s NPM, or Ruby Gems since they’re doing much more than adding files to your application’s path. I really appreciate the power of Bower - it can definitely do a little more than just download a file or two. Using a package manager is a good idea since most likely the complexity of your project will grow and the amount of third-party plug-ins and how you maintain them will become insane and time consuming. Bower will help you keep track of each plugin and its dependencies including anything related to Bootstrap.

Utilize Available Bootstrap Resources for Application Development

With Bootstrap’s popularity comes a wealth of helpful resources: articles, tutorials, third-party plug-ins and extensions, templates, theme builders, and so on. So whether you’re looking for inspiration or code snippets, you’ll have everything you need to accelerate your progress.

You would think that having so many resources available, everyone would take advantage of it and use it through their projects, but believe it or not - that is not the case. Some developers waste their time and slow project progress by skipping some great code snippets or resources. Although you should not just blindly copy and paste, you must understand the good parts and adopt them to your coding style and technical needs. The ability to find and sort out good resources and be able effectively utilize it is also a skill and requires years of experience and knowledge.

Below you will find a list of useful resources to get started with:

Templates, Themes and Plugins

Official Themes from Bootstrap’s creators: themes.getbootstrap.com.

Marketplaces with premium Bootstrap themes and templates: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Free Bootstrap Themes & Templates: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

“The Big Badass List” - a list of 319 useful Bootstrap resources: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI written in pure AngularJS by the AngularUI Team.

ReactJS

React-Bootstrap is a library of reusable front-end components. You’ll get the look and feel of Twitter Bootstrap, but with much cleaner code, via Facebook’s React.js framework.

Django

Bootstrap 3 integration with Django: https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap is a full blog scaffold for Jekyll based blogs.

WordPress

WordPress starter theme Sage with a modern front-end development workflow. Based on HTML5 Boilerplate, gulp, Bower, and Bootstrap.

Material Design

Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.

Conclusion

Bootstrap is one of the best available frameworks that offers you many great tools and resources in order to accelerate and speed up your application development process.

It saves you many hours/days of work when designing and coding an awesome UI. Every component and plugin is thoroughly documented with live examples and code blocks for easier use and customization. It is highly recommended by many developers and very popular for both prototyping and production. It is a very good tool for making mobile-friendly responsive websites. Bootstrap gives you a great starting point for many types of projects, the option to hand it over to a designer and say “make this look fancy!” without them needing to hack their way through the code. Most importantly, it allows you to develop the structure first, and address fonts, colors and fancy styles later. Take the time to study what it can do and be smart about how to use it the best way so you can get where you want faster.

About the author

Lijana Saniukaite, United States
member since June 4, 2014
Lijana is an entrepreneur with full-stack experience specializing in UI/UX design and engineering. She has over 6 years of experience working independently with a range of clients from large corporations to startups. She has strong skills in building responsive and complex web and mobile applications. She makes great effort to follow the latest trends in technology and constantly learns new things. [click to continue...]
Hiring? Meet the Top 10 Freelance Twitter Bootstrap Developers for Hire in December 2016

Comments

Samseen
Nice write up.
Ivan Rogić
cool post
Halil Özgür
Thanks for reminding the powers of the framework. I guess the most neglected part (at least by me) tends to be the CSS helpers (.text-center, .pull-left, .text-overflow() etc). One thing I'd add to the "Do Not Customize the Framework Core Files Directly" part is: use Less/Sass. If you don't use them, utilizing them in Bootstrap is a great start. They are really easy. Imagine changing the colors, font sizes, borders of the whole framework by just simple variables. And you'll be immune to framework upgrades.
Carol
It will be interesting to see how Bootstrap 4 unfolds. Another resource you may want to mention is Bootply (http://bootply.com). It's an editor built just for Bootstrap. Nice article.
Molly Walker
Hi Lijana, Wonderful explanation. I am sure your article will help a lot of people to speed up bootstrap development. However, We have developed some free bootstrap templates and it would be great if you can add https://themesell.co/ on your list of freebie sites. Regards!
comments powered by Disqus
Subscribe
The #1 Blog for Engineers
Get the latest content first.
No spam. Just great engineering and design posts.
The #1 Blog for Engineers
Get the latest content first.
Thank you for subscribing!
You can edit your subscription preferences here.
Trending articles
Relevant technologies
About the author
Lijana Saniukaite
HTML5 Developer
Lijana is an entrepreneur with full-stack experience specializing in UI/UX design and engineering. She has over 6 years of experience working independently with a range of clients from large corporations to startups. She has strong skills in building responsive and complex web and mobile applications. She makes great effort to follow the latest trends in technology and constantly learns new things.