bootstrap class="page-header" not working

Question

I am new to bootstrap and currently I'm using bootstrap v5.2.0. I tried to make a header with line using the class="page-header" 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/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <h1 class="page-header">Hello, world!<small>Secondary text</small></h1>
        <p class="lead">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/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

Welcome to Stack Overflow! The `.page-header` class was removed after BootStrap 3. There is a SO question on what styles to use in BS4 - which should still work on BS5 — disinfor, Aug 25 '22 at 15:12
Does this answer your question? [How to create a page header in Bootstrap 4?](https://stackoverflow.com/questions/49707845/how-to-create-a-page-header-in-bootstrap-4) — disinfor, Aug 25 '22 at 15:12

score 1 · Answer 1 · answered Aug 25 '22 at 15:15

1

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;
}

answered Aug 25 '22 at 15:15

j08691

204,283
31
260
272

score 1 · Answer 2 · answered Aug 25 '22 at 16:06

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/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <h1 class="pb-2 mt-4 mb-2 border-bottom">Hello, world!<small>Secondary text</small></h1>
    <p class="lead">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/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>

bootstrap class="page-header" not working

2 Answers2