Aciano Technologies Blog

A Place With Numerous Solutions!

Bootstrap 3 (Introduction to Responsiveness | Post-1)

Today every organization desire to build their website in such a way that would be flexible and display the ideal view at any device such as desktop computers, tablets, mobile devices and etc. They obviously wish to display their web application perfectly not only on every browser but also on different types of screen resolutions. In IT world we call it ‘Responsive’ where every component fits itself to the space it has.

 

If you are planning to build responsive web application you need to just using CSS which is a complicated task but good thing is that we have Twitter Bootstrap in different versions by using of it you can easily customize your page according to your requirements. It provides you good responsive behavior for the application layout; you can see the script below.

 

<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/bootstrap.min.js" type="text/javascript"></script>

 

First of all you need to download the bootstrap from their website and then use the above script to run the bootstrap style in any of your webpage; you can find the URL below.

 

http://getbootstrap.com/getting-started/#download

 

Basically bootstrap 3 supports all types of browser, except the IE7, IE8 & IE9 due to old versions of Internet Explorer, they just don’t support certain CSS3 properties as they are now too aged to support new technology.

The New Grid system in Bootstrap3 uses percentage for width not the pixels. It provides 4 different types of classes to manage the grid system, below you can see those classes.

1.       For Phones (less than 768px) we use .col-xs

2.       For Tablets (768px and up) we use .col-sm

3.       For Medium Desktop (992px and up) we use .col-md

4.       For Large size (1200px and up) we use .col-lg

 

 Please have a look on below screenshots.

 

 

 

 

 

Thank you.