<div class="container">
<h3>2列目に.offset-クラスを設定した例</h3>
<div class="row">
<div class="col-sm-4">1列目<br>.col-md-4</div>
<div class="col-sm-4 offset-sm-4">2列目<br>.col-md-4 .offset-md-4</div>
</div>
</div>
<div class="container">
<h3>1,2列目ともに.offset-クラスを設定した例</h3>
<div class="row">
<div class="col-sm-3 offset-sm-3">1列目<br>col-md-3 .offset-md-3</div>
<div class="col-sm-3 offset-sm-3">2列目<br>.col-md-3 .offset-md-3</div>
</div>
</div>
<div class="container">
<h3>1列目に.offset-クラスを設定した例</h3>
<div class="row">
<div class="col-sm-6 offset-sm-3">1列目<br>.col-md-6 .offset-md-3</div>
</div>
</div>
.row > [class*=col] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
.row {
background-color: rgba(86,61,124,.15);
}
h3 {
margin-top: 1rem;
text-align: center;
}
.container {
margin-bottom: 20px;
}
This Pen doesn't use any external JavaScript resources.