Text not aligning properly with bootstrap's navbar-text pull-right

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/

Answer 2

You didn't include the css but I assume that you have "float: right" on your "pull-right" class.

I think the easiest way to solve it is to wrap the two p's in their own div and float that dive right:

<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="pull-right">
                   <p class="navbar-text">This is first notice.</p>
                   <p class="navbar-text">This is second notice. </p>
              </div>
          </div>
      </div>

Don't forget to set a width on the "pull-right" class in your css if you haven't already.