CODEWITHSUNDEEP
htmlcssbootstrap-4
Corne14
Corne14

Reputation: 41

Bootstrap navbar two or more item alignment

So im trying to make a website for a college project and i need to do a navbar with bootstrap. The problem is that when im adding new nav-item elements to the navbar they are aligned one below other in the Y axis and i would like to align them horizontally

this is what i have until now 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  </head>
  <body>

    <nav class="navbar sticky-top navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Home Page</a>

      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Item One</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item Two</a>
        </li>

      </ul>

    </nav>

  </body>
</html>

enter image description here

This is how the items are beeing displayed.

How can I align "Item One" and "Item Two" horizontally?

Upvotes: 0

Views: 48

Answers (1)

Thomas Lamothe
Thomas Lamothe

Reputation: 194

According to Bootstrap's documentation you must specify the wrapping :

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

Just add this to your <nav> item :

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Home Page</a>

      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Item One</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item Two</a>
        </li>

      </ul>

    </nav>

Upvotes: 1

Related Questions