36

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?

pgmank
  • 3,829
  • 2
  • 27
  • 45
  • 3
    I don't know why this question gets downvoted, since it's not a duplicate, it complies with the stackexchange rules and it is also useful, because there is no answer on the web for that problem. Please correct me if I am wrong and explain to me the reason why this question is considered by some as useless. – pgmank Apr 12 '18 at 10:36
  • 1
    There are questions at stackoverflow that do not show any attempt to solve the problem and the answer lies in the documentation, for example [this one](https://stackoverflow.com/questions/394809/does-python-have-a-ternary-conditional-operator). Usually these simple questions are the ones that are the most famous. The answer though to my question, does not reside in the Bootstrap migration docs. The docs only say that you will have to implement the page header style yourself, but not **how**. – pgmank Apr 12 '18 at 23:10
  • As for the accepted answers, you are right. There were 4 answers that I have forgot to accept (including yours :-P). All the other ones were not accepted, as either they do not answer my question, or I was the only one that has answered my own question and it seemed strange for me to accept my answer. I have accepted them whatsoever a while ago. I do not believe though, that my history of not accepting answers has to do with downvoting my answer (as a way of punishment?). – pgmank Apr 12 '18 at 23:12
  • Because the comments above seem to be off-topic, any moderators, feel free to delete them if it's deemed necessary. – pgmank Apr 12 '18 at 23:16

2 Answers2

48

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)
Zim
  • 296,800
  • 77
  • 616
  • 554
  • This seems a much better option as it allows you to easily create different page header styles. I hated the old Bootstrap way of doing this as in Joomla you have page headers but also component titles which with just the Page Header class you couldn't really differentiate between the two but now with this you could have one as pb-2 mt-4 mb-2 border bottom and the next as pb-1 mt-2 mb-2 border-bottom and so you can customise it a lot further. I do like the new padding and margin classes in BS4 - very handy! – TheKLF99 Jun 03 '18 at 17:58
  • Just as an FYI the link for codeply did not work for me. Thanks. – NoChance Oct 24 '18 at 11:09
5

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;
}
TidyDev
  • 2,827
  • 8
  • 23
  • 39