51

I have this, but I feel 4 is too big for my sidebar width and 3 is too small (it has to add up to 12).

  <div class="col-md-8">
  <div class="col-md-4">

I tried this but it doesn't work:

  <div class="col-md-8.5">
  <div class="col-md-3.5">

Is there another way to get a similar outcome?

Thanks for your help!

AnthonyGalli.com
  • 2,796
  • 5
  • 31
  • 80
  • Changing to a 16- or 24-column layout for more flexibility: http://stackoverflow.com/questions/11591185/how-to-use-bootstrap-with-16-or-24-columns – isherwood Feb 26 '15 at 19:24
  • Is your site responsive? It's best to configure your content to flow more easily. Few sidebars are always the same width in today's web. – isherwood Feb 26 '15 at 19:25

6 Answers6

33

To expand on @isherwood's answer, here is the complete code for creating custom -sm- widths in Bootstrap 3.3

In general you want to search for an existing column width (say col-sm-3) and copy over all the styles that apply to it, including generic ones, over to your custom stylesheet where you define new column widths.

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}
Tobia
  • 17,856
  • 6
  • 74
  • 93
24

For a 12 columns grid, if you want to add half of a column (4,16667%) to each column width. This is what you do.

For example, for col-md-X, define .col-md-X-5 with the following values. 

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667

I rounded certain values.

Secondly, to avoid copying css code from the original col-md-X, use them in the class declaration. Be careful that they should be added before your modified ones. That way, only the width gets override.

<div class="col-md-2 col-md-2-5">...</div>
<div class="col-md-5">...</div>
<div class="col-md-4 col-md-4-5">...</div>

Finally, don't forget that the total should not exceed 12 columns, which total 100%.

I hope it helps!

Wawa Loo
  • 2,266
  • 18
  • 15
8

You could certainly create your own classes:

.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}

I'd do this before I'd mess with the default columns. You may want to use those inside these.

You'd probably also want to put those inside a media query statement so that they only apply for larger-than-mobile screen sizes.

isherwood
  • 58,414
  • 16
  • 114
  • 157
7

Bootstrap 4.1+ version of Antoni's answer:

The Bootstrap mixin is now @include make-col($size, $columns: $grid-columns)

.col-md-8half {
  @include make-col-ready();

  @include media-breakpoint-up(md) {
    @include make-col(8.5);
  }
}

.col-md-3half {
  @include make-col-ready();

  @include media-breakpoint-up(md) {
    @include make-col(3.5);
  }
}

Source:

Mario Steingruber
  • 713
  • 7
  • 10
6

You can use Bootstrap's own column mixins make-xx-column():

.col-md-8half {
    .make-md-column(8.5);
}

.col-md-3half {
    .make-md-column(3.5);
}
vchan
  • 835
  • 2
  • 11
  • 27
3

you can customize bootstrap stylesheet, as in:

.col-md-8{
  width: /*as you wish*/;
}

Then, set the media query for that too, as in:

@media screen and (max-width:768px){
  .col-md-8{
     width:99%;
   }
}
Joe Kdw
  • 2,245
  • 1
  • 21
  • 38