Twitter Bootstrap: Text in navbar

HtmlCssTwitter Bootstrap

Html Problem Overview


According to the twitter bootstrap documentation, I should be able to "Wrap strings of text in a <p> tag for proper leading and color." When I do this, at any level under navbar it simply doesn't inherit any of the navbar classes. Wrapping the string in <a> tags renders it but it shouldn't be an anchor.

The string I'm trying to render is "Logged in as ... ".

Html Solutions


Solution 1 - Html

You have to include a class along with your p tag inside of your navbar, like so:

<p class="navbar-text">Logged in as</p> 

Solution 2 - Html

This was fixed in issue 2799.

Solution 3 - Html

I had to add <span class="navbar-text"> for the format to level with the anchor tags.

Solution 4 - Html

None of these answers or comments worked for me (latest one was 6+ years old), but what worked for me was the following:

  1. I had to use the <span> tag, not <p>
  2. I had to include the "nav-item" class on my list element itself

My final working code looks like this:

<li class="nav-item"><span class="navbar-text"><h5>{{first_name}}</h5></span></li>

Take my word for it, but the word "Sally" below does not change to hyperlink when hovered.

enter image description here

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJack FrostView Question on Stackoverflow
Solution 1 - HtmlAndres IlichView Answer on Stackoverflow
Solution 2 - HtmlmuzzamoView Answer on Stackoverflow
Solution 3 - HtmlMilo van LoonView Answer on Stackoverflow
Solution 4 - HtmlJoel WigtonView Answer on Stackoverflow