3 Columns: A Free Responsive 3 Column Blogger Template

Looking for a neat blogger template that features a left and right sidebar? Check out '3Columns' - a free responsive template built on bootstrap. This elegantly designed template features a 3 column layout and will resize perfectly on all screen sizes.

The header comes with a navigation bar placed beside the logo while the left sidebar to comes with pre-installed with a vertical navigation bar, giving you ample space to manage your links. You can use the right sidebar to add your own widgets.



DemoDownload

Header Navigation Links

Search for <!-- Header Navigation --> in your template and change the URL and link text shown in blue below.

<!-- Header Navigation -->
<nav class='collapse navbar-collapse bs-navbar-collapse' role='navigation'>
  <ul class='nav navbar-nav'>
    <li>
      <a href='/p/contact.html'>
        Contact
      </a>
    </li>
    <li>
      <a href='/p/about.html'>
        About
      </a>
    </li>
    <li class='dropdown'>
      <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
        Dropdown Menu
          <b class='caret'/>
      </a>
   <ul class='dropdown-menu'>
    <li>
      <a href='#'>
        Action
      </a>
    </li>
    <li>
      <a href='#'>
        Another action
      </a>
    </li>
    <li>
      <a href='#'>
        Something else here
      </a>
    </li>
      <li class='divider'/>
    <li>
      <a href='#'>
        Separated link
      </a>
    </li>
  </ul>
   </li>
<li class='dropdown'>
  <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
     Dual-Column dropdown 
      <b class='caret'></b>
  </a>
 <div class='dropdown-menu main-drop-two'>
  <div class='col-50'>
   <ul class='dropdown-menu'>
    <li>
      <a href='#'>
        Download
      </a>
    </li>
    <li>
      <a href='#'>
        Homes
      </a>
    </li>
.
.
. 
and so on..
</nav>

Sidebar Navigation Links

Search for <!-- Sidebar Navigation --> in your template and change the URL and link text shown in blue below.

<!-- Sidebar Navigation -->

<div id='MainMenu'>
 <div class='list-group'>
<!-- Link 1 -->  
  <a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo1'>Item 1</a>
<!-- Link 2 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo2'>Item 2 <i class='fa fa-caret-down'/></a>
<div class='collapse' id='demo2'>
    <!-- Link 2 SubItem 1 -->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' data-toggle='collapse' href='#SubMenu1'>Subitem 1 <i class='fa fa-caret-down'/></a>
<div class='collapse list-group-submenu' id='SubMenu1'>
    <!-- Link 2 SubItem 1 a-->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' href='#'>Subitem 1 a</a>
    <!-- Link 2 SubItem 2 b-->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' href='#'>Subitem 2 b</a>
</div>
    <!-- Link 2 SubItem 2 -->
<a class='list-group-item list-group-item-success' href='#'>Subitem 2</a>
    <!-- Link 2 SubItem 3 -->
<a class='list-group-item list-group-item-success' href='#'>Subitem 3</a>
</div>
<!-- Link 3 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 3</a>
<!-- Link 4 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo4'>Item 4 <i class='fa fa-caret-down'/></a>
  <div class='collapse' id='demo4'>
<a class='list-group-item list-group-item-success' href='#'>Subitem 1</a>
<a class='list-group-item list-group-item-success' href='#'>Subitem 2</a>
  </div>
<!-- Link 5 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 5</a>
<!-- Link 6 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 6</a>
<!-- Link 7 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 7</a>
<!-- Link 8 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 8</a>
<!-- Link 9 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 9</a>

</div>
</div>

Social Links

To link to relevant social profiles, simply search for <!-- Social Links --> in the template and make changes to the text shown in blue below..

<!-- Social Links -->

<div class='contact-box'>
<a href='mailto:wajahat-xyz123@gmail.com?Subject=Hey!' target='_top'>
<i class='fa fa-envelope-o' rel='tooltip' title='wajahat-xyz123@gmail.com'/>
</a>
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'/>
</a>
<a href='https://facebook.com/wajahat-xyz' target='_blank'>
<i class='fa fa-facebook'/>
</a>
<a href='https://plus.google.com/wajahat-xyz' target='_blank'>
<i class='fa fa-google-plus'/>
</a>
<a href='https://pinterest.com/wajahat-xyz' target='_blank'>
<i class='fa fa-pinterest'/>
</a>
<a href='https://youtube.com/wajahat-xyz' target='_blank'>
<i class='fa fa-youtube-play' rel='tooltip' title='YouTube'/>
</a>
</div>

Do let us know of any anomalies/layout problems that you may find in the template.