Bootstrap Component in AEM

[SilambarasanSh1]

Hi Team,

On a plain vanilla instance, we are trying create a component using bootstrap. AEM 6.5.18

But the component is not taking the full width of the screen. Its not taking the 12 columns. When the same is loaded as a standalone HTML it takes the full width of the screen. Any hints to use Bootstrap in AEM?

Thanks.

Best Regards,

Simbu

[arunpatidar]

Hi @SilambarasanSh1 
It seems , AEM css is overriding the width.

Could you please check using dev tool, what CSS is causing the width issue?

[MayurSatav]

@SilambarasanSh1 ,

The AEM grid system comes with pre-defined classes for columns. Identify the specific grid classes that are already applied to your component. To make it work within your component, you need to customize the AEM grid CSS at the page level.

[Mahedi_Sabuj]

Inspect the body's CSS to see if the "page" class is present, as it may contain a style defining a width of 1024px.

[SilambarasanSh1 · Accepted solution]

We have applied the below CSS and the component is taking the full width in all view ports, could anyone please confirm if this is a right way?

/* Standard Layout for Most Screens */
@media (min-width: 576px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
    }
}

/* Customized Layout for Large Desktops */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px !important;
    }
}

/* Extra Large Screens and Special Cases */
@media (min-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1800px !important;
    }
}

/* Tablets and Small Desktops */
@media (min-width: 768px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
    }
}

/* Large Screens with Widescreen Monitors */
@media (min-width: 1920px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 2000px !important;
    }
}

/* Full HD Displays */
@media (min-width: 2560px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 2500px !important;
    }
}