Bootstrap Tutorial

Bootstrap is a front end framework that developers use to create different kinds of websites for various devices. This open source project offers a diverse array of design templates based on languages like HTML, CSS, and optional JavaScript extensions. Twitter originally planned Bootstrap to be used as an internal tool for unifying designs. The social network then decided to publish the framework on the open source hosting platform, GitHub, where it quickly turned into one of the most popular projects, generating thousands of forks.

What makes Bootstrap so interesting?

Thanks to HTML and CSS templates, developers with interesting ideas for new websites no longer have to start from scratch. Content is taken directly out of tool kits and added into HTML documents, sparing any need for tedious CSS configurations. Here are some things that are included:

  • Buttons
  • Navigational elements
  • Thumbnail overviews
  • Dropdown menus
  • Warning messages
  • Progress bars
  • Responsive video embedding

Another important aspect is Bootstrap’s grid layout. By dividing layouts into 12 columns, this layout system makes it easier for its users to precisely determine distances and position individual website elements. Whether using desktop, mobiles, or PCs with small monitors, users are able to decide between different screen sizes when arranging elements in the layout grids. This flexibility makes Bootstrap well equipped for responsive web design.
With optional JavaScript plugins based on the JavaScript framework jQuery, developers can add additional user interfaces (e.g. tool tips or dialog windows) or expand the functionality of existing control elements, such as an autofill feature for input boxes. Add the jQuery library into your HTML document in order to use Bootstrap with JavaScript.

Bootstrap: download and first steps

Bootstrap was published by Twitter as a free framework, so it can be downloaded and used free of charge. With the freely available programming code, more experienced developers are able to adjust the framework to their own needs. The following guide lays out which steps you need to follow before using the Bootstrap CSS and JavaScript templates. 1. Visit the official website getbootstrap.com. Download the Bootstrap package. This contains both the CSS and JavaScript files (one in standard form, one in minimised form) as well as fonts and the optional Bootstrap theme. 2. Unpack the file and drag the Bootstrap folder into the desired project directory 3. The folder contains ‘css’, ‘fonts’, and ‘js’. In the ‘font’ folder, you’ll find more than 250 icons in the font, Glyphicons Halflings, which has been made available to Bootstrap for free. The files in the folder ‘css’ and ‘js’ are described individually below:

bootstrap.css: CSS code in readable form bootstrap.min.css: minimised CSS code. Content irrelevant for the interpretation of the code, such as spaces, has been removed bootstrap.css.map: contains CSS source maps that help you find the original source data in LESS format when developing bootstrap-theme.css: CSS file of optional prepackaged theme bootstrap-theme.min.css: minimised code of theme bootstrap-theme.css.map: theme source map bootstrap.js: JavaScript code in readable form bootstrap.min.js: minimised JavaScript code 4. If you want to use JavaScript elements then download the additional JavaScript library, jQuery on jquery.com.
5. Once all components are present and familiar, then the real work can begin. For demonstrative purposes, we’ve created an HTML welcome page, which we’ll then turn into a Bootstrap template.
6. Open your preferred code editor, like Notepad++, and add the following code into an empty document: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
      <h1>Hallo, this is my first Bootstrap-Template!</h1>
</body>
</html>

The meta tag, ‘viewpoint’, within the head area ensures that the website is optimally displayed on mobile devices.

7. Save the project as ‘basic.html’ on the desktop

8. Implement the Bootstrap JavaScript and CSS files into the HTML code in order to make a Bootstrap template out of this ordinary HTML document. To do this, indicate which directory the folders are located in. It’s recommended to add JavaScript to the body of the document at the very end, as this could otherwise increase your webpage’s loading time. This is how your code should look:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
     <h1>Hello, this is my first Bootstrap-Template!</h1>
     <script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
     <script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

9. To finish, save the document as ‘bootstrap-template.html’. By double clicking, you can open the Bootstrap HTML in your preferred browser where you should now see the message given in the title (h1)

10. Now you’re able to freely design your template. The different codes for typography, buttons, and the Bootstrap grid system, etc., can be found on the official website.

HTML/CSS knowledge is an important requirement

Although Bootstrap presents its users with prepackaged content, you won’t get far with the framework without prior HTML and CSS knowledge. It’s also recommended for experienced developers to take some time to get into the swing of things, and it’s often well worth the trouble. There’s a host of templates available for download (some free) that have been developed with Bootstrap and these can spare you a lot of work. Those who regularly work with HTML, CSS, and JavaScript will quickly come to appreciate Bootstrap’s advantages. Here are the most important ones at a glance:

  • Saves a lot of time
  • Very good foundation for responsive web design
  • Regular updates and huge community you can ask
  • First-class documentation

Combined with the fact that it’s an open source project, the factors mentioned above prove once more why Bootstrap is one of the most popular frameworks for web design.

Was this article helpful?