Why doesn't the class "mt-50" work in Bootstrap 5?

min hui 0
Viewed 44

I tried centering the h1 using mt-50, but it doesn't give me a margin between the red border and blue border. However, when I use CSS styling of margin-top:50px it gave me the desired outcome. Can anyone explain the difference, as I thought mt-50 in bootstrap is the same as margin-top:50px in CSS?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">


<div class="header my-5 border border-danger">
  <h1 class="col-6 border border-primary mx-auto text-center mt-50"> Welcome to Food Mart </h1>
</div>

twitter-bootstrap css html
1 Answers

Bootstrap doesn't provide a class mt-50. If you change to mt-5 it will work.

Bootstrap provides classes from mt-0 to mt-5 plus mt-auto.

mt-5 is set to margin-top: 3rem, if root font-size is 16px, mt-5 is 48px close to your 50px.

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.css" rel="stylesheet"/>
<div class="header my-5 border border-danger">
  <h1 class="col-6 border border-primary mx-auto text-center mt-5 d-block"> Welcome to Food Mart </h1>
</div>

huan feng0
Related