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 >
        <div >
            <div >
                <button 
               
              type="button" 
              data-bs-toggle="collapse"
              data-bs-target="#navmenu"
            > 
            <span > </span>
            </button>
            <div  id="navmenu">
                <!-- How to put the buttons in the middle? -->
                <ul >
                    <li >
                        <a href="#StudyPlan"  style="border-radius: 1rem white;">Login</a>
                    </li>
                    <li >
                        <a href="#Instructors" >Other Service</a>
                    </li>
                    <li >
                        <a href="My Blog.html" >My Blog</a>
                    </li>
                    <li >
                        <a href="#CommonQuestions" >Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

CodePudding user response：

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; }