Any way to add a breakpoint in Bootstrap?

Question

Is there any way to add a 5th breakpont to 4 that already exist? Unfortunaetly, 4 is not enough for a project we currenty work on. the idea was to create a new break point s

Answer 1

On Bootstrap 3, adding a breakpoint is not simple.

As indicated in this issue, you must add your own.

Here is a sample code to add new breakpoint with a sass file or a css file.

Answer 2

I think it's a good practice to grab the less files of bootstrap and just produce a new CSS in the way you need. The first approach is to use variables.less file, that file contains usually all that you need.

For what you need to customize there are many variables, for example you can change the number of columns altering the variable grid-columns and also change the breakpoints.

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:              12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

https://github.com/twbs/bootstrap/blob/master/less/variables.less#L281-L332

It's also good to get familiar with CSS preprocessors as less and sass, they are becoming a standard these days.

See also Twitter Bootstrap Customization Best Practices [closed]

Good luck!

Answer 3

I use this in my project:

@media (min-width: 1600px) {
    @for $i from 1 through 12 {
        $width: $i / 12 * 100;
        .col-xl-#{$i} {
            width: unquote($width + '%');
            float: left;
        }
    }   
}

Answer 4

you can create a custom css file and customize your columns as follows:

.grid-seven .col-md-1 { width: 14.285714285714%; }
.grid-seven .col-md-2 { width: 28.571428571429%; }
.grid-seven .col-md-3 { width: 42.857142857143%; }
.grid-seven .col-md-4 { width: 57.142857142857%; }
.grid-seven .col-md-5 { width: 71.428571428571%; }
.grid-seven .col-md-6 { width: 85.714285714286%; }
.grid-seven .col-md-7 { width: 100%; }

For your case you have to use grid-five

.grid-five .col-md-1 { width: 20%; }
.grid-five .col-md-2 { width: 40%; }
.grid-five .col-md-3 { width: 60%; }
.grid-five .col-md-4 { width: 80%; }
.grid-five .col-md-5 { width: 100%; }

the html is like this:

<div class='row grid-five'>
    <div class='col-md-1'>this will take 1/5th of the row</div>
    <div class='col-md-2'>this will take 2/5th of the row</div>
</div>
<div class='row grid-seven'>
    <div class='col-md-1'>this will take 1/7th of the row</div>
    <div class='col-md-2'>this will take 2/7th of the row</div>
</div>

This would in no way affect the default bootstrap grid system so you are safe. Keep in mine that grid-seven and grid-five are classes I created myself so you can create your own classes. grid7, grid-5, grid5 grid-7 or just use the one I used