Bootstrap is really two things:
<link href="https://firstname.lastname@example.org/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://email@example.com/dist/js/bootstrap.bundle.min.js"></script>
By now you know that you can style your webpage using CSS. You create a
.css file that contains style rules, and then you use those style rules by setting the
class attributes of your html elements.
Bootstrap provides a
.css file with a bunch of style rules that you can use to style your webpage.
For example, look at this page that contains unstyled content:
I’ve set the
class attribute of some of these elements, but I haven’t written any styles for those classes, so everything has the default styling. At this point I could write a
.css file that styles the content. Or I could use the
.css file that Bootstrap provides!
The payoff is I get a reasonably nice-looking webpage, without needing to write any CSS myself.
Let’s start with the HTML, without loading Bootstrap:
This HTML contains a
<div class="dropdown"> element, which contains a
<button> and a
<ul> list. Without Bootstrap, those elements are not interactive, and certainly don’t show a dropdown.
But if you add Bootstrap:
<button> to toggle the visibility of the list when it’s clicked.
The Bootstrap documentation contains a bunch of example components (like the dropdown from above) that you can use. If you’re interested in using Bootstrap, this page should be your first stop. I recommend reading through that whole thing at least once, and then going back to it later when you need a specific component.
W3Schools also has a good section of Bootstrap examples. And of course search engines are always your best friend.
Here are a couple examples of the most common Bootstrap components:
container class lets the content in your website “snap” to certain widths depending on the device you’re using and the width of the window.
Here’s an example:
Try opening this code up in its own window and then changing the width of the window to see the container “snap” to different widths. This lets you create a responsive webpage without worrying about any styling yourself.
To create a navigation bar, you can use a
<nav> tag with the
navbar class, then a
<ul> tag with the
(The navigation bar is automatically turned into a vertical menu if it doesn’t have enough width, so try opening this in a new window.)
From here you can do fancier things like putting different types of components inside your nav, or changing how your navigation works on mobile devices. Check out Bootstrap’s documentation for more info!
Bootstrap contains a grid layout system that lets you organize your content using the
By default, each row takes up 100% of the container width, and then each column in a row takes up an equal share of the row’s width.
Here’s an example with four rows, each with a different number of columns.
Within each row, each column takes up an equal share of the available width.
Bootstrap divides each row into 12 “template columns”, and by default, the
col class will take up an equal share of those 12 template columns. But you can change that by using the
col-N classes, where
N is a number between
12. Here’s an example:
Now each row has columns that take up different amounts of template columns. Here are a couple things to notice:
You can use Bootstrap’s grid layout to organize your page into sections. Here’s an example:
This page splits the page up into three columns: one for the left nav, one for the main content, and another for the right nav.
Check out Bootstrap’s grid documentation for other examples, including using different layouts on different screen sizes.
As you’ve seen, Bootstrap provides its own CSS styles. But you aren’t stuck with the default styles that Bootstrap provides.
You can add your own CSS rules for any Bootstrap class to create your own custom style. Keep in mind the cascading part of CSS, which means that your styles will be combined with the styles from the main Bootstrap CSS.
This example uses Bootstrap for most of the styling, but adds some custom styling in its own
<style> tag. These styles then cascade on top of Bootstrap’s styles to create the end result.
This gives you the best of both worlds: you get to use all of the styles from Bootstrap, but you still get to customize your site with whatever styles you want.
Another feature of Bootstrap is the availability of themes, which are alternative CSS files that style Bootstrap’s classes.
To use a theme, instead of loading Bootstrap’s default
.css file, you load a different
.css file that define styles for Bootstrap’s classes. These files are called Bootstrap themes, but really they’re regular
Here’s an example page that uses Bootstrap’s default styles, aka the default theme:
And here is that same page using the Cyborg Theme from Bootswatch:
Notice that the only thing that really changed is the
.css file that’s loaded in the
<head> section. This
.css file defines all of the classes that Bootstrap uses, but with different styles than the default
.css file. You can download the
.css file or view it in your browser here: https://bootswatch.com/5/cyborg/bootstrap.css
Try doing a search in that file for the
card class to see the styles on it.
I originally wrote this tutorial back in January of 2017. Back then, I was personally using Bootstrap to style Happy Coding. But since then, I’ve grown to prefer writing my own CSS. A little CSS goes a long way (warning: that page contains swears), without needing to rely on Bootstrap!
Even though I don’t really use Bootstrap myself anymore, I’ve decided to keep this tutorial up (and to continue teaching Bootstrap) for a couple reasons:
Second, and most importantly, I wanted to introduce the concept of using a frontend framework. There are a ton of frameworks out there, and Bootstrap is just one of them. So more important than using Bootstrap specifically, I wanted to show you the more general process of using a framework, consulting documentation, and trying things out. If you continue learning more about web development, you’ll almost certainly encounter other frameworks along the way, and hopefully being exposed to Bootstrap will make them a little easier to understand.
All of that said, you shouldn’t feel like you need to use Bootstrap to create a webpage!
Use Bootstrap to style your personal webpage.
Use Bootstrap themes to style your personal webpage.
Add your own example to Happy Coding.
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!
Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!