- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-15-2021
12:27 AM
01-15-2021
12:27 AM
M2 - How to avoid default class is picking bootstrap css
I am using bootstrap for home page cms block design purpose and declared in
app\design\frontend\zero_theme\mytheme\Magento_Cms\web\css\source\bootstrap.min.css
Home page looking good, but my PLP & PDP page getting an alignment issue, because of bootstrap.
Default class is picking bootstrap css, how to solve this issue?
I am using a custom theme inherit from blank theme.
How to solve the bootstrap issue?
Labels:
1 REPLY 1
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-16-2021
03:10 PM
01-16-2021
03:10 PM
Re: M2 - How to avoid default class is picking bootstrap css
You have to override the existing bootstrap style by adding custom.css below bootstrap.css in the head section of your html place your c
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
Then in custom.css you have to use the exact same selector for the element you want to override. In the case of legend it just stays legend in your custom.css because bootstrap hasn't got any selectors more specific.
legend {
display: inline;
width: auto;
padding: 0;
margin: 0;
font-size: medium;
line-height: normal;
color: #000000;
border: 0;
border-bottom: none;
}
But in case of h1 for example you have to take care of the more specific selectors like .jumbotron h1 because
h1 {
line-height: 2;
color: #f00;
}
will not override
.jumbotron h1,
.jumbotron .h1 {
line-height: 1;
color: inherit;
}