Bootstrap 3.0 inline header tags

Question

I have the following code snippet:

<div class="row"> <div class="col-md-12"> <div class="well"> <div class="clearfix"> <h2 class="pull-left">heading</h2> <h4>second heading</h4> </div> </div> </div> </div> 

The goal is to have both H2 and H4 next to each other, on the same baseline. At this point, H4 is above the line.

Ive tried to pull this into gaps and other "tricks", such as vertical alignment. For some reason, I just can't get this on the same line, and the same "line-height":

heading second chapter

Answer 1

I was going to just work out the first answer, but here is a more complete answer:

http://bootply.com/79703

HTML:

 <div class="row"> <div class="col-md-12"> <div class="well inline-headers"> <h2>heading</h2> <h4>second heading</h4> </div> </div> </div> 

CSS:

 .inline-headers h2, .inline-headers h4 { display: inline-block; vertical-align: baseline; } 

Two things happen here. First, we dropped the unnecessary floats on the headers, as well as the completely unnecessary clearfix divs. For future reference, you do not need to attach clearfix to a separate div.

Secondly, I suggest creating a new class instead of overriding the behavior of the well class, as indicated in the MasterPoint example example, if you want the well to pick up H2s and H4s well.

Answer 2

Surprised by him was not mentioned, but another way would be to use header classes.

 <span class="h2 pull-left">heading</span> <span class="h4">second heading</span> 

Look at the file with smaller sizes of typography styles , all you need is besides displaying: block

Answer 3

Bootstrap has built-in support for secondary headers with <small> .

 <h3>h3. Bootstrap heading <small>Secondary text</small></h3> 

http://getbootstrap.com/css/#type-headings

Answer 4

Check script

http://jsfiddle.net/VccZ6/2/

you have the wrong float in your h2, but here is the remainder of the css you need.

 .well h2, .well h4 { display: inline-block; vertical-align: baseline; line-height: 100%; } 

Updating ...

... that will do the job.