Bootstrap Grid System and Layout

How to Create Layouts with Twitter Bootstrap Grid System
Bootstrap grid system provides the fastest and easy way to create layouts of web pages. As opposed to the previous grid system which is fixed by default the new version i.e. Twitter Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

What is Bootstrap Grid System?
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Let us understand the above statement. Bootstrap 3 is mobile first in the sense that the code for Bootstrap now starts by targeting smaller screens like mobile devices,tablets, and then “expands” components and grids for larger
screens such as laptops, desktops..etc
Working of Bootstrap Grid System
Grid systems are used for creating page layouts through a series of rows and columns that house your content.
Here’s how the Bootstrap grid system works

  • Rows must be placed within a .container class for proper alignment and padding.
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined grid classes like .row and .col – xs -4are available for quickly making grid layouts. LESS mixins canalso be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first
    and last column via negative margin on .rows
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4

With the new Twitter Bootstrap 3 mobile first grid system you can easily control how your website layout will render on different types of devices that have different screen sizes like cell phones, tablets, desktops, etc.


Creating Fixed Layout with Twitter Bootstrap
With Twitter Bootstrap 3 you can still create layouts of web pages based on fixed number of pixels, however this time it is responsive The process of creating the fixed yet responsive layout starts with the .container class. After that create rows with the .row class to wrap the horizontal groups of columns. Rows must be placed within a .container for proper alignment and padding.

Further columns can be create inside the rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represent grid number and should be from 1 to 12. Learn more about Twitter Bootstrap grid system.

In the above illustration there are total 12 content boxes in all devices, but its placement vary according to the device screen size, like in mobile device layout is rendered as one column grid layout which has 1 column and 12 rows placed above one another, whereas in tablet it is rendered as two column grid layout which has 2 columns and 6 rows. Similarly in medium screen size devices like laptop and desktop it is rendered as three column grid layout which as 3 columns and 4 rows, and finally in large screen devices like large desktop it is rendered as four column grid layout which has 4 columns and 3 rows.

Now the question arises how we can create such responsive layouts using this Twitter Bootstrap new mobile first grid system. Let’s start with the medium device that can be a laptop or normal desktop. Since our medium device layout has 3 columns and 4 rows (i.e. 3×4 grid layout). So go ahead and type the following markup.
Example

<div class="container">

        <div class="row">

            <div class="col-md-4"><p>Box 1</p></div>

            <div class="col-md-4"><p>Box 2</p></div>

            <div class="col-md-4"><p>Box 3</p></div>

            <div class="col-md-4"><p>Box 4</p></div>

            <div class="col-md-4"><p>Box 5</p></div>

            <div class="col-md-4"><p>Box 6</p></div>

            <div class="col-md-4"><p>Box 7</p></div>

            <div class="col-md-4"><p>Box 8</p></div>

            <div class="col-md-4"><p>Box 9</p></div>

            <div class="col-md-4"><p>Box 10</p></div>

            <div class="col-md-4"><p>Box 11</p></div>

            <div class="col-md-4"><p>Box 12</p></div>

        </div>

    </div>

If you see the output of the above example in a laptop or desktop having screen or viewport width greater than or equal to 992px and less than 1200px you will find it has 4 rows where each row has 3 equal columns resulting in 3×4 grid layout.

But just wait, the above example has a major alignment issue. If height of any column is taller than the other it don’t clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.
Example

    

    <div class="container">

        <div class="row">

            <div class="col-md-4"><p>Box 1</p></div>

            <div class="col-md-4"><p>Box 2</p></div>

            <div class="col-md-4"><p>Box 3</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-md-4"><p>Box 4</p></div>

            <div class="col-md-4"><p>Box 5</p></div>

            <div class="col-md-4"><p>Box 6</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-md-4"><p>Box 7</p></div>

            <div class="col-md-4"><p>Box 8</p></div>

            <div class="col-md-4"><p>Box 9</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-md-4"><p>Box 10</p></div>

            <div class="col-md-4"><p>Box 11</p></div>

            <div class="col-md-4"><p>Box 12</p></div>

        </div>

    </div>

Since default gird system has 12 columns and in our layout sum of the every three column number i.e. col-md-* is equal to 12 that’s why we cleared columns after every third occurrence. In any other scenario where columns numbers i.e. col-md-* are different for every column you should use .clearfix after the column that makes the complete 12 column grid.
Now it’s time to customize our layout for other devices. First customize it for tablet. Since inside the tablet our layout rendered as 2×6 grids (i.e. 2 columns and 6 rows). So, go ahead and add the class .col-sm-6 on every column.
Example

    <div class="container">

        <div class="row">

            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>

        </div>

    </div>

Now since sum of every two column number i.e. col-sm-* is equal to 12, so clear floats after every second occurrence of columns.

After clearing floats for small devices our final code would be:
Example

    <div class="container">

        <div class="row">

            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>

            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>

        </div>

    </div>

Similarly you can customize the layout for larger device like large desktop screen

    <div class="container">

        <div class="row">

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>

            <div class="clearfix visible-sm-block"></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>

            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>

        </div>

    </div>

Bootstrap Responsive Utilities Classes
You can use the following responsive classes to enable the visibility of elements on certain devices that screen sizes falls with the specific range.

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value: inline, block and inline-block.

Class Description
.visible-xs-*
Makes the element visible only on extra small devices having screen width less than 768px. Hidden on others.
.visible-sm-*
Makes the element visible only on small devices having screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. Hidden on others.
.visible-md-*
Makes the element visible only on medium devices having screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. Hidden on others.
.visible-lg-*
Makes the element visible only on large devices having screen width greater than or equal to 1200px (i.e. ≥1200px). Hidden on others.

NOTE:You can also mix these classes to make the elements visible on multiple devices. For example you can apply the class .visible-xs-* and .visible-md-* on any element to make it visible on extra small and medium devices.
Example

    <p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>

    <p class="visible-sm-block">This paragraph is visible only on small devices.</p>

    <p class="visible-md-block">This paragraph is visible only on medium devices.</p>

    <p class="visible-lg-block">This paragraph is visible only on large devices.</p>

Similarly you can use these hidden utility classes to hide the elements on certain devices.

Class Description
.hidden-xs
Hide the elements only on extra small devices having screen width less than 768px. Visible on others.
.hidden-sm
Hide the elements only on small devices having screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. Visible on others.
.hidden-md
Hide the elements only on medium devices having screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. Visible on others.
.hidden-lg
Hide the elements only on large devices having screen width greater than or equal to 1200px (i.e. ≥1200px). Visible on others.

Tip: You can also mix these classes to make the elements hidden on multiple devices. For example you can apply the class .hidden-xs and .hidden-md on any element to make it hidden on extra small and medium devices.

  • <p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>
  • <p class="hidden-sm">This paragraph is hidden only on small devices.</p>
  • <p class="hidden-md">This paragraph is hidden only on medium devices.</p>
  • <p class="hidden-lg">This paragraph is hidden only on large devices.</p>

Similar to the regular responsive classes, you can use the following utility classes to show or hide certain elements for printing purpose or devices.

Class Description
.visible-print-block
Hide block elements for Browser rendering while visible for print.
.visible-print-inline
Hide inline elements for Browser rendering while visible for print.
.visible-print-inline-block
Hide inline-block elements for Browser rendering while visible for print.
.hidden-print
Hide elements for printing while visible on Browser.

What is Responsive Layout
Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user.

With the growing trend of smart phones and tablets, it has become almost unavoidable to ignore the optimization of sites for mobile devices. Responsive web design is a preferable alternative and an efficient way to target a wide range of devices with much less efforts.

Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone.

Creating Responsive Layout with Bootstrap
With the new Twitter Bootstrap 3 mobile first grid system creating the responsive and mobile friendly websites has become much easier. As opposed to previous version you don’t need to include any additional style sheet to enable responsive feature. Twitter Bootstrap 3 is responsive and mobile friendly from the start. It’s four tiers grids classes provides better control over the layout as well as how it will be rendered on different types of devices like cell phones, tablets, desktop and laptops, large screen devices etc
Example


    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Twitter Bootstrap 3 Responsive Layout Example</title>

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

    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

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

    </head>

    <body>

        <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">

            <!-- Brand and toggle get grouped for better mobile display -->

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <a class="navbar-brand" href="#">shiksha360</a>

                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->

                <div class="collapse navbar-collapse" id="navbarCollapse">

                    <ul class="nav navbar-nav">

                        <li class="active"><a href="http://www.tutorialrepublic.com" target="_blank">Home</a></li>

                        <li><a href="http://www.tutorialrepublic.com/about-us.php" target="_blank">About</a></li>

                        <li><a href="http://www.tutorialrepublic.com/contact-us.php" target="_blank">Contact</a></li>

                    </ul>

                </div>

            </div>

        </nav>

        <div class="container">

            <div class="jumbotron">

                <h2 style="background:#000">Create Websites</h2>

                <p>In today's world internet is the most popular way of connecting with the people. At <a href="http://shiksha360.com/" target="_blank">shiksha360.com</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>

                <p><a href="http://shiksha360.com/" target="_blank" class="btn btn-success btn-lg">Started today</a></p>

            </div>

            <div class="row">

                <div class="col-sm-6 col-md-4 col-lg-2">

                    <h2>HTML 5</h2>

                    <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>

                    <p><a href="http://tutorial.shiksha360.com/html5/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>

                </div>

                <div class="col-sm-6 col-md-4 col-lg-2">

                    <h2>CSS</h2>

                    <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>

                    <p><a href="http://tutorial.shiksha360.com/css/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>

                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-sm-6 col-md-4 col-lg-2">

                    <h2>Bootstrap</h2>

                    <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development. The Twitter Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can create web your own website with much less efforts.</p>


                    <p><a href="http://tutorial.shiksha360.com/bootstrap-css-framework/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>

                </div>

                <div class="clearfix visible-md-block"></div>

                

                <div class="clearfix visible-sm-block"></div>

                <div class="col-sm-6 col-md-4 col-lg-2">

                    <h2>Examples</h2>

                    <p>The examples section encloses an extensive collection of examples on various topic that you can try and test yourself using online HTML editor.</p>

                    <p><a href="http://tutorial.shiksha360.com/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>

                </div>

                <div class="col-sm-6 col-md-4 col-lg-2">

                    <h2>FAQ</h2>

                    <p>The collection of Frequently Asked Questions (FAQ) provides brief answers to many common questions related to web design and development.</p>

                    <p><a href="http://tutorial.shiksha360.com/bootstrap-css-framework/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>

                </div>

            </div>

            <hr>

            <div class="row">

                <div class="col-sm-12">

                    <footer align="center">

                        <p>&copy; Copyright 2013 shiksha360.com</p>

                    </footer>

                </div>

            </div>

        </div>

    </body>

    </html>

xvideos

Admin has written 171 articles