What is Bootstrap? How to create responsive website?

What is Bootstrap?

What is Bootstrap? Why do you need to learn it?

what is bootstrap

If you have this question, relax you are now alone, I did have this question before adopting it. Bootstrap is a mobile first front-end framework in a nutshell. It is used for “responsive” websites and web applications development.

In this article, I will try to explain what is Bootstrap, basic framework components, and what is grid system. You know, the grid system is very popular and in most cases, you may have heard about it. And finally, I will walk you through a practical example of how to create a responsive website using Bootstrap.

Finally, I will walk you through a practical example of how to create a responsive website using Bootstrap. We will create an example responsive website using Bootstrap called consult.io. Find the source code here at the GitHub repository.

 

Bootstrap Introduction

Let me answer what is Bootstrap part here. You may be familiar that Bootstrap is a responsive framework. But what is responsive? The responsiveness means the layout should look the uniform across various device sizes. In more general words the layout should not have a horizontal scrollbar on any device size, from desktop screen to mobile screen size.

Fun fact: Bootstrap the second most starred project on GitHub is developed by two engineers at Twitter Mark Otto and Jacob Thornton. The aim of the framework was to make design components consistent across the modules and projects on Twitter.

 

Bootstrap History & Usage

The responsive website started getting the buzz around the year 2012. It was the same year when Bootstrap 2.0 was launched with a mobile first approach. Until the year 2012, no one was aware of what is Bootstrap! Bootstrap was and still is a good all in one package.

There are two main factors pushing the responsive website trend this hard:

  1. A significant increase of mobile internet users. Mobile friendly site enhances the website’s user experience.
  2. In the beginning of 2015, Google announced mobile-friendliness as a ranking signal.

Template marketplaces are flooded with mobile first responsive websites due to these factors. And if you observe closely majority of the mobile friendly templates are built on top of Bootstrap. We’ll cover more on what is Bootstrap in next framework components section.

According to BuiltWith statics, Bootstrap  powering more than 10 million websites across the internet. To get started with what is Bootstrap and learning responsive website development using Bootstrap, you probably need to Download the framework file here.

Framework Components

To properly understand what is Bootstrap we would need to understand the framework’s basic components. The three basic CSS, js and icon files collectively makes the framework.

  1. Bootstrap.css
  2. Bootstrap.js
  3. Glyphicons

The CSS file has the media query based grid system and all the default styling like button, link, navigation comes from this stylesheet. 
The js file has the JavaScript code for various components like a carousel, drop-down, alert, modal and other animation effects.
Finally, the Glyphicons files are actually font files, it’s a library of icons and symbols. You no longer need to use images for icons and symbols.

Grid system

Bootstrap grid layout

Grid system makes the Bootstrap a responsive framework. It’s basically a twelve column grid layout meaning whole screen width divided into twelve columns. The framework has predefined classes to prepare a mobile first responsive design for various device sizes.

Following are the six points to consider while learning what is Bootstrap, and in the following section we will be learning more about Grid layout, what classes it offers and what media query does it using to make layout responsive.

Basic points to remember:

  • Entire layout will be created using rows and columns.
  • Predefined classes like col-md-12, col-sm-6 should be used for quick layout creation.
  • There can be twelve maximum columns in a row.
  • Rows need to be inside the .container class.
  • Elements like labels, text boxes, buttons should be kept inside column
  • Columns have styling to create spacing between the columns.

Grid layout and media query:

The grids use the media query to make layout responsive, here is the media port break down based on screen size.

/* Extra small(mobile) device (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up)
*/ @media (min-width: @screen-lg-min) { ... }

Grid Options:

Bootstrap column classes - Grid options

As you may have noticed: xs stands for extra small devices with a width lower than 768px. All mobile devices fall under this category, you may use col-xs-1 to col-xs-12 based on required column width while designing the mobile layout. The same rule applies to small, medium and large devices.

Now let’s learn this grid system and bootstrap by creating a simple hello world example. Let’s get started:

Project Hello World with Bootstrap

I hope after learning the framework basics it’s good time to have our hands on a practical example to learn more about what is Bootstrap and how to use it. Please download the framework files if you haven’t already. Extract the resource once the download completes. I will be using sublime text as a code editor and chrome for web page testing. Feel free to use any editor and browser of your preference. Finally here is how my project setup looks like:

bootstrap project setup

Meta terms:

<!DOCTYPE html> declaration. It’s not a regular HTML tag instead it’s a way to tell a browser that the page is HTML5 markup page. The doctype declaration goes at the top of the page before any HTML markup starts.

<html lang="en"> declaration suggest that the language of page content is English. It’s mostly useful for screen readers which need to interpret the page content.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> this meta information is for Internet Explorer browsers. According to MSDN documentation it is functionally equivalent to using the HTML5 doctype. It places Internet Explorer into the highest supported document mode.

<meta name="viewport" content="width=device-width, initial-scale=1"> It’s basically a responsive website signal meta information.
width=device-width: Technically the browser would render the width of a page at the width of the device screen. To put this in a simpler way if the device screen is 320px wide the page will be rendered at 320px width rather than zooming out and rendering the page at 900px(or the other width device uses by default).
initial-scale=1: It helps browser keep the layout uniform as the screen size scales and orientation changes. For instance, the page content looks the same scale on horizontal and vertical mobile layout.

Hello World code review:

Pretty straight forward code, as we have seen in the previous section about what is Bootstrap and the framework components, I have just included some static framework resources like CSS and js. 

The above is for Internet Explorer (IE) 9 or earlier version only. You see the [if lt IE 9] that is the HTML conditioning used to direct the specific browser to take certain actions. In our case, we are asking IE 9 or earlier to load two script resources html5shiv and respond. The scripts are used to make the website responsive under the IE 9 or earlier versions. You can skip it if you are sure your visitors will have IE 10 or any other latest version of a browser. It’s safe to place these scripts to broaden the website compatibility.

The Bootstrap.js has a dependency on jQuery so we need to add jQuery before adding the framework js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>We have included jQuery with the slightly different approach, we used Google’s hosted library, check the src section. This is known as CDN(Content Delivery Network) resource. The main advantage of loading static resource (like js, CSS, and images) is that it loads the resources very fast, the bright chances are that the client’s browser already have cached the resource and as a result, it improves the page loading time. If you want to learn more about CDN checkout out post.

Let’s head towards the final journey of what is Bootstrap and build a responsive teamplte as shown in the image blow.

Let’s build a responsive template

What is Bootstrap - Bootstrap template

Desktop & Mobile template view

Navigation Menu:

First of all, let’s start with the navigation part. It’s very easy to create navigation with Bootstrap as we have all necessary classes, styles, and script available right out of the box. You will see this in a minute.

bootstrap navigation

As you can see the navigation is divided into two main parts, on the left we have Consult.io company name and on the right, we have navigation items(Home, Services etc…).

We will use <nav> HTML5 tag, it is used to define the navigation links. Furthermore, we will use navbar, navbar-inverse, navbar-fixed-top classes. The navbar class provides the basic navigation structure and we use navbar-inverse to have darker navigation panel instead of default light navigation panel, finally navbar-fixed-top is used to create a sticky header.

Responsive Menu Toggle Button:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

The above snippet creates a mobile navigation panel open/close toggle button. And the button will be on the right side. Finally in order to see this in action please hit F12 and CTRL+Shift+M on Chrome and CTRL+Shift+M on Firefox and select any mobile device from the list. 

The navigation link structure is simple. Each link contained within the list items (li), the unordered list contains all the list items and finally the div houses the unordered list. The classes like collapse navbar-collapse, nav, and nav-bar creates the styling you see on example. Consider navbar documentation for detail information.

Navbar Dropdown Menu:

Have you observed the Services item on the navigation menu and a down arrow beside the text? That’s basically a drop down menu, it contains child navigation items. Clicking the parent item will bring the child items on the page. 

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Web Development</a></li>
<li><a href="#">Content Writing</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Dedicated Resource</li>
<li><a href="#">Hire PHP Developer</a></li>
<li><a href="#">Hire Android Developer</a></li>
</ul>
</li>

The dropdown class suggests that the list item will ba a dropdown. The link tag with dropdown-toggle trigger the click event and the JS code listens to the event and show/hide the underlying items. All the child items contained under an unordered list with a dropdown-menu class.

Slider/Carousel Creation:

Bootstrap makes it easy to create an image slider. They call it carousel. We have two images and captions to create an image slider. In our template the carousel section is divided into three portions:

  1. Carousel-Indicators: The small white dots  on the bottom center of the carousel. It’s used to show a user how many items are there in the carousel. And give them a graphical way to pick any item via pressing those white dots.
  2. Carousel-Inner: It’s the carousel item collection. All items in our case images and captions will be kept inside it.
  3. Carousel-Control: You see the Next and Previous arrows while hovering on the image? They are created in this section, and they are used to navigation image back and forth.

carousel-indicators:

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li> </ol>
This will add the little white dots at the bottom of the image. Structurally they are ordered list. And underlying JS code makes them actionable.

carousel-inner:

<div class="item active">
<img class="first-slide" src="LINK TO YOUR IMAGE">
<div class="container">
<!-- First image caption -->
<div class="carousel-caption call-to-action">
<h1>Example headline.</h1>
<p>Caption text goes here...</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
<!-- First image caption ends -->
</div>
</div>

The structure is easy to understand and quite self-explanatory. Carousel-inner class is the root container of all the image slides. Each item class holds an image slide. The very next container section creates the area for captions on the top of the image. And finally, carousel-caption call-to-action holds the actual caption text and call to action button on the image as shown in the image.

 

Services Area:

The service is divided into two rows. The first row contains the Services heading and the other one consists the three columns for web development, content writing and PHP development each. Try to think the structure of this services area, if you are not sure please refer the bootstrap grid media query table. Here are the structure and explanation.

As a Bootstrap’s rule of thumb, the columns would contain the data, columns should always be kept inside the rows and rows are supposed to be within the containers. If not sure please refer the grid system documentation.

In our case, we will have a container. The container will hold two rows.

The first row will contain a full-width column that’s col-lg-12 | col-md-12 | col-sm-12. And that column will have a <h2> element that shows the Services text.

The second row will contain three columns. Each column will have equal space meaning 4 column spanning(12/3=4). That will be achieved via col-lg-4 | col-md-4 | col-sm-12. Please notice we applied 12 column spanning for small and extra small screen sizes. Meaning all the screens lower than 750px width will have 12 column spanning for each of the service items.

 

Footer:

Creating footer for the template. The footer is consist of two section, first one is for About | Address | Contact and the other one is for copyright section.

We have a div containing the first footer section that is About | Address | Contact section. The div uses a custom class called .ftr

.ftr{ padding: 10px; background: #3E4649; color:white; padding: 50px; height: 200px; }

Next is the container div, that contains other three About, Address and Contact columns. We will use the same grid layout one container, one row and three equal width columns (col-lg-4 | col-md-4 | col-sm-12).

Please download the template source code from https://github.com/joshidarshan87/bootstraphowto

Has this article helped you get a bit of Bootstrap framework? If it did please share it, sharing is caring. If you find anything confusing or have any suggestion or query, please use the comments section down below. I would love you hear from you.

 

Post by Darshan Joshi

Darshan has a deep interest in Web technologies. He loves to empower MSME with his custom web development services. He is a firm believer of a true end to end solution. He offers a solution from website design, content creation, website development, website deployment, digital marketing, to brand building.

Leave a Reply

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