×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Introduction. what is bootstrap? Bootstrap Buttons with examples
Bootstrap Grid System create grid view in web page - Bootstrap 3
2835    Arnab De    16/05/2017

Bootstrap Grid Introduction

Here we start bootstrap Grid tutorials for all the students and learner of our site. It is a very easy and fast web development framework. we can design a very efficient and interactive web site with a very short time. Bootstrap is nothing but a Blueprint of Twitter. It is developed by Mark Otto and Jacob Thornton at Twitter.

Bootstrap Grid

We can build up the layout of all shapes and sizes using the bootstrap grid system. The total width of the parent container divided into 12 columns. We can merge or split the columns as per requirement.

Bootstrap Grid System

12 Column Grid System
12 Column Grid System

Up to 12 columns across the page or parent container are allowed in this framework. We can create wider columns by grouping the columns together. Bootstrap's grid system is fully responsive. That is the columns are reset automatically with the different screen size.

softetechnologies

Grid Classes

Four different classes are allowed in Bootstrap grid system

  • xs (for phones) : Extra Small
  • sm (for tablets) : small
  • md (for desktops) : medium size
  • lg (for larger desktops) : Extra large desktop (projector)

The classes above can be combined to create more dynamic and flexible layouts.

 

softetechnologies

Example of Bootstrap Grid

custom CSS

.innerBox
{
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
border-radius:10px 10px 0 0;
}
.innerBox .header
{
background-color:#eee;
text-align:center;
color:#000;
font-weight:bold;
font-size:26px;
height:32px;
border-radius:10px 10px 0 0; 
}
.innerBox .content
{
background-color:#fff;
text-align:justify;
color:#000;
padding:10px;
}

Bootstrap Introduction. what is bootstrap? Bootstrap Buttons with examples
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
You can't cross the sea merely by standing and staring at the water.
Rabindranath Tagore
1337
57.24
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     43530
01/01/2018     36478
25/06/2018     35475
28/06/2017     34548
02/08/2017     32975
01/08/2017     27458
06/07/2017     27205
15/05/2017     26841
14/07/2017     22455
21/04/2018     21107
softetechnologies