Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Using Bootstrap Components Building a Navbar

mohammed mayat
mohammed mayat
4,228 Points
Posted by mohammed mayat
mohammed mayat
4,228 Points

navbar

i am nearly finish cant seem to fix nav bar i want four link on the left side and one link floated to the right side how would i do this

my code

<!--Nav Start  -->
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-inverse bg-inverse navbar-fixed-top navbar-fluid">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo Goes Here</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#home">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#about">About</a>
      <a class="nav-item nav-link" href="#speakers">Speakers</a>
      <a class="nav-item nav-link" href="#scedule">Scedule</a>
<!--        <a class="navbar-brand mr-auto" href="http://www.teamtreeehouse.come">Presented by Treehouse</a>-->
        <a class="navbar-link" href="http://www.teamtreeehouse.come">Presented by Treehouse</a>

<!--        <a class="navbar-brand float-right text-right mr-auto navbar-one" href="http://www.teamtreeehouse.come">Presented by Treehouse</a>-->
    </div>

  </div>
</nav>
<!--nav end-->

my css code

.navbar-link {
display: block;
float: right;
}
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points

Do you want this with bootstrap or with your own CSS ?

2 Answers

mohammed mayat
mohammed mayat
4,228 Points
mohammed mayat
mohammed mayat
4,228 Points

preferably with bootstrap

Karan Nahar
Karan Nahar
16,157 Points
Karan Nahar
Karan Nahar
16,157 Points

The one link you want to move to the right use class ml-auto. This moves it to the right. And the most important thing is to move your link you want to place to the right outside of the <ul> tag. Here is my code.

<nav class="navbar navbar-expand-lg navbar-dark bg-info fixed-top">

          <a class="navbar-brand" href="#">FSC</a>
          <button class="navbar-toggler btn-light btn-sm" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarNav">

            <ul class="navbar-nav text-center">
                  <li class="nav-item active">
                        <a class="nav-link" 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="#">Speakers</a>
                 </li>
                 <li class="nav-item">
                      <a class="nav-link " href="#">Schedule</a>
                 </li>
                 </ul>

                 <a href="#" class="navbar-text ml-auto">
                       Presented by Karan
                 </a>
          </div>
 </nav>