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

Dirk Mathu
Dirk Mathu
4,050 Points
Posted by Dirk Mathu
Dirk Mathu
4,050 Points

pull-sm-right not working

I can't seem to find a way to float or pull the "presented by treehouse" to the right.

<!-- Navbar -->
             <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right" 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>
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="schedule">Schedule</a>
            </li>
          </ul>
          <a class="navbar-brand pull-sm-right mr-0" href="http://www.teamtreehouse.com">Pesented by Treehouse</a>
        </div>
      </nav> 

<!-- /Navbar -->
Dirk Mathu
Dirk Mathu
4,050 Points
Dirk Mathu
Dirk Mathu
4,050 Points

also i don't really know how to correctly add a code snippet... obviously.

Christian Blume
Christian Blume
10,424 Points
Christian Blume
Christian Blume
10,424 Points

Hello Dirk,

first of all, you can post code snippets by using three backticks (that's `, not the apostrophe) at the beginning and three at the end of your code block. Each packs of three go onto their own line:

    ```
    // Your code goes here... 
    ```

As you can see, I also specified the language, which helps a lot with syntax highlighting.

Furthermore, a link to your workspace might be helpful in this specific case.

5 Answers

Ricky Johnston
Ricky Johnston
27,445 Points
Ricky Johnston
Ricky Johnston
27,445 Points

Since moving to Flexbox, Bootstrap's old method of pulling right to achieve this is a bit outdated. I found using the class mr-auto worked better for me to achieve the same effect.

<div class="collapse navbar-collapse" id="navbarNav">
     <ul class="navbar-nav mr-auto">
          <li class="nav-item">
              <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
          </li>
          <li class="nav-item">
             <a class="nav-link" href="#schdeule">Schedule</a>
          </li>
    </ul>
    <a class="navbar-brand mr-0" href="http://www.teamtreehouse.com/">
        Presented by Treehouse
    </a>
</div>
Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points 
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary"> /* Here */
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#speakers">Speakers</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#schedule">Schedule</a>
    </li>
  </ul>
  <a class="navbar-brand ml-lg-auto mr-0 hidden-xs-down" href="http://teamtreehouse.com">Presented by Treehouse</a> /* Here */
</nav>

I've left comments to point out the main changes. Bootstrap syntax has changed a little since these videos were made. Hope this helps.

Dominic Davies
Dominic Davies
776 Points

Thanks Terrance, I've been searching docs to cover the changes but missed that one! ml-lg-auto worked great!

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Glad I could be of help Dominic! Happy coding!

Michael Davis
PLUS
Michael Davis
Courses Plus Student 12,508 Points
Michael Davis
Michael Davis
Courses Plus Student 12,508 Points

In this section we are using Bootstrap4 Alpha, it is in a state of constant flux. Always make sure to refer to the docs as the syntax used in the video is almost certainly going to be outdated in areas. As for the push and pull problem, here's what's happening.

push will "push" the column to the right, and therefor the designation of "right" is no longer needed. Similarly, to "pull" a column, will "pull" it to the left.

SYNTAX

// Pushes the column 3 columns to the right on medium and larger screen sizes
<div class="push-md-3">  

// Pulls the column 4 columns to the left on small and larger screen sizes
<div class="pull-sm-4">

REFERENCE

Bootstrap v4 Push-and-Pull Doc

Hopefully this helps!!

Chelsea Rucker
seal-mask
.a{fill-rule:evenodd;}techdegree
Chelsea Rucker
Full Stack JavaScript Techdegree Student 14,613 Points
Chelsea Rucker
.a{fill-rule:evenodd;}techdegree
Chelsea Rucker
Full Stack JavaScript Techdegree Student 14,613 Points

I added the .justify-content-end class to my anchor tag:

<a class="navbar-brand justify-content-end" href="http://www.teamtreehouse.com">Presented by Treehouse</a>

Then moved it to the bottom of my code, under the closing </ul> tag:

 <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">
     <button class="navbar-toggler navbar-toggler-right" 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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#speakers">Speakers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#schedule">Schedule</a>
        </li>
      </ul>
      <a class="navbar-brand justify-content-end" href="http://www.teamtreehouse.com">Presented by Treehouse</a> 
    </div>
  </nav>
Julie Heckleman
PLUS
Julie Heckleman
Courses Plus Student 11,412 Points
Julie Heckleman
Julie Heckleman
Courses Plus Student 11,412 Points 
<!--  navbar  -->
    <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
      <button class="navbar-toggler navbar-toggler-right" 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 mr-auto" id="navbarNav">

          <ul class="navbar-nav ">
            <li class="nav-item active">
              <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#schedule">Schedule</a>
            </li>
          </ul>

      </div>
      <a class="navbar-brand" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
    </nav>
    <!--  /navbar  -->

Be sure that the navbar-brand comes AFTER the closing div tag containing the ul list