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">&nbsp;</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">&nbsp;</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