Text in Twitter Bootstrap NavBar

Adding text in Twitter Bootstrap navbar.

Example showing how to add text to the navbar main bar and sub menus.

Framework 1 :

Framework 2 :

+ Js file(s) :	//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js

+ Css file(s) :	//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="0d8" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

&lt;div id="entete" class="navbar"&gt;
  
  
  &lt;div class="navbar-inner "&gt;
    &lt;div class="container"&gt;
      
      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a href="http://www.uicod.com"&gt;
        &lt;span class="brand" style="display:inline-block"&gt;myApp&lt;/span&gt;
      &lt;/a&gt;

&lt;div class="nav-collapse collapse "&gt;
        
        &lt;ul class="nav"&gt;
          
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu 1 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sub menu 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li class="navBarMenuTxt"&gt;More options :&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;More options 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;More options 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;More options 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="nav pull-right"&gt;
          &lt;li&gt;&lt;a data-ajax="true" href="/home/_deconnect"&gt;&lt;i class="icon-remove-sign"&gt;&lt;/i&gt; Logout&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="nav pull-right"&gt;
          &lt;p class="navbar-text"&gt;Logged in as &lt;b&gt;Mr. Gabriel Simon&lt;/b&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div style="text-align:center;"&gt;
  &lt;h2&gt;Adding text in Twitter Bootstrap navbar&lt;/h2&gt;
  Example showing how to add text to the navbar main bar and sub menus.
&lt;/div&gt;

CSS

Javascript

Text in Twitter Bootstrap NavBar

Link :

Fork button :

Embed preview :