How to Look Good with Bootstrap

Learn the fundamentals of bootstrap in 5 minutes.

Read the article or watch the video!

Let’s talk about Bootstrap. Bootstrap is a HTML, CSS, and JavaScript framework that helps developers make responsive websites. A website is responsive if everything is still accessible (and looks good!) when the size of the window or screen changes. Opening two Apple webpages, if one window at near full-screen and another is shrunk to a mobile-size screen, both windows still look good. By “looking good,” we mean that the elements of the website get smaller as the window size shrinks and the user can still access everything on the page. This functionality is what we want in our websites.

To incorporate Bootstrap into an application, there are two things we can do. We could either import bootstrap into our code or download a sample project. For this tutorial, we’ll take the code we created in the CSS in 5 tutorial and just import the Bootstrap framework. To import Bootstrap, we can either download the framework and link it locally to our code or just link it from the internet. We’ll link it from the internet for now and it’s going to look a lot like how we linked our CSS. Going to the Bootstrap website….

We can click Download Bootstrap and scroll down…

Here, we’ll see the link we need to add to our code from last time. So we’ll copy and paste this link tag and put it right in our index.html. This connects the Bootstrap framework and our HTML code.

Now if we save and refresh our page, notice our styling changed a bit. That’s because Bootstrap already has some CSS built-in that makes the headers and text look a bit different. If we wanted to, we could overwrite whatever CSS Bootstrap has in our own custom CSS using the !important rule.

Now, the thing that makes Bootstrap responsive is its 12-column grid. Here’s the documentation from the website, but this might be a bit confusing at first so let’s look at a picture I found here.

Bootstrap divides a webpage into rows and columns. Each row is divided into 12 columns and an element (say a paragraph or an image or a header) can take up any number of these columns. You can also have multiple elements on one row. An element could take up all twelve columns or just the three on the right or whatever. Now, no matter what the screen size — the screen is broken up into 12 columns so I can specify how many columns I want for each element on a small, medium, large, and extra-large screen. I can also say that I just want it to take up 6 columns on a medium screen and it will resize itself appropriately for smaller and larger screens. This may be confusing, but don’t worry — we are going to mess with it ourselves. Let’s say I want two different headers on the same row each taking up half of the screen and a button underneath the second header. We’d have one row and each header would take up 6 of the 12 columns. In code, we would first create the row for our content, making a div with the class row.

Row is a class built into the Bootstrap framework so we won’t even need to add the class row to our CSS. Now, we can put our two columns inside of the row. We’ll say col because it’s a column, md for a medium size device, and 6 for 6 columns. Again — the CSS for this class is already built into Bootstrap.

Next, we’ll add our two headers, one in each of the columns, and they will be the same size and spaced equally in the same row because we set the class of column to be col-md-6.

If open two webpages (one small sized and another medium sized) with this code, our headers can be seen no matter what the screen size is and Bootstrap adjusts the size and spacing of the headers automatically.

Now we just need our button under the second header. What if you don’t know how to add a button? Well we will google button Bootstrap….

Then, click the first link and copy and paste what is there. The button tag is just a tag in HTML, but the classes (btn and btn-primary) from Bootstrap are going to make our button look awesome.

We just need to add this button to our second column underneath the header and we’ll be good to go.

Refreshing the page, we should see …

There are lots of other classes like form and jumbotron already built into Bootstrap so you don’t have to create everything from scratch. Google will definitely be your friend with this type of stuff.

Another option from what we just did is to download a sample template and change the text, fonts, and formatting to something you like. So we if go and google Bootstrap templates…

Click on the first link…

Find a template and download it…

We can work with it! Opening the template in Sublime…

We will see that there’s a lot that’s familiar code here. The index.html file is where all of our core HTML code will be — from there we’ll find out where the CSS, Bootstrap, JavaScript, etc is. The img folder is where our images are and the vendor folder holds our Bootstrap, which is downloaded locally. In the index.html, we link the Bootstrap from our vendor folder (different from before when we linked it from the internet). We also see our CSS here is linked from our CSS folder and as we scroll down, you’ll see that a lot of this looks pretty familiar.

Here, still in our index.html, we have a col-md-4 class with an i tag (which means icon) and several fa classes, which create a circle shopping cart icon from something called font-awesome also linked in this project.

If we open the webpage, we see the shopping cart icon right here — and it makes sense that the element took up 4 columns in the code because it takes up a third of the screen, given that there are a total of 12 columns. In the next tutorial, I’ll show you how to use the developer tools in Google Chrome that make creating and editing webpages easier. See you then.

Things to Remember:

<!-- Rows -->
<div class="row"></div>
<!-- Columns in Rows -->
<div class="row">
	<div class="col-md-4">
	</div>
	<div class="col-md-4">
	</div>
	<div class="col-md-4">
	</div>
	<!-- col-screenSizeCode-numberOfColumns -->
	<!-- The number of columns in a given row should add up to 12-->
</div>
<!-- Font-Awesome Icons -->
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<!-- Must have the Font-Awesome link tag to use these! -->
<!-- More icons can be found on the Bootstrap website! -->

Plus a Little Extra:

<!-- Bootstrap Icons -->
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<!-- Must have the Bootstrap link tag to use these! -->
<!-- More icons can be found on the Bootstrap website! -->
<!-- Bootstrap Forms -->
<form role="form">
	<div class="form-group">
    	<label for="email">Email address:</label>
    	<input type="email" class="form-control" id="email">
  	</div>
  	<div class="form-group">
    	<label for="pwd">Password:</label>
    	<input type="password" class="form-control" id="pwd">
  	</div>
  	<div class="checkbox">
    <label><input type="checkbox">Remember me</label>
  	</div>
</form>

Code from this blog post