[Bootstrap] These navbar code is same, but different result

HTML-CSS
1

Hello, so I am currently practice how to create a responsive navbar using bootstrap 4.xx and then I found this problem. The problem is, that burger button should only appear when the screen is small (around 768px)

So the first code is where I build from scratch which didn’t work at all, and the other one is from bootstrap documentations which is working.

Here’s my code

<nav class="navbar nav-expand-md navbar-light bg-light sticky-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"
          ><img src="img/logo.png" alt="logo.png"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Services</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Team</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Connect</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

And here’s the one from bootstrap documentation, I modified the content so it looks like mine

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"
          ><img src="img/logo.png" alt="logo.png"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Services</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Team</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Connect</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

CMIIW, they are same! But different result. I’ve track all the line and found nothing.

Please help, thanks!

Btw, here’s the link to my code in case you need more information.

2

Here’s difference:

<nav class="navbar nav-expand-md 
<nav class="navbar navbar-expand-md
1 Like
3

Well, I didn’t realize that -_-

Looks like I need to be more precise and focus.

Ok, I already found the difference and next time, I’ll try to be more focus.

Thank you very much!

4

For future, it can be hard to find small differences just by reading line-by-line. There’s simple trick that doesn’t require using any special tools and makes it easier. Just copy both code pieces to separate tabs or windows in text editor, because both pieces will be aligned the same way then swapping between them will naturally attract eye to place where is difference.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.