How to Give The Col-Md-1.5 in Bootstrap

Can I give the col-md-1.5 in bootstrap?

As @bodi0 correctly said, it is not possible. You either have to extent Bootstrap's grid system (you can search and find various solutions, here is a 7-column example) or use nested rows e.g. http://bootply.com/dd50he9tGe.

In the case of nested rows you might not always get the exact result but a similar one

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

How at least approximately imitate col-md-1.5?

If you don't want to declare any new classes padding etc. You can simply nest the columns bootply.com

Bootstrap 3 1.5 column offset

I made something similar for an org-chart like this:

HTML

<div class="container">
    <div class="row">
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
    </div>
    <div class="row center-boxes">
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
    </div>
 </div>

CSS

  .container{
    background:#ccc;
  }

  .box{
    background: gray;
    height:50px;
    text-align:center;
    padding:15px;
    border:1px solid black;
  }

  .center-boxes div{
     margin:0 -4% 0 4%;
  }

*This only satisfies the desktop view, adjust accordingly to smaller devices until you end up with col-xs-12 which at that point the offset (push) won't matter

And some @media query adjustments will be needed at 1024px and 991px with the margin:0 -4% 0 4%;

See the working demo here

Half columns in Twitter Bootstrap 3

You can try this :

Just split a col-9 in 2 parts.

Bootply : http://www.bootply.com/128927

HTML :

   <div class="col-xs-3">  col-xs-3 </div>
   <div class="col-xs-9">
      <div class="row">
         <div class="col-xs-6">col-xs-4.5</div>
         <div class="col-xs-6">col-xs-4.5  </div>
      </div>
   </div>

---

Related Topics