Question 88605 in Html Question posted in
Some basic documentation can be found here.

Bootstrap 5 navbar won't expand – Html

My I bootstrap 5 navbar only goes as wide as the contents. I would like it to expand the length of the container. It doesn’t change when I change the navbar-expand-?? setting.
enter image description here

    <div class="container p-3 my-3 bg-primary text-white">

  <h1>Pets to Go <span class="material-icons">pets</span></h1>

  <nav class="navbar navbar-expand-xl">
  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="our_pets.html">Our Pets</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="current_pets.html">Current Pets</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
  </nav> <!-- close navbar -->
  
  </div>  <!-- Close main container -->

Any idea what is limiting this?

Tags:

2

Answers


  1. 0

    it looks like to me the problem is p-3 and my-3 class in your container div

    <div class="container p-3 my-3 bg-primary text-white">

    try to replace it with this

    <div class="container bg-primary text-white">

    and assign p-3 and my-3 only in particular div where you needed it inside your container

    Login or Signup to reply.
  2. 0

    The navbar doesn’t "grow" by default. Use flex-grow-1 if you want it to grow to the width of container-fluid…

    <div class="container p-3 my-3 bg-primary text-white">
    <h1>Pets to Go <span class="material-icons">pets</span></h1>
    <nav class="navbar navbar-expand-xl">
        <div class="container-fluid">
            <!-- Links -->
            <ul class="navbar-nav bg-white flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="our_pets.html">Our Pets</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="current_pets.html">Current Pets</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </nav> <!-- close navbar -->
</div> <!-- Close main container -->

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search