How to add a new XXL bootstrap breakpoint

Topic: How to add a new XXL bootstrap breakpoint

santycg pro asked 1 year ago

I did a little research trying to find how to add a new bootstrap breakpoint for large/ultrawide screens, as the current -xl breakpoint is not enough.

AFAIK there is no way to create a new one just with CSS. It seems I need to edit SCSS files and recompile, but I have not experience with this.

I then found an already-recompiled bootstrap version...

https://www.npmjs.com/package/bootstrap-xxl

...that adds two additional -xxl and -xxxl breakpoints, but I don't know if it is secure to use that bootstrap version (probably not), as it seems is 4 years old and not the exact same version as MDB requires.

So, the question is... is it really possible to add new breakpoints to MDBootstrap JQuery?

I'm using Bootstrap 4.6.1 from cdn.jsdelivr.net + mdbootstrap 4.19.1

Add comment

santycg pro answered 1 year ago

0 0 Best answer

<p>Ok, I found a solution using just a custom .css file.</p>

<p>I have added xxl and xxxl breakpoints for .col and .row-cols.
Just need to load the custom .css file AFTER loading bootstrap.css</p>

<pre class="prettyprint"><code>    @media (min-width: 1550px) {
    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .d-xxl-none {
        display: none !important;
    }

.d-xxl-inline {
        display: inline !important;
    }

}

@media (min-width: 1550px) {

.row-cols-xxl-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

.row-cols-xxl-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

.row-cols-xxl-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

.row-cols-xxl-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

.row-cols-xxl-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

.row-cols-xxl-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

.row-cols-xxl-7 > * {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }

.row-cols-xxl-8 > * {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

.row-cols-xxl-9 > * {
        -ms-flex: 0 0 11.11111%;
        flex: 0 0 11.11111%;
        max-width: 11.11111%;
    }

.row-cols-xxl-10 > * {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

.row-cols-xxl-11 > * {
        -ms-flex: 0 0 9.09090909%;
        flex: 0 0 9.09090909%;
        max-width: 9.09090909%;
    }

.row-cols-xxl-12 > * {
        -ms-flex: 0 0 8.3333333%;
        flex: 0 0 8.3333333%;
        max-width: 8.3333333%;
    }

}

@media (min-width: 2200px) {
    .col-xxxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-xxxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .col-xxxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-xxxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xxxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-xxxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-xxxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-xxxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .col-xxxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .col-xxxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-xxxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .col-xxxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .col-xxxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .d-xxxl-none {
        display: none !important;
    }

.d-xxxl-inline {
        display: inline !important;
    }

}

@media (min-width: 2200px) {

.row-cols-xxxl-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

.row-cols-xxxl-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

.row-cols-xxxl-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

.row-cols-xxxl-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

.row-cols-xxxl-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

.row-cols-xxxl-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

.row-cols-xxxl-7 > * {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }

.row-cols-xxxl-8 > * {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

.row-cols-xxxl-9 > * {
        -ms-flex: 0 0 11.11111%;
        flex: 0 0 11.11111%;
        max-width: 11.11111%;
    }

.row-cols-xxxl-10 > * {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

.row-cols-xxxl-11 > * {
        -ms-flex: 0 0 9.09090909%;
        flex: 0 0 9.09090909%;
        max-width: 9.09090909%;
    }

.row-cols-xxxl-12 > * {
        -ms-flex: 0 0 8.3333333%;
        flex: 0 0 8.3333333%;
        max-width: 8.3333333%;
    }

}
</code></pre>

Please insert min. 20 characters.

Ok, I found a solution using just a custom .css file.

I have added xxl and xxxl breakpoints for .col and .row-cols. Just need to load the custom .css file AFTER loading bootstrap.css

    @media (min-width: 1550px) {
    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .d-xxl-none {
        display: none !important;
    }

    .d-xxl-inline {
        display: inline !important;
    }

}

@media (min-width: 1550px) {

    .row-cols-xxl-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xxl-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xxl-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xxl-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xxl-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xxl-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .row-cols-xxl-7 > * {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }

    .row-cols-xxl-8 > * {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .row-cols-xxl-9 > * {
        -ms-flex: 0 0 11.11111%;
        flex: 0 0 11.11111%;
        max-width: 11.11111%;
    }

    .row-cols-xxl-10 > * {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

    .row-cols-xxl-11 > * {
        -ms-flex: 0 0 9.09090909%;
        flex: 0 0 9.09090909%;
        max-width: 9.09090909%;
    }

    .row-cols-xxl-12 > * {
        -ms-flex: 0 0 8.3333333%;
        flex: 0 0 8.3333333%;
        max-width: 8.3333333%;
    }

}


@media (min-width: 2200px) {
    .col-xxxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-xxxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .col-xxxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-xxxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xxxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-xxxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-xxxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-xxxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .col-xxxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .col-xxxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-xxxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .col-xxxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .col-xxxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .d-xxxl-none {
        display: none !important;
    }

    .d-xxxl-inline {
        display: inline !important;
    }

}

@media (min-width: 2200px) {

    .row-cols-xxxl-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xxxl-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xxxl-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xxxl-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xxxl-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xxxl-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .row-cols-xxxl-7 > * {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }

    .row-cols-xxxl-8 > * {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .row-cols-xxxl-9 > * {
        -ms-flex: 0 0 11.11111%;
        flex: 0 0 11.11111%;
        max-width: 11.11111%;
    }

    .row-cols-xxxl-10 > * {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

    .row-cols-xxxl-11 > * {
        -ms-flex: 0 0 9.09090909%;
        flex: 0 0 9.09090909%;
        max-width: 9.09090909%;
    }

    .row-cols-xxxl-12 > * {
        -ms-flex: 0 0 8.3333333%;
        flex: 0 0 8.3333333%;
        max-width: 8.3333333%;
    }

}

Ian Morris free commented 1 year ago

Awesome! I've been looking for this for a while. And now you made it easy. THANK YOU. I edited the min-width to 1560 and 2208 respectively (to be divisible by 12) and added an xxxxl at 3000. The results look great. Thanks again.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: MDB4 4.19.1
Device: PC
Browser: All
OS: All
Provided sample code: No
Provided link: Yes

santycg

Pro User 0Support score
1Questions 1Answers 0Snippets