<div class="container">
<div class="row">
<div class="col-sm-12">
<h3>Half size column grid size in bootstrap</h3></div>
<div class="col-xs-5">
<h4>two column grid size(2)</h4>
</div>
</div>
<div class="row">
<div class="col-xs-fivehalf">
<h4>two half grid size(2 1/2)</h4></div>
</div>
<div class="row">
<div class="col-xs-6">
<h4>three column grid size(3)</h4></div>
</div>
<div class="row">
<div class="col-md-12 text-info">
<h3>***It scales upto 12 column sizes and viewport sizes lg,md,sm,xs </h3></div>
</div>
</div>
@mixin col-half($number){
width:(8.33333333% * $number) + 4.16666665%;
float:left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
[class*="col-xs-"]{
background:brown;
color:white;
margin-bottom:10px;
}
.col-xs-fivehalf{
@include col-half(5);
background:brown;
color:white;
}
Also see: Tab Triggers