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

HTML

Posted by Laurence kite
Laurence kite
11,768 Points

Boootstrap 4 basics

I am looking at the bootstrap basics course by Guil and the version he is using conflicts with the version online.

I am having trouble making the site work as he is using different class names because he is using an older version.

I am now onto the part with the navbar and can not make the navbar-brand float to the right using the class pull-sm-right and tried to replace that with float-sm-right.

here is the nav-bar i am trying to customise:

<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 active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <a class="navbar-brand float-sm-right" href="#">Powered by Treehouse</a> </div> </nav>

3 Answers

Roger Finlayson
Roger Finlayson
7,480 Points
Roger Finlayson
Roger Finlayson
7,480 Points

Laurence, it looks like alpha.6 of bootstrap 4 has gone to flex rather than float. If you look at the utilities Flexbox option you can see that using a combination of flex-row with an ml-auto class added to the brand link it will push the link to the other side of the page.

<nav class="navbar navbar-light bg-faded flex-lg-row">
      <ul class="navbar-nav flex-lg-row">
        <li class="nav-item p-2 ">
          <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item p-2">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item p-2">
          <a class="nav-link" href="#speakers">Speakers</a>
        </li>
        <li class="nav-item p-2">
          <a class="nav-link" href="#schedule">Schedule</a>
        </li>
      </ul>
      <a class="navbar-brand  ml-auto p-2" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
    </nav>
Roger Finlayson
Roger Finlayson
7,480 Points
Roger Finlayson
Roger Finlayson
7,480 Points

This class is taking much longer due to the requirement to look up how to do what Guil is doing with the newer version of bootstrap, but it's good practice for referencing bootstrap to verify code.

Laurence kite
Laurence kite
11,768 Points
Laurence kite
Laurence kite
11,768 Points

Yes you are right in fact with flexbox some bits are more tricky with the new version than the old. Thanks for the advice on ml-auto that solved the earlier problems..