title: bootstrap navigation bar side by side
body: <p>How can i make a nav bar like this in bootstrap</p>
  <p><img src="https://i.stack.imgur.com/V11Iv.png" alt="enter image description here" /></p>
  <p>I tried this code:</p>
  <pre><code>&lt;!-- Navigation bar --&gt;
      &lt;div class=&quot;navbar navbar-inverse navbar-fixed-top&quot;&gt;
          
          &lt;!-- Navigation bar content --&gt;
          &lt;div class=&quot;navbar-inner&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;a class=&quot;btn btn-navbar&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.nav-collapse&quot;&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  
                  &lt;!-- Organization name --&gt;
                  &lt;a class=&quot;brand&quot; href=&quot;/&quot;&gt;Test&lt;/a&gt;
                  
                  &lt;!-- Tabs --&gt;
                  &lt;div class=&quot;nav-collapse collapse&quot;&gt;
                    &lt;ul class=&quot;nav&quot;&gt;
                        &lt;li class=&quot;divider-vertical&quot;&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;index/FLT.do&quot;&gt;&lt;i class=&quot;icon-pencil icon-white&quot;&gt;&lt;/i&gt; Test&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                    
                    &lt;!-- Sign in --&gt;
                    &lt;ul class=&quot;nav pull-right&quot;&gt;
                          &lt;li class=&quot;divider-vertical&quot;&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=&quot;#login_modal&quot; data-toggle=&quot;modal&quot; &gt;Sign In&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                    
                  &lt;/div&gt;
                  &lt;!-- /.Tabs --&gt;
                  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.Content --&gt;
          
      &lt;/div&gt; &lt;!-- /.Navigation bar content --&gt;
      
       &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;row-fluid&quot;&gt;
          
              &lt;div class=&quot;span2&quot;&gt;
                  &lt;!-- Left Navbar --&gt;
                  &lt;div class=&quot;navbar navbar-static-top&quot;&gt;
                    &lt;div class=&quot;navbar-inner&quot;&gt;
                      &lt;a class=&quot;brand&quot; href=&quot;#&quot;&gt;Title&lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  
              &lt;/div&gt;
              
              &lt;div class=&quot;span10&quot;&gt;
                  &lt;!-- Right Navbar --&gt;
                  &lt;div class=&quot;navbar navbar-static-top&quot;&gt;
                    &lt;div class=&quot;navbar-inner&quot;&gt;
                      &lt;a class=&quot;brand&quot; href=&quot;#&quot;&gt;Title&lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
             
              &lt;/div&gt;
              
          &lt;/div&gt;
      &lt;/div&gt; 
  </code></pre>
  <p>Which will result to this:</p>
  <p><img src="https://i.stack.imgur.com/GdkcN.png" alt="enter image description here" /></p>
  <p>I tried also in-line styling but I red in the net that it is not a good practice, I also tried overidding the classes that ruin the bootstrap. It has spaces between. Is't possible to do this with just bootstrap or no inline styling?</p>