Call Us Today!

Blog

bootstrap

Responsive Design 102: Bootstrap

Now that you understand the basics of responsive web design, we’re ready to jump into the details. There are three major tools that all web developers need to learn in order to create world-class responsive websites: Twitter’s “Bootstrap” framework, CSS @media queries, and Google Chrome’s Developer Tools. This tutorial will get you started with Bootstrap. Next week’s article will introduce you to @media queries and the responsiveness-testing features of Google Chrome’s Dev Tools.

WHY USE BOOTSTRAP?

Bootstrap makes responsive design much easier, by using some of Twitter’s open-sourced code libraries.

BOOTSTRAP BASICS

Learning the basics of Bootstrap can take hours; mastering it can take days, weeks, or even months, depending on how much time you dedicate to it. Due to the broad scope of Bootstrap’s features, this blog post can only serve as an introduction to what it is and what it does, so that you’ll be prepared to learn more about it on your own. Here are the basics of what you need to know about Bootstrap:

  1. Bootstrap is the most popular “front-end framework” in the world, and the second-most starred project on all of GitHub.
  2. As a “front-end framework,” Bootstrap is basically a collection of code that was written & open-sourced by some of the developers at Twitter, that you can use to perform a wide variety of different functions. Without Bootstrap, you’d have to write all the code for these functions yourself, but by linking your website to Bootstrap’s code library, you can do it much faster.
  3. Bootstrap’s code library can make it easier to create all kinds of responsive elements, including buttons, glyphicons, forms, tabs, navigation, panels, pop-ups, sliders, labels, headers, thumbnails, and more. However, its main purpose, or at least the main function that we will be focusing on, is its ability to create a responsive “grid system” for your website.

HOW TO CONNECT TO BOOTSTRAP’S CODE LIBRARY

Before we get to the grid system, you need to connect to Bootstrap’s code library. You can do this either by downloading it as a file from getbootstrap.com, or just linking to the CDN that’s available at getbootstrap.com/getting-started.

In order to connect your HTML document with the Bootstrap code, you’ll need to put a <link> in the <head> section of your HTML document. For example, if you’re linking to Bootstrap’s online library, you’ll go to getbootstrap.com/getting-started and copy/paste something that looks like

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=”anonymous”>

into your HTML document’s <head> section. This code tells the browser, as it begins to read your HTML document, that it needs to download Bootstrap’s CSS file, and use it as a stylesheet.

If you want to make use of Bootstrap’s JavaScript functions as well, you’ll want to paste something that looks like

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” integrity=”sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=”anonymous”></script>

at the end of your <body> section as well.

The quickest way to do all of this is to simply copy/paste the “basic template” code from getbootstrap.com/getting-started into your text-editor of choice (if you don’t have one, try the free trial version of Sublime Text to get started), and then save that document as, let’s say, “testingBootstrap.html” (or whateverNameYouWant.html) on your desktop. That will save it as an HTML file that you can then double-click to open and play with in your browser. If you can’t find the code on the getbootstrap website, you can copy/paste the code below:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>
<title>Bootstrap 101 Template</title>

<!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<![endif]–>
</head>
<body>
<h1>Hello, world!</h1>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>

Please note that if you want to use the online Bootstrap CDN instead of downloading the CSS file, you’ll need to replace the <link href=”css/bootstrap.min.css” rel=”stylesheet”> with   something like: <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=”anonymous”> . The same goes for the <script src=”js/bootstrap.min.js”></script> (which would need to be replaced with <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” integrity=”sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=”anonymous”></script> at the bottom of the <body> section.

BOOTSTRAP’S RESPONSIVE GRID SYSTEM

bootstrap responsive grid

The basic idea behind Bootstrap’s responsive (aka “fluid”) grid system is that it allows you to create fully responsive layouts by putting content into rows and columns that change based on the size of the browser window.

For example, imagine you have 20 images that you want to display on your home page. On a large screen, it might look good to display those images in rows of four (like on the desktop monitor in the illustration above). However, this same layout on an iPhone would look terrible (especially when holding the phone in portrait mode); four images side-by-side on a narrow screen like that would force the images to be extremely small, and you would barely be able to see any of the details in your beautiful photos. What Bootstrap’s fluid grid allows you to do is to label your images in a way that tells the browser to display them in (for example) rows of four on a large screen, rows of three on a medium screen, rows of two on a small screen, and rows of one on an extra-small screen. To get a sense for how this works, copy/paste the following code sample into the <body> section of your HTML document:

<div class=”container”>
<div class=”row”>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″>
<img src=”https://fvi.edu/wp-content/uploads/2016/07/cat.jpg”>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″>
<img src=”https://fvi.edu/wp-content/uploads/2016/07/cat.jpg”>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″>
<img src=”https://fvi.edu/wp-content/uploads/2016/07/cat.jpg”>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″>
<img src=”https://fvi.edu/wp-content/uploads/2016/07/cat.jpg”>
</div>
</div>
</div>

Now save your document, and double-click to open it in your browser (or if it’s already open in your browser, just refresh the page).

If you’ve set up your HTML document correctly, you should see four cat memes on your screen. If you’re looking at it on a large screen, your browser will display four cats in a row, but if you’re looking at it on a smaller screen, you might see only 3, 2, or even just 1 cat in each row. This is because the col-lg-3 class (which has been applied to the <divs> containing each photo) are active when the screen is lg (or large), the col-md-4 class is active when the screen is medium, the col-sm-6 class is active when the screen is small, and the col-xs-12 class is active when the screen is extra small. The number at the end of each class defines how many columns of Bootstrap’s grid that particular <div> takes up. When the screen is large, and col-lg-3 is activated, each div with the col-lg-3 class takes up 3 of Bootstrap’s 12 invisible columns. This is an important point to understand: Bootstrap gives you 12 invisible columns to work with, that span the width of the browser window. If your <div> takes up 3 of those columns, it takes up 1/4 of the total width of the window, meaning you can fit 4 <divs> in each row. This is what col-lg-3 means; if the screen is large, then this <div> will take up only 3 of the columns, and thus there can be 4 such <divs> in this row.

Now, if you make your browser window smaller, then the div class “col-md-4” will be activated, meaning that at this md or medium screen size, each photo takes up 4 of Bootstrap’s 12 columns (meaning you’ll see 3 cats in each row). If you continue to make your browser window smaller, you’ll activate the col-sm-6 class (small size screen, where each photo takes up 6 of Bootstrap’s 12 columns), and col-xs-12 (extra small screen size, where each photo takes up all 12 of Bootstrap’s columns, and thus takes up the entire width of the screen).

Bootstrap has a lot to offer, and a full exploration is far beyond the scope of this article. If you want to really dig into and master Twitter’s Bootstrap framework, check out this 18-Part Video Tutorial on YouTube.

Join us next week for our final article in this series, Responsive Design 103: CSS Media Queries & Google Chrome Tools!

 

RESOURCES: Download Bootstrap | 18-Part Video Tutorial

ALTERNATIVES TO BOOTSTRAP: Foundation | Materialize | More Alternatives

 

No Waiting list! Start your journey today!

FVI School of Nursing and Technology has NO waiting list and three start dates a year so you can begin nursing school when you're ready

Schedule a Career Planning Session

  • By clicking "Request Info", you agree for FVI School of Nursing and Technology to contact you using our autodialer, text, pre-recorded message, via telephone or mobile device (including SMS and MMS) and email, even if your number is currently listed on any state, federal or corporate "Do Not Call list".