bootstrap nav

In this example below you will see how to do a bootstrap nav with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gregleibowitz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gregleibowitz ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>bootstrap nav</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
  <title>Bootstrap</title>
</head>
  <header>
    <nav class="navbar navbar-dark bg-primary navbar-full navbar-fixed-top">
      <a class="navbar-brand"
         <div class="container" href="#featured">Greg Leibowitz's Portfolio</a>
      <ul class="nav navbar-nav pull-sm-right">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">Portfolio</a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">Blog</a>
        </li>

        
      </ul>
      </div>
      
    </nav>
  
  
  </header>
<body>

<div class="container content">
  <div class="row">
    <section class="col-xs-12">

    <h1 class="text-capitalize">headline one</h1>

    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure dolore, nostrum eveniet, distinctio sequi perspiciatis qui ipsum reiciendis doloribus, beatae commodi esse natus magnam amet nihil corporis aspernatur quas similique.</p>

    <p class="text-nowrap">Dicta repellat reiciendis, fuga, libero ex, qui laboriosam aliquid facilis quos enim distinctio possimus facere accusamus, sint necessitatibus. Consequuntur, incidunt, repellendus! Velit a quo nihil laborum, incidunt at expedita accusantium.</p>

    <p class="text-right">Qui rerum voluptas, ipsam distinctio, quia non aspernatur. Cumque perferendis libero sequi earum pariatur molestias sapiente eius quas, praesentium aperiam, accusantium dolor? Pariatur eaque, beatae laborum, quasi sit voluptates consequuntur.</p>

    <p>Vel, eveniet perspiciatis enim alias modi quaerat cumque qui possimus velit tempora quam! Laudantium repellat corporis quasi sed iusto cupiditate dolore, nemo quas libero, quidem voluptate, voluptates rerum architecto porro!</p>

    <p>Quo error incidunt dignissimos, sequi ab. Necessitatibus dolorem fugiat, aliquam maxime dignissimos quasi commodi, voluptate maiores. Consectetur officia expedita illo natus dolorum doloremque doloribus animi, numquam ducimus adipisci, quisquam nisi!</p>

    </section>
  </div><!-- row -->
</div><!-- content container -->

</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/gregleibowitz/bootstrap-nav-aBjWXJ */
.content {
  margin-top: 70px;
}

Comments