Bootstrap css ruin my custom css file

1

Hello,
I’m working over one of my projects, and try to add some bootstrap elements. When i add bootstrap cdn link, it ruined my custom css file. I add bootstrap cdn link before custom css. For simplicity to avoid paste unnecessary code i made short another example to show what is the problem.

custom_and_bootstrap_css
custom_and_bootstrap_css500×1090 49.7 KB

my html file is:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href='./styles.css'>
  <title>test file</title>
</head>

<body>
  <div id='part1'>
    <h1>Heading H1</h1>
    <h3>Heading h3</h3>
    <h4>Heading h4</h4>
  </div>
</body>

</html>

And custom css file is:

body {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
}

#part1 {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
}

In some reason bootstrap overrides my custom css file, even that the bootstrap cdn link is before custom css file. I try to find why this happens, but unfortunately nothing found.
Please, tell me what is the problem.
Many thanks!

2

If you’re referring to the spaces between the headings, No, it didn’t really overridden your code, it’s just the fact that the first one have the default HTML margin on it, then Bootstrap came in and remove the margin-top, because that’s part of their Heading package. You can read it here:

1 Like
3

@Catalactics Thank you!
The problem indeed seems related to Reboot.
I manually added margins and font-weight to the headings to achieve same effect like default css style.

1 Like
4

Nice to know I helped. Now you can continue on into your project. Good Luck!!!. Before I go, here’s a full list of Default Styles for HTML elements:
https://www.w3schools.com/cssref/css_default_values.asp. Anyways, stay safe, and Happy Coding!!! :slight_smile:

1 Like