How to create a page header in Bootstrap 4?

Question

Since the .page-header class has been deprecated in Bootstrap 4, how can someone create a page header with the same style as Bootstrap 3 .page-header class?

Answer 1

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)

Answer 2

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