5

I need a 2.5 column and a 9.5 column in Bootstrap 3. Can somebody please give me a solution? The only answer i've found is a partition of 3 columns. i need 2 half-columns.

user3701008
  • 71
  • 1
  • 1
  • 4

3 Answers3

3

If you are using the bootstrap sass files you can do it this way:

.col-md-half {
   @extend .col-md-1;
   width: percentage((0.5 / $grid-columns));
}

This is a similar to Ardee Aram's solution but makes use of the bootstrap $grid-columns variable instead.

isxpjm
  • 303
  • 1
  • 4
  • 12
  • I did a similar thing with LESS: .col-sm-push-half{ &:extend(.col-sm-push-1); left: percentage((1.5 / @grid-columns)); } – Confidant May 21 '18 at 18:14
0

Wondering if creating nested columns would work?

<div class="row">
    <div class="col-sm-2" style="background:red">
        Column spans two
    </div>
</div>


<div class="row">
    <div class="col-sm-6">
        <div class="col-sm-6" style="background:pink">
        column spans 2.5
        </div>
    </div>
</div>

Fiddle: https://jsfiddle.net/timgavin/5d5rvba1/

Something to play with anyway... :)

timgavin
  • 4,972
  • 4
  • 36
  • 48
0

I used this code to produce half-columns:

.col-md-half {
   @extend .col-md-1;
   width: 4.166666667%;
}

In case you are wondering, a column is 100% / 12 = 8.3333%. So a half-column is half that.

Ardee Aram
  • 4,740
  • 8
  • 36
  • 37