How to create a page header in Bootstrap 4?

To my understanding, there isn't a direct replacement in bootstrap 4 for the bootstrap 3 .page-header.

However the CSS for the bootstrap 3 .page-header is simply:

padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;

So you could create your own class in your css file:

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

According to the migration docs, the Bootstrap 4 utility classes should be used instead:

<div class="pb-2 mt-4 mb-2 border-bottom">
      Page header
</div>

https://codeply.com/go/20jBKvMkHx

  • pb-2 - padding bottom 2 spacer units
  • mt-4 - margin top 4 spacer units
  • mb-2 - margin bottom 2 spacer units
  • border-bottom - border-bottom: 1px solid rgb(222, 226, 230)