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

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

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?

Solutions/Answers:

Solution 1:

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

Solution 2:

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.

Related:  How to add bootstrap to an angular-cli project

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

References