All columns need .col
as base class. Their width can be set using modifier classes (e.g. .col-xs-6
).
<div class="container">
<div class="row">
<div class="col col-xs-6">Column A</div>
<div class="col col-xs-6">Column B</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col-md-6 col-xl-9">Column A</div>
<div class="col col-md-6 col-xl-3">Column B</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col-xs-5">
Column A
</div>
<div class="col col-xs-5 col-xs-offset-2">
Column B
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col-xs-6 col-xs-push-6">
First column in markup
</div>
<div class="col col-xs-6 col-xs-pull-6">
Second column in markup
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col-md-8">
<div class="row">
<div class="col col-md-6">
Nested column A
</div>
<div class="col col-md-6">
Nested column B
</div>
</div>
</div>
</div>
</div>