Home > Articles > Programming

Build Your First Bootstrap Website with the Basic Template

  • Print
  • + Share This
One thing you will learn when building a Bootstrap website is that the basics of using Bootstrap come down to adding a few lines of code to your HTML. In this excerpt from Bootstrap in 24 Hours, Sams Teach Yourself, you will learn about the basic Bootstrap template as well as a few other sample templates you can use to add more features to your website.
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.

  • + Share This
  • 🔖 Save To Your Account