How to adapt Elementor Page Builder for the largest screen size in Bootstrap 5.

Table of Contents

Bootstrap is a popular CSS tool for building websites that adjust to different screen sizes, offering a 12-column grid and helpful parts to make web development simple.

Bootstrap 5 includes a new XX-large breakpoint for screens bigger than 1400 pixels, supporting very large displays.

This XX-large breakpoint is very important because laptops and even tablets now commonly have screens with 2K and 4K resolution, which are much larger than standard HD.

A trick for Elementor Page Builder to use Bootstrap 5's XX-large breakpoint.

When creating a custom WordPress theme with both Bootstrap 5 and Elementor, a problem arises because Bootstrap's container is 1320 pixels wide, but Elementor's boxed container is only 1140 pixels wide. This difference causes parts of the website to appear uneven.

We can't just use Elementor for everything. If we need unique sections, we write custom PHP code and place it within Elementor. This is when the website sections look mismatched.

The image shows this problem: the first section, made with custom Bootstrap code, is wider, while the section below it, designed with Elementor, is narrower.

To fix this, there's a simple CSS trick that makes the sections equal when using both Elementor Page Builder and Bootstrap. Just copy and paste the provided CSS code into your stylesheet.

@media screen and (min-device-width: 1400px) {
 .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1320px !important;
        padding-right: calc(1.5rem * .5);
        padding-left: calc(1.5rem * .5);
    }
}

This CSS code uses a media query to apply a maximum width of 1320 pixels to Elementor's box container on screens larger than 1400 pixels.