Bootstrap Tutorial: the first steps with the Twitter framework

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 minimized 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: minimized 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: minimized code of theme

bootstrap-theme.css.map: theme source map

bootstrap.js: JavaScript code in readable form

bootstrap.min.js: minimized 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:

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:

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.

The W3C’s Web Content Accessibility Guidelines (WCAG) offers website operators a list of suggestions for the creation of making their web offers accessible. To this end, WCAG is based on 4 principles: Perceptibility, usability, intelligibility, and robustness. These are supported by 12 fundamental guidelines on how to tailor web content for people with sensory, motor, or cognitive limitations.

HTML5 is the new core language of the internet. But many web developers have opted out of this version and instead still use older markup languages like HTML 4.01 or XHTML. These often require plugins, reducing the site’s compatibility and security. HTML5, on the other hand, supports the direct integration of multimedia elements as well as JavaScript-based programming interfaces.

Bootstrap is the most popular framework solution for designing and creating high-performance web interfaces. It consists of a collection of HTML, CSS, and JavaScript components that Twitter released under the MIT free license in 2011, as well as a variety of extensions, interfaces for content management systems, and pre-built themes. There are also worthwhile alternatives to Bootstrap, which are...