Home > bootstrap > Introduction to Responsive Web Design Using Twitter Bootstrap3

Introduction to Responsive Web Design Using Twitter Bootstrap3

Twitter Bootstrap Framework Structure

 

I started learning responsive web design using Twitter Bootstrap Framework. This is my first tutorial on responsive Web design, I will start with the introduction Bootstrap framework and responsive web design, and at the end of the post you will get an idea how to build responsive web pages using bootstrap framework.

What is Responsive Web Design?

      Instead of telling What is Responsive Web design It’s better to explain What problem does responsive web design solve? Earlier we used to build separate versions of websites for devices like Iphone Blackberry Ipad and Kindle etc because of different resolutions of devices. But daily one new device with new resolution coming into the mobile industry. Building again one more version of website for those new device is foolishness.

     In simple words we should built webpages in such a way that they should look uniformly(best viewing experience) across all the devices irrespective of devices and resolutions.This is nothing but responsive web design.

      Twitter Bootstrap framework provides a great platform for building such responsive web pages.

Introduction To Twitter Bootstrap Framework:

So What is Bootstrap Framework? Initially UI designers has to give design of the website to the developers so that they can proceed further development. But this is waste of time.

  • Twitter Bootstrap is a CSS framework which helps developers in building web pages even though you don’t have any designing experience.
  • All you have to do is write HTML code according to the Bootstrap specifications.
  • There are so many inbuilt classes written in Bootstrap framework. Just you should learn how to use those classes.

I know it’s too high level explanation but once you started learning the framework you will understand.

Responsive web designing became very easy with the help of Twitter Bootstrap framework.

We will start with one simple example First we will decide some design for the webpage.

Setting Up Twitter Bootstrap Framework:

Download the twitter Bootstrap framework zip file and extract them you will find three folders css,js and fonts. and create one html file I created as Index.html.

Twitter Bootstrap Framework Structure
Twitter Bootstrap Framework Structure

Setting up Bootstrap Responsive HTML page:

Before starting our example we will include the all necessary CSS and Js files and attributes to the html file. Have a look at the sample HTML page.Don’t forget to add jQuery file.

 

No need to explain all fields all are self explanatory. The only new thing is viewport meta attribute.

 

The viewport attribute sets the width of the webpage to Device Width and Initially scaling to default size 1. And if you want to increase the zoom or decrease the Zoom you may change this value.

That’s it.Set up is Done. Now we will learn how to write HTML mark up according to bootstrap framework.

Responsive Web Page Using Bootstrap
Responsive Web Page Using Bootstrap

Our webpage contains

  • One Header with Navigation bar
  • One Featured Content
  • Content with 4 horizontal Divisions.

We will write appropriate HTML mark up according to our needs

Bootstrap Header with Responsive Navigation bar:

Our page content should be in center of the screen. Bootstrap provides a “container” class with correct padding and margin values. We will use this container as our parent element. Just write the following Code.

 

Now we will add Title of the web page inside this Div Container

 

No need to add any external styles to H1 tags Bootstrap provides default styling for H1 element.

Now we will add responsive Navigation bar.First have a look at our navigation bar.

Bootstrap Navigation Bar
Bootstrap Navigation Bar

 

The Navigation Bar contains one heading Navigation,Navigation Bar Menu and One search box with submit button.

Bootstrap provides  “navbar” class for navigation bar. Add following HTML code below the title of the website(Inside container Only)

 

I have added one more class “navbar-default” which will add default styles to Navigation bar. Now we will add navigation menu elements

 

Just create a list of elements and Add classes named “nav navbar-nav”. and “Active” class refers to the selected navigation element. Our Menu is ready.

But we have one more search box in navigation Menu To add that search box just add following Code.

 

Normally search box is a form so I added form element And To include it in navigation Bar add “navbar-form”. And I added one more class called “navbar-right” which tells that the search should be in right side of the navigation bar. You can play with this settings by giving “navbar-left” ,”navbar-top” etc.

Just go and look at your webpage. And if you tested it in Mobile or Tab you might observe that this is not responsive. How a responsive menu look like in mobile devices. Have a look at the below image

Bootstrap Responsive Navigation Bar
Bootstrap Responsive Navigation Bar

 

The above menu design is used in Mobile devices. We have Navigation Header (Brand) and Navigation elements in drop box and when you touch the button it will collapse.

So we will slightly modify our code to make it responsive menu

 

First I added entire navigation menu inside “container-fluid” class.We are collapsing and expanding the menu so width and height should be varied accordingly. So I have added “container-fluid” class.

Now I added “navbar-header” class which contains a Button and Navigation header text. The button contains three horizontal icons as shown above figure.

So I have added three span elements with class “”icon-bar”.

And we have to give target and class “navbar-toggle” to button.Target is nothing but our Navigation Menu elements.

The list and search box I moved inside the “collapse navbar-collapse” class. which refers that this is Collapsable Menu. And gave some Id. The Id should be target of Button.

Our responsive Menu is Ready. Now we will add Featured Content.

Featured Content in Twitter Bootstrap:

Now a days most of the webpages contains featured content which will hi-lite the important information of webpages. And some web pages contains carousel.

Bootstrap provides “”jumbotron” class to display featured content. Just add below code under the navigation menu code.

 

And I gave few classes like btn btn-primary btn-lg etc. in anchor tags. those are all classes provided by the bootstrap. You can play around with them. In my coming posts I will try to explain all types of button classes.

Now we will add our main content. Now I am going to explain important feature of Bootstrap framework.

Grid System in Twitter Bootstrap:

Bootstrap is famous because of this Grid System.Bootstrap provides a 12 grid column layout to build web pages. i.e., you can place 12 vertical grids or columns inside any parent element.

This is responsive and mobile first fluid system.More technical words rite I will explain it in simple words.

Our webpage design contains four horizontal divs(Heading1, Heading2, Heading3 and Heading4).

To add this horizontal divs add the following Code

 

The four grid elements should be inside the class “row”. and I gave class names as “col-md-3”. We want four equal grids so 3+3+3+3=12. To put four equally width elements you should give class name as “col-md-3”. Here md-refers to medium devices normally desktops, should display 4 columns inside a row element.

If you want two unequal columns just give classes names as “col-md-8” “col-md-4” and again (8+4=12.) You can play around with this grid system according to your requirements.

And I said this grid system is responsive rite. What does it mean? In medium devices it shows 4 columns and in small devices it shows only one column according to device width. Look at the above gif image. I tested it in my Moto X mobile it’s showing one column per row.

But it’s better to mention this values explicitly so add following classes to the divs

 

Have a look at the below images

Responsive Grid in Desktops
Responsive Grid in Desktops

 

In Desktops medium devices Bootstrap displays 4 columns are in a row. i.e.,”col-md-3″ (3+3+3+3=12)

Responsive Grid in Tabs
Responsive Grid in Tabs

 

In tabs i.e., small devices Bootstrap displays Two columns in a row. col-sd-6 (6+6=12)

Responsive Grid in Mobiles
Responsive Grid in Mobiles

 

In Extra small devices i.e., Bootstrap displays one column in a row .col-xs-12

That means according to width of the device the webpage will adjust.

If you want to create any page layout you should use row- column grid system.

Here is the Final Demo

Responsive Web Design Using Twitter Bootstrap.

Check the responsiveness of web page here and Download the source Code from Here.

Follow my blog for bootstrap tutorials.

I hope you enjoyed this article If so share with your friends and also subscribe to my blog and connect me at social networks.

Arunkumar Gudelli
I am a Simple Guy, Standing Infront of the World, asking you to Follow Me. Don't miss any posts from Me,Subscribe to the RSS Feed. You can connect me via @twitter or @facebook or Google+ or e-mail.
http://www.arungudelli.com