Geek Answers Handbook

Bootstrap 3 header with header header (h1) not working

I use panels, and I want the panel title to be larger. So I read the loading document for the panel and saw that I can use h1.panel-title inside div.panel-header . They even give you markup. I pasted the markup on my page with h1 and this did not work.

HTML:

 <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title">Panel title</h1> </div> <div class="panel-body"> Panel content </div> </div>

Results:

enter image description here

I tried using the lead class, but it adds a lot of unwanted spaces under it. If I exclude the panel-title class, there are too many fields in the panel-header . How to do it?

+6
source share
2 answers

New answer

Thanks for the comment, @ShawnAnderson. You are absolutely right. All you have to do is remove the panel-title class and h1 will work.

 <div class="panel panel-default"> <div class="panel-heading"> <h1>Panel title</h1> </div> <div class="panel-body"> Panel content </div> </div>

Fiddle: https://jsfiddle.net/DTcHh/29507/

This answer is preferable to my original answer, since you do not need to override any bootstrap classes.

Original answer

This small amount of css will do the trick if you enable it after bootstrap.css.

CSS

 h1.panel-title { font-size: 36px; } h2.panel-title { font-size: 30px; } h3.panel-title { font-size: 24px; } h4.panel-title { font-size: 18px } h5.panel-title { font-size: 14px } h6.panel-title { font-size: 10px; }

Results:

enter image description here

This works, but I would like to know if anyone has any better ideas.

+8
source

Just change h3 to h1

 <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title">Panel title</h1> </div> <div class="panel-body"> Panel content </div> </div>
-1
source

More articles:


All Articles