These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
Bootstrap can either be a huge time saver or a blood pressure raiser, depending on how you approach it. The key to ensuring that your experience is the former is to take the time to understand how the grid system is put together and to stop fighting the framework.
In this lesson, you'll start by diving into the Bootstrap documentation. It's some of the best on the web, so consider this a soft introduction to the art of reading "docs" (which will come up frequently as we go along in the course).
We'll then highlight some of the key things you should understand and some tips for not driving yourself crazy when working with Bootstrap. Our goal for this lesson is that you come away with a good conceptual understanding of how Bootstrap works and some excitement to apply it to the upcoming project.
The folks at Twitter have compiled an extensive set of documentation. It's very much learn-by-example -- they show you a widget and then the markup which produced it. When you first start out, you'll find yourself doing a lot of copy-pasting from these examples before you really get a handle on what's going on.
You'll also find a starter template and a number of example pages designed to show off some of Bootstrap's features. Simply visit the pages and View Source (or use your developer tools) to see how they apply the Bootstrap styles. You can then copy them to your heart's content.
Note: All the extra comments in the template above are to activate some additional fallbacks when using older browsers with poor support for new features.
The best way to start thinking about Bootstrap is to browse through its documentation. You probably won't find better documentation for any project on the web, so have at it!
If you learned nothing else from the documentation above, you should at least have a good handle on how the grid system works and how it changes on different screen sizes. The rest will come.
The most important part of this is understanding that your bootstrap pages will always have the following pattern:
<div class="container">
to wrap everything<div class="row">
to start a new row<div class="col-md-8 col-offset-2">
or some other arrangement of columns within the row
.This is important because, if you skip the container
or row
, your margins will get messed up. Bootstrap uses both positive and negative margins to achieve the nice neat rows you see in the final result. See the diagram below for a look at how that is put together:
As you can see, the container
pushes its contents in by a 15px padding. This is good because you always want a bit of buffer between the edge of your screen and the beginning of your content. The container
class also dictates the CSS of the row
and col-*
classes inside of it, so your page won't look right if you omit it.
Then each row
actually uses a negative margin of 15px to set everything back to even. This may seem odd but a row
will never be used on its own. That's just setting up the columns
to do their magic.
Each col-*
then adds back a 15px padding so we're back to the original 15px indent. This is important because you can have multiple columns side-by-side, which creates the desired 30px "gutters" between them. We only want a 15px gutter on each side of the screen, which is why the row
pulled it back for us.
You can, of course, nest multiple row
/col
groupings within other columns. Don't be afraid of your HTML markup looking like a giant nested Christmas tree for now! Just remember that a col-*
should always be directly inside of a row
and you'll be just fine.
If you're still having trouble with this, read The Subtle Magic Behind Bootstrap 3's Grid
What's the difference between a col-md-8
and a col-xs-8
? The sizing system determines which screen width will trigger the specified column arrangement. If you've used col-md-8
, the column will only show up on screens equal to or larger than the "medium" width.
The different sizings are as follows:
// Extra small devices (phones, less than 768px)
// No media query since this is the default in Bootstrap
<div class="col-xs-10">
// Small devices (tablets, 768px and up)
<div class="col-sm-10">
// Medium devices (desktops, 992px and up)
<div class="col-md-10">
// Large devices (large desktops, 1200px and up)
<div class="col-lg-10">
This actually matters a lot when you're trying to make a site look decent across a variety of different widths. You'll often find yourself building a Bootstrap site on the desktop and then, upon resizing the screen smaller to simulate a mobile device, realize that your text squeezes into really strange places.
There's an easy rule of thumb here:
When in doubt, use Small (sm)
There's no real science to this rule, but it means that your page will look as intended on all devices > 768px wide and then your columns will become full-width on anything smaller. Usually that's a reasonable place to start. You can always modify the sizing (e.g. to col-md-8
) or add additional classes (e.g. col-sm-10 col-offset-1 col-md-8 col-offset-2
) as necessary.
Here are a few things to understand about working with Bootstrap before you start using it in the projects. It may seem a bit abstract now, but you'll see...
If you go with the flow and embrace Bootstrap, your productivity will skyrocket. If you try to fight it, you will be crushed mercilessly. Do not fight Bootstrap!!! We mean it -- surrender completely. You need to fully understand the beast before you can fight it...
What this means from a practical standpoint is that you should try to build your pages at first using 100% Bootstrap classes before even thinking about adding any additional CSS of your own. Accepting this will take you far.
Once you've done as much as you can with the standard Bootstrap classes, then you can work around it. This is important because Bootstrap styles are highly specific (in CSS terms). That means you need to be very targeted with your selectors in order to override them, which becomes a recipe for messy code.
The easiest way to "override" bootstrap styles is not to do so. What we mean is that, instead of trying to fight the margin of a col-md-4
, you should just enclose that <div>
in another <div>
with a class of your own. Then add CSS styles to that. For instance, in the example below you could use the info-panel
class to push around the two columns within it:
...
<div class="row">
<div class="info-panel">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
<div class="col-sm-4">
...
</div>
</div>
...
If you must actively override certain Bootstrap styles (like the stylings of their buttons), you'll need to make sure that your new styles are specific enough to override Bootstrap's. You can tell this by checking in your developer tools and seeing which styles are actually being applied.
The best way to get specific enough to have a parent element somewhere in your markup which uses an ID (since Bootstrap is all classes and IDs are more specific) and then benchmarking off there, for instance:
<div id="side-panel" class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary my-button">
</button>
...
</div>
</div>
</div>
Then you can override it more easily using CSS (here we uses SASS nesting for convenience):
/* Nice and specific with an ID! */
#side-panel{
.my-button{
// override styles here
}
}
If you're already familiar with Bootstrap or have a solid handle on it, browse through the Resources tab to see how it can be combined with the HTML5 semantic tags we covered previously.
The important bits of code from this lesson
# Standard markup hierarchy
<div class="container">
<div class="row">
<div class="col-sm-8 col-offset-2">
...
</div>
</div>
</div>
# Div that gets narrower as the screen gets wider
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">...</div>
Now that you've seen what Bootstrap can do by viewing their examples and how Bootstrap does it by reading their documentation, you're on the right track. You certainly haven't memorized any of the widgets but you should have a good handle on how the grid system works and some best practices for working with it.
Now, the only thing left to do is build! Luckily, the next assignment will have you do exactly that.