How to align the boostrap navbar to the center of the page

Question

I have the following navbar using bootstrap

I have created it using the following code snippet (Here I'm using bootstrap version 3.3.5)

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="http://www.someone.com/">Home</a>
            </div>    
            
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#" data-toggle="modal" data-target="#myModal">About</a></li>
                </ul>
            </div>
        </div> 
    </nav>
</body>

But I wanted center this navbar to the center of the page like below

I need to know how to do this using additional css styling .

score 1 · Answer 1 · answered Nov 02 '20 at 19:56

You can try like this:

Here I have added one class navbar-content to second line.

<nav class="navbar navbar-default">
  <div class="container-fluid navbar-content">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.someone.com/">Home</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#" data-toggle="modal" data-target="#myModal">About</a></li>
      </ul>
    </div>
  </div>
</nav>

Put bellow styles in your css file.

.navbar-content {
  display: flex;
  justify-content: center;
}

Aib Syed · Accepted Answer · 2020-11-02T19:38:49.777

Apply margin: 0 auto; to navbar class to center.

.navbar {
width: 500px;
margin: 0 auto;
}

<nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="http://epidemicdash.epizy.com/">Home</a>
                    <a class="navbar-brand" href="http://epidemicdash.epizy.com/">User</a>
                    <a class="navbar-brand" href="http://epidemicdash.epizy.com/">About</a>
            </div>    
            
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#" data-toggle="modal" data-target="#myModal">About</a></li>
                </ul>
            </div>
        </div> 
    </nav>

This one works good without the `body` part of the `css` , and gives the expected result . — Kaviranga, Nov 02 '20 at 19:38
I checked your code again, no need to add an additional div around navbar. Simply apply the styles to `.navbar` class and it will work. — Aib Syed, Nov 02 '20 at 19:39
Happy it worked, please mark as correct if it solved your problem. Thank you! — Aib Syed, Nov 02 '20 at 19:43

How to align the boostrap navbar to the center of the page

2 Answers2