30-Jan-2024

Using Bootstrap with Oxygen Builder

My Blog

Combining two great website building tools together, Bootstrap and Oxygen Builder.

Step 1 – Add Bootstrap’s CSS to Oxygen

Bootstrap comes with a lot of default CSS. Since we’re only using it for its grid, we can cut most of it out.

It also uses different breakpoints than Oxygen, and these will need modifying to make sure things line up.

This has already been done in the file below. Note that it's an old version of Bootstrap and may have issues with modern standards.

The CSS is too long for this page, so access it by clicking the button below:

bootstrap-grid-oxygen-default Download

Reducing Bootstrap's Size

With version 5 onwards, using SASS, it's possible to reduce Bootstrap's size by only importing the modules needed. See https://getbootstrap.com/docs/5.3/customize/sass/ for more information.

Custom Bootstrap Helpers

As you start using it more, you might want to start manipulating Bootstrap a bit to improve your workflow further.

To give you an idea, you can:

Give yourself different gutter size options on your rows
Automatically create vertical spacing between columns when stacked on mobile

Which is exactly what has been done below using custom CSS below.

It's not advisable copying it verbatim as it hasn’t been tested thoroughly, and the gutters/margins are completely arbitrary.

It can be used as a starting point for creating something similar on your site, though.

/* Custom Bootstrap Helpers */
 
/*Microthemer Bootstrap Compatibility Fix */
body[class*="mt-"] {
    margin-top: 0 !important;
}
 
/* No gutters between columns - applied to row */
.no-gutters>[class*="-col"] {
    padding-right: 0;
    padding-left: 0;
}
 
/* Various gutter sizes - applied to row */
.gutters-1 {
    margin-right: -10px;
    margin-left: -10px;
}
 
.gutters-1>[class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
}
 
.gutters-2 {
    margin-right: -15px;
    margin-left: -15px;
}
 
.gutters-2>[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}
 
.gutters-3 {
    margin-right: -30px !important;
    margin-left: -30px !important;
}
 
.gutters-3>[class*="col-"] {
    padding-right: 30px !important;
    padding-left: 30px !important;
}
 
.gutters-4 {
    margin-right: calc(-4% / .92) !important;
    margin-left: calc(-4% / .92) !important;
}
 
.gutters-4>[class*="col-"] {
    padding-right: 4% !important;
    padding-left: 4% !important;
}
 
.gutters-5 {
    margin-right: calc(-5% / .9) !important;
    margin-left: calc(-5% / .9) !important;
}
 
.gutters-5>[class*="col-"] {
    padding-right: 5% !important;
    padding-left: 5% !important;
}
 
/* Disable the gutters on mobile devices (since columns stack) */
@media (max-width: 767px) {
    .gutters-1,
    .gutters-2,
    .gutters-3,
    .gutters-4,
    .gutters-5 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .gutters-1>[class*="col-"],
    .gutters-2>[class*="col-"],
    .gutters-3>[class*="col-"],
    .gutters-4>[class*="col-"],
    .gutters-5>[class*="col-"] {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}
 
@media (max-width: 767px) {
    /* Reverse columns on mobile - applied to row */
    .row.reverse-columns-sm {
        flex-direction: column-reverse;
    }
     
    /* Automatic vertical spacing between columns on mobile */
    .row:not(.reverse-columns-sm) [class*="col-"]+[class*="col-"] {
        margin-top: 60px;
    }
    /* Automatic spacing adjusted for reversed columns */
    .row.reverse-columns-sm [class*="col-"]:first-child {
        margin-top: 60px;
    }
    /* Use smaller vertical spacing */
    .mobile-mt-1:not(.reverse-columns-sm) [class*="col-"]+[class*="col-"] {
        margin-top: 30px;
    }
    .mobile-mt-1.reverse-columns-sm [class*="col-"] {
        margin-top: 30px;
    }
    /* No automatic spacing */
    .mobile-mt-0 [class*="col-"] {
        margin-top: 0px !important;
    }
}

References

From https://newpulselabs.com/bootstrap-grid-oxygen/, viewed 30-Jan-2024.