CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
jxw
jxw

Reputation: 711

Centering Bootstrap navbar

I am new to css. I will like to center brand logo and also the links in the navbar.

HTML

    <nav class="navbar navbar-expand-md center">
    <a class="navbar-brand" href="http://www.dimsum.dk" target="_blank">
        <img src={% static 'media/HIDDEN DIMSUM logo final.png'%} width="100" alt="">
    </a>

    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="main-navigation">
        <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Book Table</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="http://www.dimsumbox.dk" target="_blank">
            Order Dimsum Box</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="http://www.dimsumshop.dk" target="_blank">
            Order Takeaway</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">
            About</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">
            Contact</a>
        </li>

        </ul>
    </div>
</nav>

CSS

.navbar {
    background: #d48498;
}

.nav-link {
    color: black;
    font-size: 24px;
    font-weight: bold;
}

.navbar.center .nav-item {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

This is how the navbar looks right now enter image description here

I want to have the logo centered and the links appearing in a new line also centered so it looks like

                                         Logo
                         Link 1      Link 2    Link 3   Link 4

I have tried justify center in css but it doesn't work.

Upvotes: 0

Views: 58

Answers (3)

Mehrzad Tejareh
Mehrzad Tejareh

Reputation: 633

add this css after bootstrap.css:

.navbar-brand {
    display: flex;
    width: 100%;
    justify-content: center !important;
}
.navbar {
    flex-wrap: wrap !important;
    justify-content: center !important;
}
.navbar-nav{
    width:100%;
    justify-content:center !important
}

Upvotes: 0

Yagnesh Limbachiya
Yagnesh Limbachiya

Reputation: 3

use justify content: center and display: flex in css

  display: flex;
  justify-content: center;

for reference https://www.w3schools.com/cssref/css3_pr_justify-content.asp

Upvotes: 0

Becky
Becky

Reputation: 5585

Add this bit to your css

    @media (min-width: 768px) {
       .navbar {
         flex-flow: wrap;
       }

       .navbar-brand {
         width: 100%;
         text-align: center;
       }

       .navbar-brand img {
         height: 50px; /*Set a logo size*/
         width: auto;
       }

       .navbar-collapse {
         justify-content: center;
       }
    }

Upvotes: 3

Related Questions