Learn to code websites with bootstrap tutorial

Learn to code a blog with Bootstrap framework: step by step tutorial

Bootstrap framework is no doubt most popular CSS framework to build responsive websites. Last time i published a detailed tutorial Bootstrap Tutorial For beginner Step by Step, now you are going to Learn to code websites with bootstrap tutorial.

Almost everyone know about Blogs, blog are very popular now days, each blog can have a unique design but one thing is common in almost all blog design. which is multi column layout. Multi column layout for blog, 2 column layout is very popular but you might have seen 3 or 4 column blog layouts as well.

Header, Navigation menu, footer are other necessary parts of blog and website design, Some blog and website also have featured content area to display most important and featured content.

This is a Bootstrap tutorial why we are talking about blogs and blog layouts. Because in this bootstrap tutorial you are going to learn to code a blog layout with Bootstrap framework. Here is a sample blog design that you are going to code with Bootstrap framework.

Learn to code websites with Bootstrap tutorial

You can see we are going to create a very simple 2 column layout for blog with Bootstrap framwork. Here are some section that we will create in this tutorial.

header
navigation
two column main content area (Article and sidebar section)
footer

Tools and knowledge required

For this tutorial basic understanding of HTML and CSS is required. You can read previously published tutorials if you want to improve your HTML and CSS Skills.

HTML Tutorials links

HTML for beginner : Adding Links and Images

HTML for beginner : Code Editors, Headings and Paragraphs

In previous bootstrap tutorial i have explained how to get started with Bootstrap framework. Read it if you want to learn the essentials, how to download and set up bootstrap framework. You can also download all tutorials files of this tutorial at the start of tutorial.

We also need text Editor, You can use any code editor of your choice. I personally prefer SubmileText and Brackets. If you don’t have installed any code editor, it is highly recommended to use Code editors for coding because it makes coding easy and simple.

How to code a Blog with Bootstrap?

Download bootstrap framework and extract all files from zipper archive. There are 3 folder in zipped archived with with necessary files.

CSS
Fonts
JS

For this tutorial we need basic Bootstrap files. We need JS and CSS files.

Create a new folder on your desktop or anywhere on your computer. Copy extracted Bootstrap files in this new folder.

Now Create a new file and save it as index.html and add following necessary mark up in index.html file.


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Learn to code a Blog with Bootstrap</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

      </head>
      <body>
        
        blog mark up here

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

This is basic and necessary mark up for our index.html file. In the head section we have 3 meta tags these tags are necessary. These tag help browsers to render our page correctly. You can see the title tag with our title text. I have also linked to bootstrap's CSS file.

Before closing body tag you can see links to Bootstrap's JavaScript file and jQuery. These files are required if you are going to use any bootstrap's JavaScript feature such as Slider, Responsive Navigation menu etc in your webpage.

Bootstrap has a container class to wrap all content. You will have to use this class to make your content align center. Then you can use .row and columns classes to create different section and multi columns layout.

Now simply replace <body> with <body class="container"> that's all for basic mark up for our page. because you are going to work with bootstrap's 12 column grid. Container class will center the content.

You are also going to use some other classes provided by bootstrap grid system. You need one one element with container class. In this case we have used opening body tag.

Inside container class we need another div or any other element with class of row. for example div with class of row or header with class of row <header class="row"> and row is where you have your 12 column grid. each column has a unique class from 1 to 12 for small, medium and large screen devices.

Here are few examples of grid classes. These are visual break points.

.col-xs-12 will take up the first 12 columns of grid on extra small screens.
.col-sm-4 will take up the first four columns of grid, for example for sidebar content
.col-md-8 will take up the first 8 columns of grid, for example for primary content
.col-lg-9 will take up the first 9 columns of grid, for example for primary content

sm used for small, md for medium and lg for large screen devices in bootstrap grid system. when working with rows you will have to use total 12 columns grid not more or less then 12 So make sure your column classes add up to 12.

For this tutorial we are going to use medium grid with col-md classes.

Code for Header Section of Blog page

In our header we need blog name and blog description. Blog name is always highlighted and clearly visible. For blog name we can use h1 tag used for heading level 1. Most important heading on page and no doubt blog name is one of the most important thing on our page.

For description we can use p element or any other heading element such as h4 because it must be smaller than main blog title. I will use h4 for description.

You can use HTML5 header element for header section of web page. It is more semantic and recommended. You can use multiple header elements on your page it is allowed. In case of multiple header elements on a single page you should use specific classes or id's for identification. For example for site header you can apply id of #site-header.

Here is basic mark up for header section. I have also added HTML comments to mark end of header section. HTML comments can be very helpful to find closing divs and closing tags, when you have a lot of mark up. SO always use comments to add helpful information to your code it will help you and other as well.


    <header class="row">
      <div class="col-md-12">
        <h1 class="site-title">Awesome blog</h1>
        <h4 class="tagline">Learn to code</h4>
      </div> <!-- end of col-md-12 -->
    </header> <!-- end of site header -->

Adding Navigation Menu

Now we need to add navigation menu. It depends on you, do you want to add navigation menu with in header section or you want to create new section below header section. Normally most people add heading with in header section of web page and we have already created main header section for our website. We can add mark u for navigation menu just before closing header tag.

Now simply add following code just after.


    <nav  class="col-md-12">
        <ul class="nav nav-tabs nav-justified">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About us</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

bootstrap offers many fully responsive navigation menus, in this tutorial i have used justified navigation menu with 3 menu items. you can add more if you want. I have also applied active class to the first list item.

now our header section is complete. now you can start working on main content area.

main content area : article and sidebar

For main section we need two column layout. wide area for article section and sidebar area.you van use new HTML5 element main for main area. but it is not supported by older browser and internet explorer, that's way i will use div with id of main and class of row.

Now see the marl up for main section below and check carefully, i have used article and aside elements with some required classes from bootstrap grid system and extra ids #primary and #secondary. Extra ids are not required but these id's can be useful to add some additional styling with custom CSS.


    <div id="main" class="row">

  <article class="col-md-8" id="primary">
    <h1>this is main content area</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta aliquam alias odit ex, odio quae fugiat aperiam molestias.</p>
  </article>

  <aside class="col-md-4" id="secondary">
    <h3>sidebar</h3>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
  </aside>

</div> <!-- end of #main -->

now our mark up for main section is complete. we have two column layout for our blog page.

footer section.

footer section is really simple. you just need to create one wide column. you can use HTML5 footer element for site footer section. you can apply any extra class or id but i am not going to add any additional class or id.


    <footer class="row">
  <div class="col-md-12">
    <p>
      Copy right 2015 : <a href="http://tahirtaous.com">TahirTaous.com</a>
    </p>
  </div>
</footer> <!-- end of footer -->

Final Words

That's all. After adding mark up for footer section our website is complete. now you can code a blog with bootstrap framework. If there is any issue you can ask me anytime. feel free to add your comments below.

Now you have Learn to code websites with bootstrap framework, It's just beginning, keep trying and keep learning new skills. Soon you will be able to create advance layout with bootstrap framework. You can join my mailing list if you want to receive updates about new tutorials and articles.