miken32 miken32 - 5 months ago 12
CSS Question

Vertical alignment in bootstrap header

I know I can do this with a bunch of manual CSS, but am wondering if there's a Bootstrap way to do it.

The Bootstrap site says I can, "create lighter, secondary text in any heading with a generic

<small>
tag or the
.small
class." So I try this in an
<h1>
element, but the vertical alignment goes off as soon as I try floating it to the right:



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <small class="pull-right">and smaller text</small></h1>
</header>
</body>





I've also tried putting both items in columns (e.g.
.col-md-6
) but this also uses floats, so has the same result. Any easy way to do this?

Answer

You should use external CSS styles... but if you really really REALLY want to use only build-in bootstrap classes i have something funny for you! Check this out:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <nav class="navbar navbar-default navbar-static-top">
    Here's some navigation
  </nav>
  <header class="page-header">
    <h1>Main Heading
        <small class="pull-right">
          <h1 class="media">
            <small>and smaller text</small>
          </h1>
        </small>
    </h1>
  </header>
</body>

This is NOT a good solution. This is just a CURIOSITY.