Book Image

Learning Bootstrap

By : Judicael Ayo-Dele SOSSOU, Aravind Shenoy, Ulrich Krause
Book Image

Learning Bootstrap

By: Judicael Ayo-Dele SOSSOU, Aravind Shenoy, Ulrich Krause

Overview of this book

Table of Contents (15 chapters)
Learning Bootstrap
About the Authors
About the Reviewers
Free Chapter
Getting Started with Bootstrap

Creating a blog layout with the Bootstrap Grid mixins and variables

Let's create a blog layout using Bootstrap mixins and variables:

  1. We start with a basic HTML document containing the Bootstrap CSS file. Then, we add the relevant content to it and move step by step in order to understand how it all works.

    Take a look at the following code to understand this better:

    <!DOCTYPE html>
        <title>Using Bootstrap Grid Variables and Mixins </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  2. Now, let's define the blog document structure. In the <header> tag, we define the header with the blog title and description. Do not mix your thoughts about <header> with <head>; both are different. We define the site-header class for the header class:

    <header class="site-header...