Navbar Item Alignment


I can’t seem to get the nav-items to justify to the right. My goal is the have the Navbar to the left and the items on the right, where the button will appear when the menu collapses. I’ve tried it using lists, then I tried anchors, and now I’m back to lists. Help, please?


use the ml-auto class to align your navbar links to the right while keeping the navbar-brand on the left.

<ul class="nav navbar-nav ml-auto">

Also, take your navbar out of the container, remove all the <div class="col"> divs from your navbar, and add jQuery + Bootstrap.js to your project in Codepen Settings -> JavaScript.

Final Code
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <!-- Code governing collapsed menu -->
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  <a href="#" class="navbar-brand">Navbar</a>
  <!-- Navigation Links -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">About</a>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>


Wow. You know, I’ve been grinding away at that burr for the better part of the day. To think it was such a simple fix. Thank you!