Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[b-col] Add custom breakpoint

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

lichaozhycommented, Mar 22, 2022
$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.

hjelpernecommented, Mar 21, 2022


I am attempting to add the above mentioned xxl breakpoint - and have been searching through the docs… Ref:

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add custom breakpoints in bootstrap4 and how to use ...
You can add a new xxl breakpoint like this. Make sure you @import bootstrap after setting the custom grid-breakpoints .
Read more >
Custom breakpoint for column - Beaver Builder
Hi, Is it possible to specify a custom breakpoint for a specific column other than the medium and small global break points.
Read more >
How to set custom breakpoints with Grid Layout from Dash ...
So when using the Grid Layout from the Dash Bootstrap Components module you can specify width for different screen sizes.
Read more >
Layout and Grid System | Components - BootstrapVue
Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit. All breakpoints. For...
Read more >
Breakpoints - React-Bootstrap
If you are looking to use custom breakpoints, you must wrap your ... that components such as Row or Col can parse the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found