Question

I have following code in the html file:

 <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
              <div class="container-fluid">
                  <a href="index.html" class="brand">Hello Bootstrap</a>
                  <p class="navbar-text pull-right">This is first notice.</p><br/>
                  <p class="navbar-text pull-right">This is second notice. </p>
              </div>
          </div>
  </div>

I am getting the output like this:

Notice that “This is second notice” is not aligned properly with respect to the line above it. I am trying to get the two notices aligned properly with each other.

I also tried removing <br/> from code above but with that I get the following output:

Could someone please point me what I am doing wrong?

JSFiddle: http://jsfiddle.net/N6vGZ/23/

Answer 1

The reason both paragraphs are not aligning properly in the navbar is because the default line-height of 40px set forth by the bootstraps doesn’t allow them both to stack correctly. You can fix that by setting a lower line-height, something like 20px should do the trick.

Note: i included both paragraphs inside a container that i can easily float and target with my own class, as not to bother the other elements around it.

HTML

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a href="index.html" class="brand">Hello Bootstrap</a>
            <div class="notices pull-right">
                <p class="navbar-text">This is first notice.</p>
                <p class="navbar-text">This is second notice.</p>
            </div>
        </div>
    </div>
</div>

Try this:

CSS

.notices p {
    line-height:20px !important;
}

Demo: http://jsfiddle.net/N6vGZ/29/