Angular/Boostrap - Navbar doesn't display properly

Question

Recently I added Bootstrap 4, jQuery and Popper to my project, but the problem is when I render my webpage it shows the navbar like this (which it goes in a component called header):

Also I added in my angular-cli.json:

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

HTML Code

<nav class="navbar navbar-light bg-light">
  <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
          data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
          aria-expanded="false" aria-label="Toggle navigation"></button>
  <div class="collapse navbar-expand-md" id="collapsibleNavId">
    <a class="navbar-brand" href="#">My App/Logo with Text</a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Nav 1 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Nav 2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" id="dropdownId"
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav 3 dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdownId">
          <a class="dropdown-item" href="#">Action 1</a>
          <a class="dropdown-item" href="#">Action 2</a>
        </div>
      </li>
    </ul>
    <form class="form-inline float-xs-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

This code is nowhere near sufficient for troubleshooting. Post the entire HTML output for that page. — WebDevBooster
– WebDevBooster, Commented Jan 21, 2018 at 2:04
Are you saying you are using the code copied from Bootstrap docs and getting that result? — WebDevBooster
– WebDevBooster, Commented Jan 21, 2018 at 2:12
Yes, i think it's something related to the angular-cli.json file than the HTML itself, but i don't what. — QuickAccount123
– QuickAccount123, Commented Jan 21, 2018 at 2:15

WebDevBooster · Accepted Answer · 2018-01-21 02:30:17Z

You are missing some classes in your navbar. Take a look at the following code and the classes and components used there. If you still have questions, feel free to ask. But that code example should help you to sort out this problem.

Also, the d-lg-none class says: "hide this from the breakpoint large and above. Is that what you want? It's NOT how the toggler is designed to work. Bootstrap is designed to be mobile-first! Meaning the toggler is the default. You then use the navbar-expand-lg class which basically says: "hide the toggler and expand the navbar into horizontal from the 'lg' (=large) breakpoint onwards."

Here's my code example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

The bootstrap snipplets for webstorm were the issue(they're all incomplete)
You were trying to hide the toggler in your code whereas the right way to do it is the other way around i.e. using the navbar-expand-lg class which basically says: "hide the toggler and expand the navbar from the "lg" (=large) breakpoint onwards". That's how it works.

Collectives™ on Stack Overflow

Angular/Boostrap - Navbar doesn't display properly

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related