Search code examples
htmlcsstwitter-bootstraptextnavbar

Centering a text within Bootstrap Navbar


I keep failing in centering a text within navbar, and seek the rationale an my understanding.

Please find below the syntaxes used:

   <div>
        <nav class="navbar navbar-inverse navbar-fixed-top" style="height: 20px;">
            <center><p class="navbar-text" style="font-size: 20px;text-align:center">test text 
             alignment</p> 
            </center><br>
        </nav>
    </div>

I have even tried

<div class="container-fluid-nav text-center">

without any improvement.

N.B : Feedback leveraging on Bootstrap version 3.4.1 would highly be appreciated.

Thanks in advance.


Solution

  • It is because .navbar-text has float: left property in min-width: 768px. So you can set it none in style.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
    <div>
            <nav class="navbar navbar-inverse justify-content-center navbar-fixed-top" style=""><p class="navbar-text text-center" style="font-size: 20px; float: none;">test text alignment</p>
            </nav>
        </div>