LearnKode

7 Example(s) of Bootstrap Grid


Description :

Dividing the row into six parts by using class .col-md-2.


Bootstrap Grid Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Grid Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">                                                                                        </script>

</head>
<body>
    <div>
        <div class="row">
            <div class="col-md-2" style="background-color:yellow;">col-md-2</div>
            <div class="col-md-2" style="background-color:pink;">col-md-2</div>
            <div class="col-md-2" style="background-color:yellow;">col-md-2</div>
            <div class="col-md-2" style="background-color:pink;">col-md-2</div>
            <div class="col-md-2" style="background-color:yellow;">col-md-2</div>
            <div class="col-md-2" style="background-color:pink;">col-md-2</div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.row class create a row and then under that row create the columns class named .col-md-6 used to create the two columns in a row. Similarly col-sm, col-lg, col-xs can also be used according to requirement.


Bootstrap Grid Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Grid Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</head>
<body>
    <div>
        <div class="row">
            <div class="col-md-6" style="background-color:yellow;">col-md-6</div>
            <div class="col-md-6" style="background-color:pink;">col-md-6</div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Two different classes .col-md-3 and .col-md-9 are used to divide the row in ratio of 3:9


Bootstrap Grid Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Grid Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</head>
<body>
    <div>
        <div class="row">
            <div class="col-md-3" style="background-color:yellow;">col-md-3</div>
            <div class="col-md-9" style="background-color:pink;">col-md-9</div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

  • .xs class used for mobiles.
  • .sm class used for tablets.
  • .md class used for dekstops.
  • .lg class used for large screens.
  • these four classe are so helpfull in creating more dynamic layouts.
  • Note => A single row can't ne divided more than twelve grid columns.


Bootstrap Grid Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Grid Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <h1>Classes for responsive design</h1>
        <div class="row">
            <div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-7</div>
            <div class="col-xs-3 col-md-5" style="background-color:yellow;">.col-xs-3 .col-md-5</div>
        </div>
        <div class="row" style="background-color:lightcyan;">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Use of .hidden-xs, .hidden-sm, .hidden-md and .hidden-lg classes is shown for responsive design.

Note:change the size of browser and try to analyse the use of classes.


Bootstrap Grid Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Grid Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <div class="hidden-sm hidden-xs hidden-md well">visible only on large screens.</div>
    </div>
    <div>
        <div class="hidden-lg hidden-sm hidden-xs well">visible only on medium screens.</div>
    </div>
    <div>
        <div class="hidden-md hidden-lg hidden-xs well">visible only on small screens.</div>
    </div>
    <div>
        <div class="hidden-md hidden-lg hidden-sm well">visible only on extrasmall screens.</div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.visible-sm,.visible-xs,.visible-md,.visible-lg are used here.Change the size of browser and try to analyze what these classes are doing.


Bootstrap Grid Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Grid Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <div class="visible-sm visible-xs visible-md well">hidden only on large screens.</div>
    </div>
    <div>
        <div class="visible-lg visible-sm visible-xs well">hidden only on medium screens.</div>
    </div>
    <div>
        <div class="visible-md visible-lg visible-xs well">hidden only on small screens.</div>
    </div>
    <div>
        <div class="visible-md visible-lg visible-sm well">hidden only on extrasmall screens.</div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

The nested columns are shown, where two columns of col-md-6 are inserted into single col-md-6.


Bootstrap Grid Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Grid Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6" style="background-color:yellowgreen;">
                .col-sm-6
                <div class="row">
                    <div class="col-sm-6" style="background-color:aquamarine;">.col-sm-6</div>
                    <div class="col-sm-6" style="background-color:slategrey;">.col-sm-6</div>
                </div>
            </div>
            <div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output