**For the Website**\\

Change the ''.html'' to ''.php'' in the Main Index and Archive Index (under ''Template Options'')\\

Clear the stylesheet template as the stuff there might clash with the bootstrap CSS. Save and Publish.
Put ''<$mt:Include module="Website Data"$>'' into the Index Templates->Main Index, Archive Template->Page,  System Templates->Comment Response, Comment Preview, and Search Results\\

Create the ''Website Data'' module when asked..\\
<code>
<mt:BlogParentWebsite>
 <mt:SetVars> 
  website_name=<$mt:WebsiteName$> 
  website_description=<$mt:WebsiteDescription$>
  website_url=<$mt:WebsiteURL$> 
 </mt:SetVars>
</mt:BlogParentWebsite>
</code>

Put the Bootstrap header
<code>
<!DOCTYPE html>
<html lang="en">
<head>
</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="img/favicon.ico">
<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>

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="css/bootstrap.min.css" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="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>

There is a stylesheet attached to MT that can be used to customize the website so put this below all the css calls
<code>
<!-- Custom styles for this website -->
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
</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 can be put into a separate ''Template Module''\\
<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>
and a call put for it just under the ''body'' tag 
<code>
<!-- Fixed navbar -->
 <$mt:Include module="Fixed Navbar"$>
</code>

Change the page-content code to include the standard MT template stuff. We will use a standard 2 column bootstrap grid with 8/4 division.
<code>
 <!-- Begin page content -->
 <div class="container">
  <$mt:Include module="Banner Header"$>
  <div class="row">
   <div class="col-md-8">
    <div id="content">
<mt:Entries include_blogs="children" include_with_website="1" >
 <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
 <$mt:Include module="Entry Summary" display_blog_name="1"$>
</mt:Entries>
    </div>
   </div>
   <div class="col-md-4">
<$mt:Include module="Sidebar"$>
   </div>
  </div>
 </div>
</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>

Read more at [[Steps to convert MT to Bootstrap Part 2]]