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

Igor Pavlenko
Igor Pavlenko
12,925 Points
Posted by Igor Pavlenko
Igor Pavlenko
12,925 Points

need help here

why i cannot pull the navbarbrand to the right on lg screens in bootstrap ?

<a class="navbar-brand pull-right-lg mr-0" href="http://volvocars.com">Volvo presented</a>

3 Answers

Rhys Kearns
Rhys Kearns
4,976 Points
Rhys Kearns
Rhys Kearns
4,976 Points

From looking at the video looks like you might have a syntax error

<a class="navbar-brand pull-lg-right mr-0" href="http://volvocars.com">
    Volvo presented
</a>

Looks like its meant to be pull-lg-right not pull-right-lg

Igor Pavlenko
Igor Pavlenko
12,925 Points
Igor Pavlenko
Igor Pavlenko
12,925 Points

still does not work.. the navbar-brand does not move to the right on the large screens maybe the problem is else where plz see the full code below:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Full Stack Conf</title> <!-- bootstrap css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <!-- 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> <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://volvocars.com">Volvo presented</a> </nav> <!-- /navbar -->

 <!-- container -->
  <div class="container pt-3">
    <!--  about -->
    <div class="row">
      <div class="col-lg-4 push-lg-4">
        <h3 class="m-b-15"></h3>
        <img class="pt-6 img-fluid rounded hidden-xs-down" src="../reem1.2/img/WhatsApp%20Image%202017-07-27%20at%2018.50.30.jpeg" alt="wedding phto">
        <p class="mt-2"></p>
        <p>Not available for </p>
      </div>
      <div class="col-lg-4 pull-lg-4">
        <h3 class="m-b-2">Portfolio</h3>
        <p>Studio photos</p>
      </div>
      <div class="col-lg-4 ">
        <h3 class="m-b-2">What do I do </h3>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </div>
    </div> <!--  /about -->
    <!-- Speakers -->
    <h1 class="display-4 text-center my-3 text-muted">Speakers</h1>
        [Speaker Bios go here]
    <!-- Schedule -->
    <h2 class="display-4 text-center my-3 text-muted">Schedule</h2>
    [conference shedle goes here]
    <hr>
    <div>
        <div class="row py-5 text-muted">
            <div class="col-md-6 col-xl-5">
                <p class="">Short summary abour my work protfolio</p>
            </div>
            <div class="col-md-6 col-xl-5 offset-xl-2">
                <p><storng>Stay up to date with the new photos</storng></p>
                <div class="input-group">
                   <input type="text" class="form-control" placeholder="Email">
                   <span class="input-group-button">
                       <button class="btn btn-primary" type="button">Sign up button</button>
                   </span>
                </div>
            </div>
        </div>


    </div>
  </div> <!--        /.container      -->

<!-- jQuery first, then bootstrap js -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</body> </html>

Brice Roberts
Brice Roberts
22,415 Points
Brice Roberts
Brice Roberts
22,415 Points

I believe it is looking for

pull-lg-right

instead.

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

Hey! I have already posted an answer to your question. You can find it here.