CODEWITHSUNDEEP
htmlcssbootstrap-4
user3164187
user3164187

Reputation: 1432

Align contents in navbar to top

I started learning Bootstrap4 I have the below html code, 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style>
    html, body{
        height : 100%;
    }
    #contentwrapper{
    width: 20%;
    height: 100%;
    padding-left: 10px;
}
    </style>
</head>

<body>
    <div id="contentwrapper" class="h-100 row align-items-center">
    <nav class="navbar bg-dark navbar-dark" style="height: 100%;">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Item 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Item 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Item 3</a>
            </li>
        </ul>
    </nav>
    </div>

</body>

</html>

I am trying to get the Item 1, Item 2 and Item 3 nav-item to vertically top aligned but it comes at vertically center aligned

Ho can i achieve it?

Upvotes: 0

Views: 37

Answers (2)

Patrick Zamarian
Patrick Zamarian

Reputation: 276

add this inside your <style>

.navbar{
    display: unset;
}

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272657

Simply add align-items-start (https://getbootstrap.com/docs/4.3/utilities/flex/#align-items) to navbar since it a flexbox container:

html,
body {
  height: 100%;
}

#contentwrapper {
  width: 20%;
  padding-left: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="contentwrapper" class="h-100 row ">
  <nav class="navbar bg-dark navbar-dark h-100 align-items-start">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Item 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item 3</a>
      </li>
    </ul>
  </nav>
</div>

Upvotes: 2

Related Questions