Why is there no padding in bootstrap?

H

Hanry6542020-07-11 03:48:06

Bootstrap

Hanry654, 2020-07-11 03:48:06

I add to the h2 tag "margin-top: 10px;" - does not work, the same with the div. I also tried to register "mt-sm-2", it does not work either.

<!DOCTYPE html>
</html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>123</title>
    <link rel="stylesheet" type="text/css" href="src/main.css">
    <link rel="stylesheet" type="text/css" href="src/css/bootstrap.css">

  </head>
<body>
  <div class="container panel">
    <h2>
      Тест
    </h2>
    <hr>
  </div>

  <script src="src/js/bootstrap.js"></script>
  <script src="src/js/popper.min.js"></script>
  <script src="src/js/jquery-3.5.1.js"></script>
</body>
</html>

body{
  margin: 0px;
  padding: 0px;
  background-image: url(img/background.jpg);
  background-size: 110%;
}

.panel{
  background-color: #F5F5F6;
  margin-top: 250px;
  opacity: 0.90;
  border-radius: 5px;
  box-shadow: 0 0 50px black;
  height: 250px;
}

h2{
  margin-top: 10px;
  text-align: center;
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

Y

Yuri, 2020-07-11
@Hanry654

Because first you include your main.css, and then bootstrap.css. All headers in the bootstrap have their top margins reset to 0, in your main.css the specificity of the header is the same, as a result, the styles for it are overwritten by the bootstrap, which is included later than the custom css.
Swap the CSS imports:

<link rel="stylesheet" type="text/css" href="src/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="src/main.css">

The other problem is that even if margin-top works, there will still be no padding from the top of the card :) So it's really better to use padding here. But, in my opinion, it is more logical to fasten it to the card itself, then the indent will remain if you suddenly decide to change the h2 heading to something else:

.panel {
  padding-top: 10px;
}

L

Lynatik001, 2020-07-11
@Lynatik001

yuzaypadding-top: 20px;