Personalize the breakpoints of Bootstrap 4's grid system

Question

Personalize the breakpoints of Bootstrap 4's grid system

In my project, I am facing a situation where I need a 1280 breakpoint to switch from desktop to tablet, instead of the xl breakpoint at 1200 as defined in Bootstrap. How can I globally change the xl breakpoint in Bootstrap without recompiling from the source files?

I attempted to modify the Sass build by setting the breakpoints like this:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

Unfortunately, the xl breakpoint remained unchanged globally and still triggered at 1200px width.

css twitter-bootstrap sass responsive-design bootstrap-4

Answer 1

Answer №1

Customizing Bootstrap 4.x & 5.x

To customize Bootstrap according to your needs, make sure to modify the $grid-breakpoints and $container-max-widths variables before you import the Bootstrap sources. Below is a sample code snippet in 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...

Answer 2

Customizing Bootstrap 4.x & 5.x

To customize Bootstrap according to your needs, make sure to modify the $grid-breakpoints and $container-max-widths variables before you import the Bootstrap sources. Below is a sample code snippet in 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...

Answer 3

Answer №2

To make changes to the $grid-breakpoints variable, simply update it as needed. Don't forget to include /bootstrap or bootstrap/variables in your custom.scss, and then import bootstrap after.

Here's an example:

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

Check out the demo here.

For more information, refer to How to customize Bootstrap 4 with SASS

Answer 4

To make changes to the $grid-breakpoints variable, simply update it as needed. Don't forget to include /bootstrap or bootstrap/variables in your custom.scss, and then import bootstrap after.

Here's an example:

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

Check out the demo here.

For more information, refer to How to customize Bootstrap 4 with SASS

Answer 5

Answer №3

As outlined in their official documentation, customizing Bootstrap requires the following steps:

Manually transfer desired code snippets from /scss/_variables.scss to _custom.scss
Eliminate any instances of !default in the transferred code and adjust values accordingly
Recompile the codebase by executing npm run dist to apply modifications (refer to the Build tools section for further instructions)

It is advised against directly altering the contents of _variables.scss, as updates to Bootstrap may overwrite such modifications. By following the aforementioned procedure, users can safely update Bootstrap while retaining their custom changes.

Note: Even if disregarding future updates, individuals who opt to edit /scss/_variables.scss directly must still recompile to propagate alterations to the /dist/ files.

In response to basZero's skepticism regarding the viability of this method, it is crucial to acknowledge Bootstrap's inherent modularity and configurability. Extensive guidance is provided through:

build tools
theming
as well as comprehensive documentation on its structure

The meticulous detailing of the recompilation process signifies its endorsement within Bootstrap's development framework.

Additionally, tools like bootstrap.build offer online recompilation capabilities, further streamlining the customization process. By recompiling, adjustments can be made to column configurations, spacing values, responsiveness breakpoints, and module selection, allowing for tailored Bootstrap implementations.

Answer 6

As outlined in their official documentation, customizing Bootstrap requires the following steps:

Manually transfer desired code snippets from /scss/_variables.scss to _custom.scss
Eliminate any instances of !default in the transferred code and adjust values accordingly
Recompile the codebase by executing npm run dist to apply modifications (refer to the Build tools section for further instructions)

It is advised against directly altering the contents of _variables.scss, as updates to Bootstrap may overwrite such modifications. By following the aforementioned procedure, users can safely update Bootstrap while retaining their custom changes.

Note: Even if disregarding future updates, individuals who opt to edit /scss/_variables.scss directly must still recompile to propagate alterations to the /dist/ files.

In response to basZero's skepticism regarding the viability of this method, it is crucial to acknowledge Bootstrap's inherent modularity and configurability. Extensive guidance is provided through:

build tools
theming
as well as comprehensive documentation on its structure

The meticulous detailing of the recompilation process signifies its endorsement within Bootstrap's development framework.

Additionally, tools like bootstrap.build offer online recompilation capabilities, further streamlining the customization process. By recompiling, adjustments can be made to column configurations, spacing values, responsiveness breakpoints, and module selection, allowing for tailored Bootstrap implementations.

Personalize the breakpoints of Bootstrap 4's grid system

Answer №1

Customizing Bootstrap 4.x & 5.x

Answer №2

Answer №3

Similar questions

Tips for aligning my icon in the middle when I collapse my sidebar

Effortlessly move events to a different calendar using the tab menu feature in FullCalendar

Implementing dynamic element selection with jQuery: combining onClick and onChange events

Arranging Columns in Bootstrap 4.0

How can I restrict the Bootstrap dropdown menu to only open downwards?

"Hiding elements with display: none still occupies space on the

In the Bootstrap multiselect feature, users will be able to choose whether to display an image or selected text

Troublesome Display of Badges in Bootstrap 5

What is the best way to shift <p> slightly to the left using css?

How can I align text vertically inside a button using HTML and CSS to ensure it is at the top?

Customize the yellow background color of Safari's autofill feature by following these simple

Leveraging the select class in Flask

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Exploring the world of child theme customization in WordPress

Webpack 5 now supports the mini-css-extract-plugin for efficiently extracting scss files

Tips for adjusting the color of a pin without altering anything else

Can you identify the animation being used on this button - is it CSS or JavaScript?

The CSS file I've linked to in my HTML (ejs) document seems to be getting

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

Instructions for creating a background within a container and positioning text in the center of the image utilizing HTML and CSS