Back to Course

BootStrap

0% Complete
0/39 Steps
  1. Introduction to Bootstrap
    What is Bootstrap ?
  2. Why Bootstrap ?
  3. Bootstrap Setup
  4. Customizing Install
  5. Responsive Design
  6. Container class
  7. Grid
    Grid System
  8. Bootstrap Grid Column
  9. Dynamic Layouts
  10. Utility Classes
  11. Navigation Components
    Navs
  12. Navbars
  13. Page Components
    Headers
  14. Panels
  15. ListGroups
  16. Breadcrumbs
  17. Labels
  18. Buttons
  19. Glypgicons
  20. Wells
  21. Forms
    Creating forms
  22. Inline & horizontal forms
  23. Form Validation
  24. Bootstrap Plugins
    Alert Messages
  25. Buttons group
  26. Scroll Spy
  27. Tabs
  28. Collapse
  29. Modal
  30. Customer Plugins
    Bootbox.js
  31. DateTime Picker
  32. Font Awesome
  33. Off-Canvas
  34. Image Gallery
  35. Social Buttons
  36. Sweet Alert
  37. Button
    Buttons
  38. Button Group Button
  39. Button Method

Participants2254

Show more
BootStrap Bootstrap Grid Column
In Progress
Lesson 8 of 39
In Progress

Bootstrap Grid Column

Akash

Bootstrap has four types of class prefixes for creating columns for different size displays:

  • col-xs for extra small displays (screen width < 768px)
  • col-sm for smaller displays (screen width >= 768px)
  • col-md for medium displays (screen width >= 992px)
  • col-lg for larger displays (screen width >= 1200px)

When we specify the class col-xs-12, it means the element should span all 12 of the available Bootstrap columns on extra small screens.

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <h4>Column 1</h4>
        </div>
        <div class="col-xs-12 col-sm-6">
            <h4>Column 2</h4>
        </div>
    </div>
</div>

In this code we have used the class col-xs-12 for an extra small display and class col-sm-6 for a smaller sized display. Hence, each column in an extra small-sized display will occupy all the 12 available Bootstrap columns, which will appear as a stack of columns. Yet on a smaller display, they will occupy only six Bootstrap columns each to achieve a two-column layout.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <h4>Column 1</h4>
            </div>
            <div class="col-xs-12 col-sm-6">
                <h4>Column 2</h4>
            </div>
        </div>
    </div>
  </body>
</html>

Output:

KodNest bt10

You can resize your browser windows to see the dynamic changes.

Nesting Columns

We can create a new set of 12 Bootstrap columns within any column in our layout in order to create nested columns.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col1">
            <h3>Column 1</h3>
            <div class="row">
                <div class="col-md-6 col3">
                    <h3>Column 4</h3>
                </div>
                <div class="col-md-6 col4">
                    <h3>Column 5</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6 col2">
            <h3>Column 2</h3>
        </div>
    </div>
</div>
  </body>
</html>

Output:

KodNest bt11

Offsetting Columns

Offsetting is used to increase the left margin of a column.

For example, if you have a column that should appear after a gap of three Bootstrap columns, you can use the offsetting feature.

Classes that are available for offsetting are:

  • col-xs-offset-*
  • col-sm-offset-*
  • col-md-offset-*
  • col-lg-offset-*

Suppose we want to move a column three Bootstrap columns towards the right in extra-small displays, we can use the class “col-xs-offset-3“, for example:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3 col1">
                <h1>Hello World!</h1>
            </div>
        </div>
  </body>
</html>

Output:

KodNest bt12

This code will result in a column that spans to six Bootstrap columns, offset three columns towards the right.

Centering Column

We can use the offsetting to center a column. Just place same amount of column to both sides of the centered Column.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">
                <h1 style='background:#EED'>Hello World!</h1>
            </div>
        </div>
  </body>
</html>

Output:

KodNest bt13

Pull left and Pull right

Classes such as col-xs-pull-* and col-xs-push-* are used to move a column towards the left and right respectively by a certain number of columns.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="row">
        <div class="col-xs-9 col-xs-push-3">
            <h1>col-xs-push-3</h1>
        </div>
        <div class="col-xs-3 col-xs-pull-9">
            <h1>col-xs-pull-9</h1>
        </div>
    </div>
  </body>
</html>

Output:

KodNest bt14

In the code, col-xs-9 column is pushed by three columns so it has moved towards the right. The col-xs-3 column is also pulled by nine columns towards the left. They appear as if they have swapped their original position when viewed on a browser.

There are several variants of push and pull classes as per the screen size:

  • col-xs-pull-* and col-xs-push-* for extra smaller screens
  • col-sm-pull-* and col-sm-push-* for smaller screens
  • col-md-pull-* and col-md-push-* for medium screens
  • col-lg-pull-* and col-lg-push-* for larger screens

You can replace * with an integer between one and 12.

New Report

Close