Build Your First Bootstrap Website with the Basic Template
- The Minimum Bootstrap Page
- The Basic Bootstrap Template
- More Bootstrap Sample Templates
- Summary
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
The Minimum Bootstrap Page
After you’ve installed Bootstrap (see Hour 2, “Downloading and Installing Bootstrap”), you need to add a few lines of HTML to your web pages to create a Bootstrap website. Listing 3.1 shows a simple HTML5 web page without Bootstrap.
LISTING 3.1 A Simple HTML5 Web Page
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
To make this a Bootstrap page, you just need to add the Bootstrap CSS (Listing 3.2) to the <head> of the document.
LISTING 3.2 Bootstrap CSS
<link href="css/bootstrap.min.css" rel="stylesheet">
Make sure that the href points to your copy of the Bootstrap CSS file.
But Bootstrap offers more than just CSS. To add all the Bootstrap plugins, you need to add both jQuery and the Bootstrap JavaScript to the bottom of the document. Add the lines in Listing 3.3 to the very bottom of the HTML page, just before the </body> tag.
LISTING 3.3 Bootstrap JavaScript and jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src="js/bootstrap.min.js"></script>
As with the CSS, be sure to change the JavaScript src to point to your Bootstrap JavaScript file.
With just those few lines, your web page is now a Bootstrap page, and you can start using the styles and plugins that you’ll learn more about in the later hours of this book.