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
Solved! Go to Solution.
Views
Replies
Total Likes
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;
}
}
Hi @SilambarasanSh1
It seems , AEM css is overriding the width.
Could you please check using dev tool, what CSS is causing the width issue?
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.
Inspect the body's CSS to see if the "page" class is present, as it may contain a style defining a width of 1024px.
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;
}
}