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

Nathan Gallagher
Nathan Gallagher
21,518 Points
Posted by Nathan Gallagher
Nathan Gallagher
21,518 Points

Bootstrap 4 alpha 5 - pull-sm-right not working

The latest documentation suggests that this class is deprecated. I tried "pull-right" and "navbar-right" but these won't work either. Any ideas?

8 Answers

Eduardo Parra San Jose
Eduardo Parra San Jose
12,579 Points

Hi,

It seems "pull-sm-right" is no longer available. Instead you can use: float-sm-right

I found it here and it has worked for me: http://v4-alpha.getbootstrap.com/utilities/responsive-helpers/

I hope it helps. Have a nice day.

Nick van der Sangen
Nick van der Sangen
11,516 Points
Nick van der Sangen
Nick van der Sangen
11,516 Points

I found a different solution to the issue involving 'pull-sm-right' in alpha 6: The utility alteration 'float-right' does not seem to work properly in combination of display: flex i.m.o.

Instead: Replace the class 'pull-sm-right' with 'ml-lg-auto' on a navbar component with class '.navbar-toggleable-md'.

Full snippet:

<!-- navbar -->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <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 mr-0 ml-lg-auto" href="https://www.teamtreehouse.com">Presented by Treehouse</a>
    </nav>
    <!-- /navbar -->

Hope this helps!

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points
Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Nick,

ml-lg-auto works perfect! Any idea why my nav always looks stacked on smaller devices? I would like for it to look inlined just like Guil's example.

<!--NAVBAR-->

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <div class="nav navbar-nav">
      <a class="nav-item nav-link" 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="#schedule">Schedule</a>
    </div>
      <a class="navbar-brand mr-0 ml-lg-auto hidden-xs-down" href="https://www.teamtreehouse.com" target="_blank">Presented by Treehouse</a>
    </nav>

<!--/NAVBAR-->
Nick van der Sangen
Nick van der Sangen
11,516 Points
Nick van der Sangen
Nick van der Sangen
11,516 Points

Hi Michael (@michaelafanasiev),

I'm not exactly sure, but when you change the class 'navbar-toggleable-md' to 'navbar-toggleable-xl' it seems to result to your liking / Guil's example ;)

Just play around with those breakpoints!

kobbyberks
kobbyberks
10,722 Points
kobbyberks
kobbyberks
10,722 Points

For the very recent version, simply replace "pull" with "float" Link: http://v4-alpha.getbootstrap.com/utilities/responsive-helpers/

Laurie Curiant
Laurie Curiant
8,965 Points
Laurie Curiant
Laurie Curiant
8,965 Points

Hi, I don't know well bootstrap 4 but I think it should be : pull-sm-5 (5 or any number of columns you want to pull your element) or push-sm-5 or offset-sm-5

http://v4-alpha.getbootstrap.com/layout/grid/#example-stacked-to-horizontal

Lakshit Kerai
Lakshit Kerai
3,816 Points
Lakshit Kerai
Lakshit Kerai
3,816 Points

Hi, I used float-xs-right, and it works fine.

Andrea Monty
Andrea Monty
2,724 Points
Andrea Monty
Andrea Monty
2,724 Points

I have tried the above answers but it seems none of these work anymore. I have tried float-right and float-sm-right. Has anyone come across the same and have you been able to find a fix? Bootstrap is in Alpha 6 now with a Beta release right around the corner according to their blog. Thanks in advance!

Andrea Monty
Andrea Monty
2,724 Points
Andrea Monty
Andrea Monty
2,724 Points

I have figured this out. You must include the toggler then add float-right. Here is the fully functioning navbar in Bootstrap Alpha 6. Though I figured this out I can not seem to figure out how to post the code right, for that I apologize!

 <!-- 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>

  <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" href="#schedule">Schedule</a>
      </li>
    </ul>

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

</nav>
    <!-- End Navbar   -->
Steve North
Steve North
3,633 Points
Steve North
Steve North
3,633 Points

Just a heads up, the following class no longer works: navbar-toggleable-*

It has changed to: navbar-expand-*