How to have an empty col-md-* in bootstrap?

Question

I'm trying to have two unequal columns in Bootstrap. I want to have one column on each side (so if there are columns from 1 to 12, 1 and 12 will be empty), and col-md-2~5 is one column, and 6~11 is another column.

I can't really find an example for this (other than the offset). Can someone help me?

Answer 1

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