CODEWITHSUNDEEP
csstwitter-bootstrapvertical-alignment
miken32
miken32

Reputation: 42724

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?

Upvotes: 0

Views: 510

Answers (3)

miken32
miken32

Reputation: 42724

Playing around with Kamil's answer, I figured out how to get this working. Apply the .pull-right class to a block element and put the <small> element inside it:

<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 <div class="pull-right"><small>and smaller text</small></div></h1>
  </header>
</body>

Upvotes: 1

Ricky Ruiz
Ricky Ruiz

Reputation: 26761

EDIT:

Use em units instead, to address different displays:

.h1--small {
  line-height: 1.7em;
}


.h1--small {
  line-height: 1.7em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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--small">and smaller text</small></h1>
</header>

SOLUTION:

The computed value for your <h1> css property line-height is equal to 39.6px, so all you need to do is define the same value in your <small> tag:

line-height: 39.6px;

To check the computed values of your h1 element just go to dev tools, select your h1, click on computed tab on your top right and look for line-height;

CODE SNIPPET:

.h1--small {
  line-height: 39.6px;
}
<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--small">and smaller text</small></h1>
  </header>
</body>

Upvotes: 1

Kamil Mierzyński
Kamil Mierzyński

Reputation: 195

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.

Upvotes: 1

Related Questions