With custom breakpoints, you can control how the grid is floated on different devices. Bootstrap uses media queries to define its breakpoints, and each breakpoint can easily be customized by changing the value of its associated LESS variables.

Make some changes to the breakpoints in your Bootstrap project. Open custom-variables.less and add the following lines of code:

@screen-xs-min: 500px;
@screen-sm-min: 790px;
@screen-md-min: 1020px;
@screen-lg-min: 1240px;

If you now recompile your styles and reload the page, you will notice that all the breakpoints are invoked a bit later than before. This is especially useful when you have a design that requires certain breakpoints.

Next, we will take a look at how to disable responsiveness completely.