M2 - How to avoid default class is picking bootstrap css

[Aveeva]

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?

[abdulrafaywaqar]

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