home

Bootstrap Grid Columns

In this tutorial we have covered main content section with couple of columns,  here we have some comparisons between the grid columns and the main content areas is depended on grid columns, this will gives a responsive content sections.

Equal medium Columns

To get six equal width columns for desktops and auto responsive to large desktops, for mobile devices, tablets, and below the columns will change the positions and fit in the screen.

.col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2 .col-md-2
<!DOCTYPE html>
  <html lang="en">
  <head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
    <body>
      <div class="container">
          <div class="col-md-2">Content 1</div>
          <div class="col-md-2">Content 2</div>
          <div class="col-md-2">Content 3</div>
          <div class="col-md-2">Content 4</div>
          <div class="col-md-2">Content 5</div>
          <div class="col-md-2">Content 6</div>
      </div>
    </body>
 </html>

Unequal medium columns

Lets go here we have three class to manage the content section with three unequal medium columns, which is having the class of .col-md-5 .col-md-2.col-md-5. Unequal grid based device automatically stick.

.col-md-5 .col-md-2.col-md-2 .col-md-5
Desktop and mobile

To create for all devices will have to use some specific classes like xs (phones), sm (tablets), md (desktops), and lg (larger desktops), by using this class you can create your own responsive website for your needs.

.col-xs-6 .col-lg-4 .col-xs-12 .col-sm-6 .col-lg-8