Bootstrap v3.3.4 Two Columns Grid


Default grid width is in percentage .col-xs-6 { width: 50%; } .col-sm-6 { width: 50%; } .col-md-6 { width: 50%; } .col-lg-6 { width: 50%; }

....
....
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">....</div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">....</div>
</div>

Customizable Two Columns Grid


Customize grid width is in pixel data-col-xs="?" data-col-sm="?" data-col-md="?" data-col-lg="?"

....
....
<div class="row custom-grid">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" data-col-xs="100" data-col-sm="150" data-col-md="200" data-col-lg="250">....</div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">....</div>
</div>

First column width :

Second column width is set dynamically based on first column width



Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Bootstrap v3.3.4 Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Customize Bootstrap Grid Attributes data-col-xs data-col-sm data-col-md data-col-lg