douweegbertje douweegbertje - 4 months ago 28
CSS Question

bootstrap 3.0 inline headings tags

I have the following piece of code:

<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 the H2 and the H4 next to each other, on the same base line. At this point the H4 is way above the line.

Ive tried to putt this into spans, and other 'tricks' like vertical-align bottom.
For some reason I just simply cannot get this on the same line, and same 'line-height like this:

heading Second Heading

Answer

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

http://bootply.com/79703

The HTML:

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

The CSS:

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

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

Second, I would suggest creating a new class, instead of overriding the behavior of the well class as MasterPoint's example states, in case you ever want the well to style H2s and H4s normally.