[Tutorial #10] Practical Bootstrap Usage

[Tutorial #10] Practical Bootstrap Usage

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-3

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:

You will see these again when we modify wordpress’ header.php and footer.php .

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 container class:

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:

 

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.

Bootstrap grid example page

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:

  • The <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.
  • Each <div class="col-md-3"> tag specifies a rectangular area “column”. The main area identifier is col-.
  • -md- specifies this grid as a medium column type. Different types will rearrange themselves at different screen sizes.
  • -3 specifies 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.

More Resource

Bootstrap Templates

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

A great tool to tweak Bootstrap code and see the effect in real time is Codepen, a free online html/css/javascript coding platform.

Codepen panel

To use Bootstrap, first get the css/javascript urls from BootstrapCDN:

Bootstrap CDN

Then at a Codepen’s pen, click the “gear icon” and respectively “CSS” and “JavaScript”. Enter Bootstrap’s urls and save.

code pen pen settings

code pen add bootstrap css

Here is a codepen Bootstrap example.