Bootstrap4 ul li 中央揃え 忘備録

flexboxがとても便利 参考にさせていいただきました。

www.webcreatorbox.com

 <div class="collapse navbar-collapse" id="navbarToggler">
//ここにw-100を入れたら、画面いっぱいに広がる。
//ulには d-flex を適用
            <ul class="nav navbar-nav d-flex w-100">

//li にはd-inline-flex で均等割
              <li class="nav-item d-inline-flex active">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item d-inline-flex active">
                <a class="nav-link" href="#">入学案内</a>
              </li>
              <li class="nav-item d-inline-flex active">
                <a class="nav-link" href="#">教育</a>
              </li>

本家サイト

getbootstrap.com