Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Bootstrap Component in AEM

Avatar

Level 1

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

1 Accepted Solution

Avatar

Correct answer by
Level 1

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;
    }
}

View solution in original post

4 Replies

Avatar

Community Advisor

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

 

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



Arun Patidar

Avatar

Community Advisor

@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.

Avatar

Community Advisor

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

Avatar

Correct answer by
Level 1

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;
    }
}