Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

2 Answers

mohammed mayat
mohammed mayat
4,228 Points

preferably with bootstrap

Karan Nahar
Karan Nahar
16,142 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>