Grid Ratio - 8:4

Grid Ratio - 6:6

Grid …"/> Try Bootstrap Online

Grid Ratio - 8:4

Grid Ratio - 6:6

Grid […]"/>

Stacked-to-horizontal : Bootstrap Grid Example

Stacked-to-horizontal : Bootstrap Grid Example

<!DOCTYPE html>
<html>
<head>
  <title>Try Bootstrap Online</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h3>Grid Ratio - 8:4</h3>
  <div class="row">
    <div class="col-md-8" 
         style="background-color:#336699; height:80px"></div>
    <div class="col-md-4" 
         style="background-color:#448811; height:80px"></div>
  </div>
  <h3>Grid Ratio - 6:6</h3>
  <div class="row">
    <div class="col-md-6" 
         style="background-color:#336699; height:80px"></div>
    <div class="col-md-6" 
         style="background-color:#448811; height:80px"></div>
  </div>
  <h3>Grid Ratio - 4:2:6</h3>
  <div class="row">
    <div class="col-md-4" 
         style="background-color:#336699; height:80px"></div>
    <div class="col-md-2" 
         style="background-color:#448811; height:80px"></div>
    <div class="col-md-6" 
         style="background-color:#339999; height:80px"></div>
  </div>
</div>
</body>
</html>

Output :

Example Stacked-to-horizontal - 1

Explanation :

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

above code will create 2 columns in the current div tag. Out of the 12 columns, 8 columns are combined to make the single column and 4 parts are merged to make single column. Similarly -

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

We have merged equal number of columns to make single individual column.

Fluid container :

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>