In the previous chapter, you created a very basic Bootstrap project using the default build of Bootstrap. That project did not do much, so let us add some more HTML to it in order to see what your new theme does to it. Replace the contents in index.html with the following:
<!DOCTYPE html>
<html>
<head>
<title>A simple blog </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Blog</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>A simple blog</h1>
</div>
</div>
<article>
<header>
<h2>Extending Bootstrap</h2>
<p><time pubdate="pubdate">1/12/2012 3:36 PM</time> · <a href="#">Blogger</a></p>
</header>
<p>Recently I stumbled on a book on extending Twitter Bootstrap and it really...</p>
<p class="read-more"><a href="#">Read more »</a></p>
<footer>
<ul class="list-inline">
<li><a href="#" class="label label-primary">Bootstrap</a></li>
<li><a href="#" class="label label-primary">CSS</a></li>
<li><a href="#" class="label label-primary">LESS</a></li>
<li><a href="#" class="label label-primary">JavaScript</a></li>
<li><a href="#" class="label label-primary">Grunt</a></li>
</ul>
</footer>
</article>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>Reload your browser, and your project should now look something like the following screenshot:
Now it is time to apply the theme that you downloaded. Grab the file that you downloaded from Bootswatch and replace your bootstrap.min.css file with it. If you now reload your browser, you will notice that your page looks a bit different in terms of font and color, as shown in the following screenshot:
As you may have noticed, the page looks a bit different after you applied the theme; this is only scratching the surface with customizing Bootstrap. Next, you will learn how to perform some simple customizations in your newly applied theme.