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?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments