Bootstrap Basics: What is Bootstrap?
For this tutorial, I’d like to walk you through the process of obtaining Bootstrap, putting everything where it needs to be, and going through a small, very basic example homepage.
Where to Begin
First and foremost, you’ll need somewhere to set up your project. Luckily, Bootstrap is all HTML, JavaScript, and CSS, so for strictly getting acquainted with the framework, a local directory on your personal computer should suffice. I usually like to do my development on some sort of Linux virtual machine or my own web server. However, when it inevitably becomes time to bring in help, your client gets curious, or when you’re making those last minute changes in preparation to go live, it is usually a good idea to move the site somewhere more widely accessible. For this purpose, low- to medium-cost shared hosting should serve this purpose quite well, and is very easy to find and set up. If you’re feeling overwhelmed with the choices available or just need a place to start, check this enormous list for in-depth comparisons of a ton of hosting providers you might want to consider.
After you’ve gotten yourself situated, it’s time to download Bootstrap. Visit http://twitter.github.io/bootstrap/ and click the big blue button that says ‘Download Bootstrap’. Save and extract the resulting ZIP archive in your project directory.
A Test Page
To actually use Bootstrap in your pages, a small bit of setup needs to be done. Start by creating the following as index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h3>This is a test</h3>
</div>
</body>
</html>
If you open this file in your web browser, you should get something similar to this:
Navigation Menu Bar
Not much, but it’s a start. Next, we’ll create a header and menubar. Add the following to the very top of <body>:
<div class="navbar navbar-fixed-top navbar-inverse" id="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Foobar</a>
</div>
</div>
</div>
And this to the very bottom, before the closing tag:
<script type="text/javascript" src="//code.jquery.com/jquery.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
You might notice that the text from before has disappeared behind the navbar. To fix this, simply add the following inside a <style> after inclusion of bootstrap.min.css:
<style type="text/css">
body {
padding-top: 60px;
}
</style>
Now, you should have a something like this:
Adding Content
To populate the page with content, place the content area inside a <div class=”container”>. As an example, let’s add a callout area and a few informational content areas underneath. First, create a div with class ‘hero-unit’. The callout message will be contained within. Add an <h1> with some appropriately attention-grabbing text and a <p> for a few details right after it. Finally, add an <a class=”btn btn-primary btn-large”> for your ‘Learn More’ button:
<div class="container">
<div class="hero-unit">
<h1>It's Bootstrap!</h1>
<p>
Bootstrap is a frontend web framework that makes
designing websites simple, easy, and fun!
</p>
<a href="http://twitter.github.com/bootstrap/" class="btn btn-primary btn-large">
Learn More
</a>
</div>
</div>
This should get you this:
You might notice that in my tiny screenshot, my content has been cut off quite a bit. Thankfully, you don’t have to worry about this, as Bootstrap includes a stylesheet that can be used to instantly make this site responsive and handle different window sizes correctly. To use it, simply add
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> at the top of <head> and include the bootstrap-responsive.min.css stylesheet after the other stylesheet and content padding fix. Now, your page should look like this:
Finally, let’s add a line or two of content under the message and a footer for good measure. Add the following after the close of the hero-unit div but before the <script>s:
And of course, this is some more content.
</div>
<hr />
<footer>
© 2013 Bar Baz
</footer>
As you can see, in about ten minutes a simple homepage has been constructed. No manual styling was done (besides the small fix above); we were able to focus on the content and with a reasonably small amount of effort create a simple yet attractive webpage.
Adding Navigation Items
As a final touch, let’s put this navbar to use. We start by adding a few menu items, which is simply a matter of enclosing them in a <ul class=”nav”> right after the site name:
<ul class="nav">
<li id="home"><a href="/bootstrap-tutorial/">Home</a></li>
<li id="about"><a href="#">About Us</a></li>
</ul>
It might also be a good idea for the smaller screen widths to make this menu a dropdown. With a carefully crafted button and by enclosing the menu items in one more <div>, we can make that happen:
<button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Foobar</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li id="home"><a href="/bootstrap-tutorial/">Home</a></li>
<li id="about"><a href="#">About Us</a></li>
</ul>
</div>
(It might seem a bit weird to write, but data-toggle and data-target are simply custom attributes that point Bootstrap’s collapse library in the right direction. The <spans> inside the button are also a nice part of Bootstrap; the framework comes with a ton of ready-to-use icons accessible by classes. In this case, three icon-bars stacked vertically form a menu-looking icon for the button). Save that and take a look at your webpage, which should now, thanks to bootstrap-responsive, include fancy new dropdown navigation when necessary:
Here is the full source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" />
<title>Bootstrap Tutorial</title>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" id="navbar">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Foobar</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li id="home"><a href="/bootstrap-tutorial/">Home</a></li>
<li id="about"><a href="#">About Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1>It's Bootstrap!</h1>
<p>
Bootstrap is a frontend web framework that makes
designing websites simple, easy, and fun!
</p>
<a href="http://twitter.github.com/bootstrap/" class="btn btn-primary btn-large">
Learn More
</a>
</div>
And of course, this is some more content.
</div>
<hr />
<footer>
© 2013 Bar Baz
</footer>
<script type="text/javascript" src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Closing
Well, that just about does it. While admittedly simple, I do hope that there was even a tiny bit of knowledge gained from reading this tutorial. At the very least I would have liked to have piqued a bit of interest. Bootstrap is an incredibly easy-to-use but powerful framework that is best learnt through experiencing it. I highly encourage you to take a look at what you have at your disposal right after installing Bootstrap, including ready-to-use elements from tables to forms to icons to buttons and many, many more. You should also check out plugins that extend it, the examples available on the site, and some of what’s been done with it in the real world (even not considering Twitter you’ve probably already come across Bootstrap without even knowing it).
Leave a Reply