cancel
Showing results for 
Search instead for 
Did you mean: 

M2 - How to avoid default class is picking bootstrap css

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?
1 REPLY 1

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