Customize Bootstrap 4’s grid-system Breakpoints

by

Bootstrap 4.x & 5.x

You need to override the $grid-breakpoints and $container-max-widths variables BEFORE importing the Bootstrap sources. Here a working example (scss):

// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1900px
);
    
$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1610px
);
    
// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...

More Related Contents:

  1. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  2. how to change bootstrap version 4 button color
  3. Vertical Align Center in Bootstrap 4 [duplicate]
  4. Bootstrap align navbar items to the right
  5. Change bootstrap navbar collapse breakpoint without using LESS
  6. Bootstrap Center Vertical and Horizontal Alignment
  7. How to change the bootstrap primary color?
  8. Remove gutter space for a specific div only
  9. How can I change the Bootstrap 4 navbar button icon color?
  10. Bootstrap with different order on mobile version
  11. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  12. Search input with an icon Bootstrap
  13. Change the order of col-*-12 columns in Bootstrap using push/pull
  14. What is class=”mb-0″ in Bootstrap 4?
  15. What does an “&” before a pseudo element in CSS mean?
  16. bootstrap 3 responsive table with fixed first column
  17. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  18. Bootstrap 3: pull-right for col-lg only
  19. Table column sizing
  20. Bootstrap 4 card-deck with number of columns based on viewport
  21. How can I change the order of Bootstrap columns?
  22. Set div height equal to screen size
  23. In a bootstrap responsive page how to center a div
  24. Bootstrap – Removing padding or margin when screen size is smaller
  25. Vertically align Bootstrap badge inside heading
  26. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  27. How to make a Bootstrap 4 full width dropdown in Navbar?
  28. Bootstrap Navbar list items/links not showing
  29. Sass and rounding down numbers. Can this be configured?
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment