Boostrap overwriting CSS. How to avoid?

Question

Boostrap overwriting CSS. How to avoid?

Navigation

#1 by (0 votes)

1

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

However, when I import the header and footer, (I am using PHP for this) using Bootstrap, the payment page is unconfigured. When removing the bootstrap link the payment form 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 I tried to create a div, like this:

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 did not succeed. I also tried putting the call of my css style before the boostrap link, it also did not work.

Is there any way to remove the bootstrap on a particular piece of html? Or to make my style file overwrite? Or even some other way of using the two without any being broken?

php html css twitter-bootstrap

asked by anonymous 08.12.2018 / 14:22

1 answer

How do I perform one function after the end of another? 301 Redirect - Google App Engine Platform [closed]

score 0 · Accepted Answer

Two things, the first is that the classes you want to override should come last, not first, then it would look like this:

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

Or so if that's the case .... The important thing is to come 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 classes entered by Bootstrap using an "all: unset" and then rebuilding the CSS of your element. You can read more about this property here Property all in CSS. What is it good for and how does it work?

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

In addition another solution would be to use a <iframe> Put your card in an iframe and call it wherever you want. So the Bootstrap CSS will not overwrite the CSS of the elements that are within <iframe> Here you can read more about it: link

Ex: Note that I have a Bootstrap Navbar and in the same file I call an iframe as the Codepen example 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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>