Bootstrap is a front end framework that de­velopers 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 JavaS­cript ex­ten­sions. Twitter ori­gin­ally 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, gen­er­at­ing thousands of forks.

What makes Bootstrap so in­ter­est­ing?

Thanks to HTML and CSS templates, de­velopers with in­ter­est­ing 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 con­fig­ur­a­tions. Here are some things that are included:

  • Buttons
  • Nav­ig­a­tion­al elements
  • Thumbnail overviews
  • Dropdown menus
  • Warning messages
  • Progress bars
  • Re­spons­ive 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 in­di­vidu­al 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 flex­ib­il­ity makes Bootstrap well equipped for re­spons­ive web design.
With optional JavaS­cript plugins based on the JavaS­cript framework jQuery, de­velopers can add ad­di­tion­al user in­ter­faces (e.g. tool tips or dialog windows) or expand the func­tion­al­ity 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 JavaS­cript.

Bootstrap: download and first steps

Bootstrap was published by Twitter as a free framework, so it can be down­loaded and used free of charge. With the freely available pro­gram­ming code, more ex­per­i­enced de­velopers 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 JavaS­cript templates. 1. Visit the official website get­boot­strap.com. Download the Bootstrap package. This contains both the CSS and JavaS­cript 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, Glyph­icons Halflings, which has been made available to Bootstrap for free. The files in the folder ‘css’ and ‘js’ are described in­di­vidu­ally below:

bootstrap.css: CSS code in readable form bootstrap.min.css: minimised CSS code. Content ir­rel­ev­ant for the in­ter­pret­a­tion 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 de­vel­op­ing bootstrap-theme.css: CSS file of optional pre­pack­aged theme bootstrap-theme.min.css: minimised code of theme bootstrap-theme.css.map: theme source map bootstrap.js: JavaS­cript code in readable form bootstrap.min.js: minimised JavaS­cript code 4. If you want to use JavaS­cript elements then download the ad­di­tion­al JavaS­cript library, jQuery on jquery.com.
5. Once all com­pon­ents are present and familiar, then the real work can begin. For demon­strat­ive 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 JavaS­cript 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 re­com­men­ded to add JavaS­cript 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 ty­po­graphy, buttons, and the Bootstrap grid system, etc., can be found on the official website.

HTML/CSS knowledge is an important re­quire­ment

Although Bootstrap presents its users with pre­pack­aged content, you won’t get far with the framework without prior HTML and CSS knowledge. It’s also re­com­men­ded for ex­per­i­enced de­velopers 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 JavaS­cript will quickly come to ap­pre­ci­ate Bootstrap’s ad­vant­ages. Here are the most important ones at a glance:

  • Saves a lot of time
  • Very good found­a­tion for re­spons­ive web design
  • Regular updates and huge community you can ask
  • First-class doc­u­ment­a­tion

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 frame­works for web design.

Go to Main Menu