Let's create a blog layout using Bootstrap mixins and variables:
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>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 thesite-headerclass for the header class:<header class="site-header...