bootstrap class="page-header" not working-CodePudding

I am new to bootstrap and currently I'm using bootstrap v5.2.0. I tried to make a header with line using the and it is not displaying the header line. Could anyone explain why?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap cheat sheet</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <div >
        <h1 >Hello, world!<small>Secondary text</small></h1>
        <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus eligendi rem hic assumenda doloremque consequatur sunt, amet quasi ab. Qui iste tempora eaque molestias earum fugit, inventore quibusdam doloribus commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste laborum ipsam libero. Placeat rerum ad ipsam nostrum molestiae, omnis repellat accusamus error saepe deserunt dolorum officiis nam tempora recusandae veritatis!</p>
    </div>
   
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

CodePudding user response：

The .page-header class was dropped in Bootstrap 4. https://getbootstrap.com/docs/4.6/migration/#typography. You can recreate it with this styling:

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}

CodePudding user response：

The .page-header class was removed in Bootstrap 4 and is still dropped in Bootstrap 5.

Per Migrating to v4 - Bootstrap

Dropped .page-header as, aside from the border, all its styles can be applied via utilities.

This is because utilities are supposed to be implemented instead. You can use .pb-2 mt-4 mb-2 border-bottom to replicate the .page-header styles. You can see these utilities can be easily changed now for ease of customization.

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap cheat sheet</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>
  <div >
    <h1 >Hello, world!<small>Secondary text</small></h1>
    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus eligendi rem hic assumenda doloremque consequatur sunt, amet quasi ab. Qui iste tempora eaque molestias earum fugit, inventore quibusdam doloribus commodi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste laborum ipsam libero. Placeat rerum ad ipsam nostrum molestiae, omnis repellat accusamus error saepe deserunt dolorum officiis nam tempora recusandae veritatis!</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>