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>
<html>
  <head>
    <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">
  </head>
  <body>
  </body>
</html>
  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 ...

Get Learning Bootstrap now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial