How to have an empty col-md-* in bootstrap?
If you don't want to use offset as per your requirement, use
<div class="container">
<div class="row" style="background:red">
<div class="col-md-1" style="background:yellow"> </div>
<div class="col-md-4" style="background:green">B</div>
<div class="col-md-6" style="background:red">C</div>
<div class="col-md-1" style="background:yellow"> </div>
</div>
</div>
But, I think you should use offsets
Use offsets. You only need to define the first offset as the second col will float next to the first.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div style="background:#f99" class="col-xs-4 col-xs-offset-1">Cols 2-5</div>
<div style="background:#9f9" class="col-xs-6">Cols 6-11</div>
</div>
</div>
Note: I'm using the xs
column size so it works in the snippet frame.
Note, for Bootstrap 4, the offset classes use different names. The col-*-offset-*
classes become .offset-*
.
See http://upgrade-bootstrap.bootply.com/ for a handy migration guide
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div style="background:#f99" class="col-4 offset-1">Cols 2-5</div>
<div style="background:#9f9" class="col-6">Cols 6-11</div>
</div>
</div>
See https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns