'Why does Bootsrap overwrite my local stylesheet?

Whenever I import bootstrap like this

<link rel="stylesheet" href="./css/style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

it somehow overwrites my own css file even though i did not use any bootstrap things.

My .css looks like this

html {
    background-image: url(back.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    }


    .box
    {
       
        margin: 80px; /* abstand außerhalb*/
        padding: 30px; /* abstand innerhalb*/
        width: auto;    /* länge breite*/
        height: auto;
        border-radius: 20px; 
        background-color: rgba(0, 0, 0, 0.4);
       
        color: white; /*Schriftfarbe*/
    }

;

Here without Bootstrap without bootstrap

And here with Bootstrap Stylesheet

enter image description here

My main index.php looks like this:

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Dashborad</title>

    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 


    <script type="text/javascript" src="/placeholder"></script>
 
</head>

<body>
    <div class = "box">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</body>
csstwitter-bootstrap


Solution 1:[1]

The Bootstrap stylesheet sets styles for the body and many other elements (read https://getbootstrap.com/docs/5.1/content/reboot/), that your stylesheet does not touch. Also, if you don't want your styles overridden by Bootstrap, the proper way is to always include your stylesheet(s) after Bootstrap.

You can get rid of the body background by setting the value of the appropriate CSS variable:

body{
  --bs-body-bg: transparent;
}

Here is a working example:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
  html {
    background-image: url(https://via.placeholder.com/1600);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  body {
    --bs-body-bg: transparent;
  }
  
  .box {
    margin: 80px;
    /* abstand außerhalb*/
    padding: 30px;
    /* abstand innerhalb*/
    width: auto;
    /* länge breite*/
    height: auto;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    /*Schriftfarbe*/
  }
</style>

<div class="box">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arleigh Hix

Related Questions