5 Ways to Blast Off Your Site With Bootstrap

in General

What do Lyft, Apple, and Meteor have in common? Aside from all being on the cutting edge, each of these companies uses Bootstrap to add structure and style to their sites and get them up and running quickly. Bootstrap isn’t just for startups or minimum viable products, although it works well for both — it’s also for established companies who want a common framework to standardize the front end of their website.

If you’re on the fence about whether or not Bootstrap is right for you, here are a few reasons why Bootstrap can help rocket your site to the next level.

1. The Most Popular Framework

Bootstrap has been around since 2011 and is the most popular HTML, CSS, and JavaScript framework. What jQuery is for JavaScript, Bootstrap is for the entire front end. With its popularity comes a battle-tested framework that works well in so many more browsers than you’ll probably ever want to test in.

2. A Quick Start

After downloading the framework, there are a bunch of examples on the Bootstrap web page with code you can use right now to get your site started. Want a blog layout? Use Bootstrap’s as a starting point and build on it. What about a sign-in page? Bootstrap has you covered.

3. Structure your Site using Grid System

When starting a new site from scratch, one of the first things I always have to do is plan out my main areas of the site, then decide which are going to float in which direction, how wide each one will be, and eventually get it just right. Even then it probably only looks good in one resolution.

Bootstrap cuts the entire CSS part out of the process and allows you to leverage their grid system, a 12-column format that makes structuring your page easy without needing to know about floats or the oddities therein. Once you understand the basics of Bootstrap’s grid system, it’s no trouble to customize your site to look just how you want it to on tablets or phones.

4. A Standard for the Team

When working on a team, setting standards helps your code base grow and get new developers up to speed fast. At Code School, we use MVCSS for organizing our CSS, which provides a formal standard for all the sites we build. A standard — any standard — is an amazing step toward making collaboration easy and reducing friction. Bootstrap won’t help you organize your non-Bootstrap code, but it will minimize the amount you write, leaving you more time to figure this out. It also covers a number of core parts you would otherwise need to develop your own team standard to follow.

5. Use JavaScript Plugins Without Writing JavaScript

Writing JavaScript can be a little daunting if you’ve never tried it. Bootstrap is a good intermediate step that allows you to use quite a few useful Bootstrap JavaScript plugins without writing any JavaScript. It builds on jQuery as well, so if you want to jump in and write some JavaScript, you’ll have the most popular JavaScript framework at your disposal (and a great, free Code School course in Try jQuery to help you out).

Let’s say you wanted to use Bootstrap’s dropdown plugin, like we use for the “About” link in our demo site. If you wanted to do it using JavaScript, it might look a little something like this:

<a href='/about' class='dropdown-toggle'>About <span class='caret'></span></a>
<script type='text/javascript'>
$(function() {
  $('a').on('click', function(event){
    event.preventDefault();
    $(this).parent().toggleClass('open');
  });
});
</script>

In order to understand this little bit of JavaScript, there’s a lot you need to know! If you’re fluent in jQuery, this code might not be too daunting, but it’s still a lot more work than the alternative. Bootstrap makes this process a little easier by letting you achieve this same functionality by only editing HTML:

<a href='/about' class='dropdown-toggle' data-target='#' data-toggle='dropdown'>About <span class='caret'></span></a>

This code will accomplish the same thing — but look how much easier it is to write and maintain! Bootstrap has a bunch of similar plugins and classes that reduce code down to almost nothing.

Blast Off Today

If you’re looking to learn Bootstrap, get started today with Code School’s latest Bootstrap course, Blasting Off With Bootstrap! With 5 levels and 8 videos, this course covers everything you need to get started learning Bootstrap, or learn some helpful ways to use Bootstrap that you might not even know are possible. Let us know how you’ve used Bootstrap and what you think of the course in the comments below!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Adam Fortuna

Adam works on courses at Code School, usually jumping between JavaScript and Ruby. When not looking for new ways to teach topics, he spends his days playing board games and listening to way too many SciFi audiobooks.

Might We Suggest