How do I make buttons center in the middle under navbar-expand-sm?


Below is picture of where I am now. I always face this problem of not being able to place things flexibly using bootstrap. In this case, I would like to place all the buttons in the center using justify-content: center, but the built-in class of navbar-expand-sm apparently defaults to justify-content: flex-start. What should I do? Thanks
![Text](https://stacenter image description here

<nav class="navbar bg-danger navbar-dark position-relative">
        <div class="navbar-expand-sm">
            <div class="container-xxl">
            <span class="navbar-toggler-icon"> </span>
            <div class="collapse navbar-collapse" id="navmenu">
                <!-- How to put the buttons in the middle? -->
                <ul class="navbar-nav">
                    <li class="nav-item ml-3">
                        <a href="#StudyPlan" class="nav-link" style="border-radius: 1rem white;">Login</a>
                    <li class="nav-item">
                        <a href="#Instructors" class="nav-link">Other Service</a>
                    <li class="nav-item">
                        <a href="My Blog.html" class="nav-link">My Blog</a>
                    <li class="nav-item">
                        <a href="#CommonQuestions" class="nav-link">Contact Us</a>


Either add justify-content-center next to navbar-expand-sm and see if this is working

Or trying adding the respective CSS

.navbar-expand-sm { justify-content: center !important; }

Answered By – The John

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published