[b-col] Add custom breakpoint

Hi! I would like to add a custom breakpoint option (xxl). I’ve added the breakpoint correctly in my Sass variables file, now I only need BootstrapVue to properly generate this new breakpoint.

Usage: <b-col sm="6" md="4" lg="3" xl="2" xxl="1"></b-col>

Is this possible to do without changing core files? Or maybe add as a new feature?

[lichaozhy]

$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1600px
);

$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1140px,
	xxl: 1560px
) !default;

@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';

You may set all size values like the code above.

[hjelperne]

Hi,

I am attempting to add the above mentioned xxl breakpoint - and have been searching through the docs… Ref: https://bootstrap-vue.org/docs/reference/theming https://bootstrap-vue.org/docs/reference/settings

I tried adding this to the main.ts file where bootstrap-vue is imported: Vue.use(BootstrapVue, { breakpoints: [xs, 'sm', 'md', 'lg', 'xl', 'xxl'] })

and in my _variables.scss: $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );

Then in my main.scss: @import ‘abstracts/variables’; @import ‘vendors-extensions/bootstrap’; @import ‘~bootstrap’; @import ‘~bootstrap-vue’;

And the main.scss is loaded from vue.config.js: css: { loaderOptions: { scss: { prependData: ‘@import “@/scss/main.scss”;’ } } }

But this still doesnt seem to add the new xxl breakpoint…

I am attempting to <b-container fluid=“xxl”… But the result it just a fluid container - also beyond the new xxl breakpoint (at 1400px)

Anyone who can be forgiveable and give a newbiew a heads-up on this??

Am I even close?