Bootstrap Navbar Center Text

Question

I have recently implemented a collapse bootstrap navbar to my website. However I have an issue with it when it is in its full form. The text is aligned to the left of the navbar and despite much CSS config, and browsing of stackoverflow none of the changes I have tried have been successful at all. I am trying to change the navbar so that the text/links within it are centralized.

        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>


        </div><!-- end navbar-header -->

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#home">Home</a>
                    <li><a href="#home">Days Out</a></li>
                    <li><a href="#home">Ghosts</a></li>
                    <li><a href="#home">Beasts</a></li>
                    <li><a href="#home">History</a></li>
                    <li><a href="#home">About Us</a></li>
                    <li><a href="#home">Gifts</a></li>
                    <li><a href="#home">Blog</a></li>
                    <li><a href="#home">Contact Us</a></li>
                </ul>
            </div><!-- end collapse -->
        </div>

Answer 1

You just need to change the float behavior of the navbar, try adding this styles:

.navbar-collapse {
  text-align:center;
}
.navbar-nav {
    display:inline-block;
    float:none;
}

BootplyDemo