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.
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.
Simply add the following codes in every of your webpage:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
You will see these again when we modify wordpress’
For other ways of installing Bootstrap, see Bootstrap’s Getting Started page.
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
<!-- specific Bootstrap component tags here -->
It is recommended you further wrap the div tag by the HTML5 document structure tags like
<section>, etc with id to easier identify different website sections. Here is one such example:
<!-- Main jumbotron for a primary marketing message or call to action -->
<p>This is an example </p>
We will see more examples when we modify template files.
Bootstrap’s Grid Structure
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.
Bootstrap grid example. Source: https://getbootstrap.com/examples/grid/
The difference between a Bootstrap grid and a regular table is that columns automatically re-arrange themselves based on device’s screen size, making the website “responsive”.
Basic Grid HTML Structure
Here is a typical example from the above Bootstrap example (the second purple row). Of course these are wrapped in the
<div class="container"> tag:
What the above tag means is:
<div class="row">specifies one row of grid. It’s like the
<tr>tag for html table. Create another
<div class="row">tag to add another row.
<div class="col-md-3">tag specifies a rectangular area “column”. The main area identifier is
-md-specifies this grid as a medium column type. Different types will rearrange themselves at different screen sizes.
-3specifies the relative size of this column. The whole row size is 12, so 3 means that when the row is not re-arranged the width is 3/12 = 25% of the row.
- The number sum of columns in one row needs not to be 12. If less than 12 there will be extra space at the right most column.
- You can further use the
offset-md-x, (x is a number) class to create offsets among the column. Common usage is to leave white space at two sides of a blog post.
For more detailed grid manipulation, consult Bootstrap Grid System page.
The Bootstrap official site has many great templates which you can directly copy and modify to use Bootstrap’s components.
To do so, go to the example section, open one of the example, and right click to select “view source”. The source is where you can directly get the codes.
Testing and Modifying Bootstrap Codes
Here is a codepen Bootstrap example.