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


santycg pro answered 1 year ago


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 11 months 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.



Please insert min. 20 characters.

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