Customize Bootstrap 4's grid system breakpoints-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Customize Bootstrap 4's grid system breakpoints

P粉696891871 2023-10-18 23:01:50

556

I have an application where the design requires 1280 breakpoints from desktop to tablet or xl to lg respectively. However, Bootstrap itself has an xl breakpoint at 1200.

I need to change xl breakpoints globally for boot. Do I have to recompile Bootstrap 4 from source?

I tried setting this in my Sass build:

$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 );

However, there is no change in the global xl breakpoint, it will still break at 1200px wide.

P粉696891871

reply all (2)

P粉0435663142023-10-19 20:06:59 2 floor

Change the$grid-breakpointsvariable and it will work fine. Remember you have to import/bootstraporbootstrap/variablesincustom.scssand then after @import bootstrap.

For example:

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

Demo:https://codeply.com/go/MlIRhbJYGj

Like+0

Add Reply

P粉0526867102023-10-19 00:57:43 1 floor

Bootstrap 4.x and 5.x

Before importing the Bootstrap source, you need to override the$grid-breakpointsand$container-max-widthsvariables. Here is 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...

Like+0

Add Reply