Customizing Bootstrap Header

I wrote a custom bootstrap header as shown in the screen shot: I want that navbar to be moved to right so that it can suit the requirements like this. I used external CDNs for

Solution 1:

Just add the class .navbar-right to make the menu items float to the right - http://getbootstrap.com/components/#navbar-component-alignment

<div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#" target="_blank">Home</a></li>
                    <li><a href="#" target="_blank">About</a></li>
                    <li><a href="#" target="_blank">Contact</a></li>
                </ul>
            </div>