Introduction

In last tutorial we lay out the procedures to build our multi-topic websites. Before we target the first item on the list: modify header and footer, let’s learn some practical Bootstrap basics, as this tutorial uses heavily of this tool to make the website responsive.

About Bootstrap

Bootstrap is a library of html, css, and javascript that makes building responsive website very easy. You can learn more by reading this post.

Bootstrap Without Installation

You don’t need to install Bootstrap on your server. Rather you can utilize the Content Delivery Network — network of servers specialized in delivering any kind of content fast and reliable, including libraries — and HTML’s <link> tag, to load Bootstrap dynamically on viewer’s browser.

Generic Bootstrap HTML Structure

Bootstrap contains many useful web components like Navbar, Jumbotron and Buttons which we won’t be also to describe them all here. However there are two fundamental aspects that everyone who uses Bootstrap should know:

Container HTML Structure

To use Bootstrap’s components one uses Bootstrap specific HTML tags. Most component tags you use should be put in a <div> tag with container class:

1

2

3

<div class="container">

<!--specific Bootstrap component tags here-->

</div>

It is recommended you further wrap the div tag by the HTML5 document structure tags like <header>, <nav>, <section>, etc with id to easier identify different website sections. Here is one such example:

1

2

3

4

5

6

7

8

9

<section id="my-jumbotron">

<div class="container>

<!-- Main jumbotron for a primary marketing message or call to action -->

<div class="jumbotron">

<h1>Theme example</h1>

<p>Thisisan example</p>

</div>

</div>

</section>

We will see more examples when we modify template files.

Bootstrap’s Grid Structure

Grid Introduction

Bootstrap’s grid structure is where the responsive magic happens. As the name suggested a grid is rectangular areas called “columns” arranged into a matrix, like an Excel table.