Bootstrap Component in AEM | Community
Skip to main content
S
SilambarasanSh1
December 7, 2023
Solved

Bootstrap Component in AEM

  • December 7, 2023
  • 4 replies
  • 1206 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SilambarasanSh1

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 */
@590883 (min-width: 576px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
    }
}

 

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

 

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

 

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

 

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

 

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

4 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
December 7, 2023

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
    MayurSatav
    Community Advisor and Adobe Champion
    MayurSatavCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    December 7, 2023

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

    Mayur Satav | www.mayursatav.in
      Mahedi_Sabuj
      Community Advisor
      Mahedi_SabujCommunity Advisor
      Community Advisor
      December 7, 2023

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

      Mahedi Sabuj
        S
        SilambarasanSh1AuthorAccepted solution
        December 7, 2023

        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 */
        @590883 (min-width: 576px) {
            .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
                max-width: 100% !important;
            }
        }

         

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

         

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

         

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

         

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

         

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

          Terms & ConditionsAccessibility statement

          Loading footer...