[[Steps To Convert MT To Bootstrap Part 2|Previous]] | [[Steps To Convert MT To Bootstrap Part 4|Next]]

Now we move to the Blog templates\\

First we have to get some variables from the main website template so include this at the start of the ''Main Index'' ''Category Entry Listing'' ''Entry'' ''Monthly Entry Listing'' ''Page''  ''Comment Preview'' ''Comment Response'' and ''Search Results''

<code>
<mt:BlogParentWebsite> 
<$mt:WebsiteID setvar="website_id"$> 
</mt:BlogParentWebsite> 
<$mt:Include module="Website Data" blog_id="$website_id"$>
</code>

Put in the Bootstrap head
<code>
<!DOCTYPE html>
<html lang="en">
<head>
</code>

Change the ''title'' tag section to
<code>
<title><$mt:GetVar name="website_name"$> | <$mt:BlogName encode_html="1"$></title>
</code>

Change the ''HTML Head'' to
<code>
<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 -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="icon" href="<$mt:GetVar name="website_url"$>"img/favicon.ico">
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
<link rel="start" href="<$mt:BlogURL$>" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<$mt:CCLicenseRDF$>
<$mt:CanonicalLink$>
<$mt:StatsSnippet$>
</code>
//Notice that the **favicon** is placed in the ''img'' folder//\\

Put a ''<$mt:Include module=“Bootstrap Head”$>'' under the ''HTML Head'' include line. Then create the module when asked with the following below
<code>
<!-- Bootstrap core CSS -->
<link href="<$mt:GetVar name='website_url'$>css/bootstrap.min.css" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="<$mt:GetVar name='website_url'$>css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="<$mt:GetVar name='website_url'$>css/sticky-footer-navbar.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</code>


The ''Fixed Navbar'' is pasted under the ''<body>'' tag but.....\\

You might want to put some **''PHP''** functions in the start of the webpage first\\
Look [[php_code_to_put_at_start_of_page|here]] for an example. Lets call it ''PHP Functions'' and then call it by
<code>
<$mt:Include module="PHP Functions"$>
</code>

The ''Fixed Navbar'' code
<code>
 <!-- Fixed navbar -->
 <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
   <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
   <a class="navbar-brand" href="#">Project Name</a>
   </div>
   <div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
       <li class="dropdown-header">Nav header</li>
       <li><a href="#">Separated link</a></li>
       <li><a href="#">One more separated link</a></li>
      </ul>
     </li>
    </ul>
   </div><!--/.nav-collapse -->
  </div>
 </nav>
</code>

Modify the ''Banner Header'' module
<code>
<div class="page-header">
<mt:Ignore><!-- Use h1 and h2 html tags on the main index of the blog as the title, use divs on all other pages where there are page titles. --></mt:Ignore>
<mt:If name="main_index">
 <h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
 <h2 id="header-description"><$mt:BlogDescription$></h2>
<mt:Else>
 <div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></div>
 <div id="header-description"><$mt:BlogDescription$></div>
</mt:If>
</div>
</code>

