Bootstrap Tutorial: Getting Started [Documentation Simplified]

getting-started-with-twitter-bootstrap-1

(We here at All Tech Flix are starting a Programming and Web Development Series. This series will mostly contain explanation of different programming concepts in very simple and understandable language that any one could understand. We’re going to start with Web Development in Bootstrap.)

You might have noticed “Documentation Simplified” written in square brackets. It’s actually what we are going to do in this series of Bootstrap web development. We are going to simplify the official documentation provided by Twitter Bootstrap so that you can easily understand the officially provided content rather than looking over to other sites. Some people find it difficult to understand officially provided content, because it contains more professional language and not much of explanation.

Most framework documentation are written by keeping in mind as if you are a some developer. However, Bootstrap team has done far good job in documenting their framework. Also, official documentation contains more in-depth look in the framework. So, it’s the best to understand the officially provided documentation. Now, Let’s get started with Twitter Bootstrap.

What is Bootstrap Framework?

Bootstrap is a Framework that was developed by Twitter for their own use. They developed it for their employees so that they could rapidly and easily develop designs and prototypes. Well, further on as the development on the framework increased they made it publicly available as Open source project on August 19, 2011.

So, Bootstrap is Front-end framework for HTML, CSS and Javascript that helps rapid development of Website that are Mobile-first and responsive. Bootstrap has pre-built responsive grids, navbars, headers, buttons, typography and much more. So, if you’d want to add a navbar you just have to simply add few classes to your nav and ul tags. And you’re done. 

<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Tags</a></li>
<li role="presentation"><a href="#">Categories</a></li>
</ul>
</nav>

Check the preview of the above example here.

It work same for other components. You just have to add specific class for specific component and it will be styled automatically. You can further customize the css file by overwriting the class to apply your own styling. Now, let’s get you started with actual bootstrap example.

Adding Bootstrap to your website

First you got to download Bootstrap files to your local disk if you’re going to work offline. If you’re not than you can simply link it through CDN links provided. But it’s good to have the files offline. Just go to getting started page on Bootstrap’s site. And download Bootstrap. Just click on download bootstrap not on source code or Sass. We’re not going to deal with them right now.

In the downloaded Bootstrap.zip  you’ll get following files.

bootstrap-file-hierarchy

Bootstrap File Hierarchy

From the above files you should specifically concern “min” files. They are minified version of files.  bootstrap.min.css is minified version of bootstrap.css . In the minified version all the white spaces are removed so that the browser can compile the file faster. Next in the CSS folder you get is bootstrap theme. It’s the default theme of bootstrap. It contains styling for specific components. You can always create your own theme or use themes created by others. Best place to check out new themes in Bootswatch.

Boostrap Link placement

Now, we’ll add Bootstrap’s CDN links to our HTML page. The HTML page structure is pretty same. We’re just going to link Bootstrap files. Below are the CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Simple Bootstrap Page Example with Header

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Hey World! <small>My first Bootstrapped page </small></h1>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Understanding the Code:

We’ll start with second meta tag. The first one is simply for character encoding and backward compatibility.

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

This meta tag makes sure that Internet explorer use the highest available standard ie. Edge. This tag is especially for IE browsers to let developers choose in which IE version the page should be rendered. Other options available are content=”IE11″, “E10”, “IE9” and so on.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

This meta tag sets the virtual viewport for mobile devices. Here as you see value of width is set to device-width. This takes width of the device from your phone as input and stores it in width attribute. Next attribute initial-scale is set to 1. This sets the initial zoom when the page is visited. Other attribute that you can add is user-scalable This allows user to Zoom in and out. Value being Yes or No. By default it’s set to Yes. So, if you don’t want your user to zoom-in, set the value to No.

Next, the bootsrap.min.css and bootstrap-theme.min.css are linked. Then comes HTML5 shim and Respon.js for HTML5 and media query compatibility for IE8 with conditional tags. Scripts will only be used if web browser is below IE9.

Next in the body <div class=”container”> is used. Container is a class of Bootstrap.css. This will make sure everything that you add between this tags will remain fixed in the container. Another class is container-fluid. This uses the full width of the screen rather than being fixed. Next comes page-header. This class of Bootstrap adds styling and Typography to your header text.

At the end is Bootstrap.min.js and jQuery.min.js. Now, you might wonder why add these JS files at the end and not why in the header? Well, the answer is to make page load faster. The browser has a life cycle in parsing the HTML page. It starts parsing the HTML and when it finds a script file it stops the parsing and compiles the script first. Only after the script is compiled the rest of the content on the page is parsed and loaded. So, in order to not let that happen, JS files are kept at last. Just before closing the body tag. This ensures that the content is loaded first and after that JavaScript is compiled and loaded. So, that’s it for this Tutorial to Get you started with Bootstrap.

In the next tutorial we’ll see Responsive Grids. One of the most important concept in Bootstrap.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.