How To Integrate The Twitter Bootstrap 3 Framework Into Your Blogger Template

In this tutorial you will learn how to integrate the Twitter Bootstrap 3 Framework with your Blogger template.

1.

We will apply the Twitter Bootstrap Framework on top of the Blogger Simple template, so as a first step go to your Blogger Dashboard --> Template and apply the Simple white template.

After applying the white Simple Blogger Template you blog will look something like this:

2.

Open the HTML Editor by going to Template --> Edit HTML. Here we will add the Twitter Bootstrap CSS and js files to the header section.

3.

Search for the closing tag of your header section and add the Twitter Bootstrap Framework and i suggest also adding the jQuery library if you plan to use the Bootstrap jQuery plugins.

Like this:

    <link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet'/>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
    <script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'/>
  </head>

---

You can now use the Twitter Bootstrap components. Let's add a search form using the code in this tutorial.

We will add this code below the Blogger PageList Gadget:

<form role="search" method="get" action="/search" class="form-inline">
  <div class="form-group">
    <input class="btn btn-default" id="submut" value="Search" type="submit" />
    <div class="form-group">
      <input id="searchBox" class="form-control" type="text" placeholder="Search" name="q"></input>
    </div>
  </div>
</form>

As you can see the Search Form has been added and is styled using Bootstrap3:

---

In future tutorials we will go into more detail about using Twitter Bootstrap with your Blog.

Please leave your questions and suggestions below.