Boostrap overwriting CSS. How to avoid?

Question

Boostrap overwriting CSS. How to avoid?

Asked 6 years ago

Viewed 818 times

1

I took a CSS ready template from the internet to choose a payment method for my site. Below is the link to it.

However, when importing the header and footer (I am using PHP for this) that use Bootstrap, the payment page is not configured. When removing the bootstrap link the payment method is normal, but as my header and footer use bootstrap, they are broken.

I tried to create a Section with an id and put before all css code, not succeeding tried to create a div, thus:

Original

...
.price h1 {
font-weight: 300;
color: #18C2C0;
letter-spacing: 2px;
}
...

With Section id = 'payment'

...
#pagamento .price h1 {
font-weight: 300;
color: #18C2C0;
letter-spacing: 2px;
}
...

with a div class = 'payment'

...
.pagamento .price h1 {
font-weight: 300;
color: #18C2C0;
letter-spacing: 2px;
}
...

But I was unsuccessful. I also tried to put the call of my css style before the boostrap link, also did not work.

Is there any way to remove bootstrap on a particular piece of html? Or to overwrite my style file? Or still some other way of being able to use both without either of them being broken?

1 answer

Browser other questions tagged php html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-12-08T15:06:34+00:00

Two things, the first is that the classes you want to overwrite should come last, and not first, so it would be like this:

<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="meu-estilo.css" />

Or if that’s the case.... The important thing is that it comes after the Bootstrap CSS.

<link rel="stylesheet" href="bootstrap.min.css" />
<style>
    h1 {
        font-family: serif;
    }
</style>

EDIT:

You can also try to "reset" all the classes inserted by Bootstrap using an "all:unset" and then rebuild the CSS of your element. You can read more about this property here All property in CSS. What it’s for and how it works?

So for example your CSS would look like this

.price h1 {
  all: unset; /* aqui vc remove os estilos herdados */
  /* agora apenas os CSSs que quer */
  font-weight: 300;
  color: #18C2C0;
  letter-spacing: 2px;
}

.card {
  all: unset; /* aqui vc remove os estilos herdados */
  /* agora apenas os CSSs que quer */
  margin-top: 30px;
  margin-bottom: 30px;
  width: 520px;
  height: 400px;
}

Option with iframe

Also another solution would be to use a <iframe> Place your card in an iframe and call it where you want it. So the Bootstrap CSS will not overwrite the CSS of the elements inside the <iframe> Here you can read more on the subject: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Ex: Notice that I have a Bootstrap Navbar and in the same file I call an iframe as the example of Codepen which in turn is not influenced by . Boostrap Indexed CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
  
</style>
</head>
<body>
  
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

  <iframe src="https://codepen.io/cusx/pen/aNqQdQ" style="width:80%;height:300px;" frameborder="0" marginheight="0" marginwidth="0"></iframe>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>