Bootstrap 3 panel-title with header tag (h1) is not working

Question

I'm using panels and I want the panel title to be larger. So I read the bootstrap doc for panel and saw that I could use a h1.panel-title inside a div.panel-header. They even give you the markup. I pasted the markup in my page with h1 and it 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:

I tried using the lead class, but it adds a lot of undesirable whitespace underneath it. If I exclude the panel-title class there is too much margin in the panel-header. How do I make this work?

Answer 1

New Answer

Thanks for the comment, @ShawnAnderson. You are absolutely right. All you need to do is remove the panel-title class and the 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 preferred over my original answer since you do not have to override any bootstrap classes.

Original Answer

This small amount of css will do the trick if you include 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:

This works, but I'd like to know if anyone has better ideas.