Welcome to the Basic Prep!
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.
Introduction to Twitter Bootstrap
Introducing the fastest and most popular way to produce good-looking front end sites.
Scroll down...
You've already learned about how Pattern Libraries save lots of time by packaging re-usable CSS widgets and how Style Guides can help keep your code well organized and professional. In the prep work, you learned about how using graphic design grid systems can make laying out websites much simpler.
Twitter's Bootstrap framework takes all those things and combines them into one awesome package that will get you building professional-quality websites fast. It combines good-looking styling and responsiveness with markup that generally encourages best-practices.
It's hard to measure how much time you can save by kick-starting the front end for your projects with Bootstrap. In fact, Bootstrap is so popular that you'll start seeing it everywhere on the web once you become familiar with its patterns.
In this lesson, you'll learn all about the Bootstrap framework and how to enable your projects to use it. In the next lesson, we'll dig into how you can actually use it to help build webpages. Pay attention and try to really understand what's going on -- you're going to use Bootstrap extensively during upcoming units.
What is Bootstrap?
Bootstrap could be called many things, but the most apt is probably an "HTML, CSS and JavaScript Framework". It prescribes a set of best practices for organizing your markup into a grid-based layout and gives you a full library of helpful widgets and features to implement within that grid.
These features aren't just static... they are supported by JavaScript to enable helpful UI animations and transitions. Bootstrap even includes an icon font called Glyphicons that you can use to easily add standard icons to your projects.
Where Did Bootstrap Come From?
Like many existing web development frameworks, the engineers at Twitter created it as an internal tool and then decided to open-source it for everyone else to use. In this case, the engineers were re-using widgets and styles so much that they codified them into a formal framework.
We're now on the third iteration of Bootstrap (version 4 coming really soon) and it's taken on a life of its own. Their project documentation is superb and it's incredibly easy to learn how to use Bootstrap.
How Bootstrap Works
Bootstrap is just a big library of CSS styles and some JavaScript to make certain elements dynamic. To utilize these styles all you have to do is apply the right classes to your HTML elements and it automatically activates Bootstrap. The learning curve for Bootstrap just involves absorbing how they like to structure their HTML and remembering some of the class names.
You don't even need to memorize much -- their website is so comprehensive and good that you can just browse through it to find whatever specific widget you're trying to set up, whether that's a blue medium-sized button...
... or a good-looking submission form...
... or different stylings for images:
It's all there, and now you know where to find it!
"Installing" Bootstrap
Bootstrap is essentially just a big CSS file, a big JavaScript file, and then some font files to support them. You can download the Less (similar to SASS) source code which originally generated these files, but there's absolutely no reason to do that.
If you want to get Bootstrap up and running on one of your projects, you have 2 good options:
Option 1: The Easy Way (download)
You can download the source code from their website. Choose the leftmost option ("Bootsrap" and NOT "Source code" or "Sass"). It will give you a zip archive with the necessary files. Just include those CSS and JS files in your project as you normally would.
If you're insanely curious, you can check out the Sass version of their source code to see how it's put together.
Option 2: The Easier Way (import)
If you don't feel like downloading Bootstrap, they've generously offered to serve it to you directly from their CDN servers for free. Just include the following two links in your <head> tag and, PRESTO! You've got Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
This is especially handy if you're just building toy projects and don't need the control of serving your own CSS or JavaScript.
One Last Thing: jQuery
You also need to include jQuery in your project to get Bootstrap working. jQuery is the most popular JavaScript library out there. It's also incredibly easy to include with your projects. Just put this line in your <head> tag to grab jQuery from Google's servers:
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
...
</head>
Put jQuery ABOVE Bootstrap in your file!
You can also easily download jQuery from their website and include it directly in your project like any other CSS file if you won't have access to an internet connection while developing.
What You're Actually Downloading
If you choose to actually download the bootstrap .zip archive, this is what it contains:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
There you go -- a bunch of CSS, JS and font files, most of which you can safely ignore. The only two that you will care about at first are bootstrap.css and bootstrap.js.
The .min files are just minified, meaning their whitespace has been removed and names have been shortened in order to reduce file size when sending to a browser. These minified files are the ones you'd typically serve with your projects (especially from a production environment) but they aren't human readable. When you're developing locally, help your sanity and just use the normal versions.
The bootstrap-theme CSS file just adds some additional styles, for instance, to make the existing buttons look more 3-d with gradients. Ignore this for now.
Want Help?
Check out the Getting Started section for complete documentation on how to get started with the framework.
Code Review
The important bits of code from this lesson
# Importing jQuery + Bootstrap files from the CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Wrapping Up
Hopefully, this brief introduction whetted your appetite to start working with Bootstrap. In the next lesson, we'll dig into the nuts and bolts of how it's put together and how you can use it most effectively in your own projects.
- Frameworks for Designers from A List Apart
- Building Twitter Bootstrap