Bootstrap Tutorial: Quick Introduction
Note: This tutorial is a crash-course, designed to get you quickly going. Links to more in-depth tutorials will be provided at the bottom. To get the most from this tutorial, I recommend opening up this online-text editor in another tab, so you can copy and paste the code snippets below to see how they render.
Now, Bootstrap is a frontend framework that helps you to quickly build responsive websites. It has plenty of pre-built features like navbars, forms, buttons, and etc. that you can pick and choose to add to your website by just copying and pasting the code, then customizing the font and etc. as you wish.
Bootstrap is one of the most popular frontend frameworks for designing websites because it’s easy for anyone with basic HTML/CSS and JavaScript knowledge to get started; it’s mobile-first and responsive design makes sure it’s functional across devices of all sizes, and it’s compatible across all modern browsers (Chrome, Safari, Internet Explorer, etc.).
To get started with Bootstrap, gain familiarity with HTML and CSS (I recommend THIS tutorial), and then include the following links in the head element of your HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Pulls in Bootstrap's CSS library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Includes jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Pulls in Bootstrap's prebuilt JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
<body> </body>
</html>
The first <link> element contains Bootstrap’s CSS library, that allows us to use BootStrap’s classes in our webpage. The first <script> element pulls in the jQuery library in order to use Bootstrap’s pre-built JavaScript functionality, included in the last <script> element.
How does Bootstrap work? It uses pre-defined CSS classes to design the layout of your webpage and adds interactivity via JavaScript. By simply defining the “class” attribute on an element, Bootstrap applies styling and interactivity to that element.
Bootstrap uses a 12-column grid system that’s responsive, meaning it automatically rearranges when the screen size changes.
The * in the (.col-*-12) image above is a placeholder for whatever type of device you want to create your layout for. Bootstrap has four classes for different devices in its grid system:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
So, for a phone, a full-width column class would be defined as <div class=”col-xs-12"> </div>. This means this column would take up the full width of the phone screen.
Now, to get started with a layout, you first create a .container class element to put all the content of your website in. The .container-fluid class provides a container that spans the full width of the viewport/screen. You cannot nest containers.
<div class='container'> <!-- This is a container where we put the contents of our webpage--></div>
Next, you add a .row class element that will contain your .col elements. You put columns inside rows, and rows inside containers. So, a two-column webpage would look something like:
<div class='container'> <div class="row"> <div class='col-md-6'> <!-- First column -->
</div> <div class='col-md-6'> <!-- Second column -->
</div> </div></div>
Important note: The columns inside a row must add up to 12.
Also, we can specify how our layout should look on multiple devices by mixing device classes. If we wanted to specify the above layout for both phones (xs) and desktops (md), we would do this:
<div class='container'> <div class='row'> <!-- Note: we can mix device classes (md and xs) --> <div class='col-xs-10 col-md-6'> <!-- First column -->
</div> <div class='col-xs-2 col-md-6'> <!-- Second column -->
</div> </div></div>
Now, another common layout design feature is the use of a big jumbotron:
A jumbotron is a big box to call extra attention to some content. We simply add this by adding a .jumbotron class element inside our .container:
<div class='container'>
<div class='jumbotron'>
<h1>Jumbotron</h1>
<p>This is a jumbotron.</p>
</div>
<div class='row'>
<div class='col-sm-6'>
First Column
</div>
<div class='col-sm-6'>
Second Column
</div>
</div></div>
This is the basic layout of a two-column webpage with a jumbotron at the top. If we wanted to add our <footer>, we’d place it outside the .container class and make sure to give it the same class as the container:
<div class='container'>
<div class='jumbotron'>
<h1>Jumbotron</h1>
<p>This is a jumbotron.</p>
</div>
<div class='row'>
<div class='col-sm-6'>
First Column
</div>
<div class='col-sm-6'>
Second Column
</div>
</div>
</div>
<footer class='container'>
<p> Footer </p></footer>
Hopefully this tutorial helps you see how quickly a website can be built using Bootstrap. To add more features to your website, Go to Bootstrap’s website for code snippets. I recommend the following in-dept tutorials to help you learn more about using Bootstrap’s various features:
