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

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:

    
this will take 1/5th of the row
    
this will take 2/5th of the row


    
this will take 1/7th of the row
    
this will take 2/7th of the row

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