Bootstrap Grid System create grid view in web page
16-05-2017    304 times
Bootstrap Grid

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.

Tutorial at home

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.

 

Tutorial at home

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;
}

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.
    Related Post
  Query About the post