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) Responsive Layouts with the Bootstrap Grid Column Ordering and Offsetting

Posted by yes chaghitem
yes chaghitem
266 Points

I can't get push and pull to work, The first and second column don't switch positions on the large view.

Look in the about comment

<!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.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">  </head>
  <body>
<!--nav-->
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
  <div class="container">
  <ul class="nav 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>
  <a class="navbar-brand pull-sm-right m-r-0 display-4 hidden-xs-down " href="https://teamtreehouse.com/yeschaghitem">Presented by TeamTreeHouse</a>
    </div>
</nav>
<!--/nav -->

<!--jumotron-->

<div class="jumbotron jumbotron-fluid bg-info">
  <div class="container text-sm-center p-t-3">
    <h1 class="display-2">Full Stack Conf</h1>
    <p class="lead">A One-Day Conference About all Things Javascript!</p>
  </div>
</div>


<!--/jumbotron-->

        <div class="container p-t-2">

            <!-- about -->

            <div class="row">
                <div class="col-lg-4 col-lg-push-4">
          <h3 class="m-b-2">About Full Stack Conf</h3>
                    <img class="m-b-1 img-fluid img-rounded hidden-xs-down" src="img/pdx.jpg" alt="Portland">
              <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
              <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
                </div>

                <div class="col-lg-4 col-lg-pull-4">
              <h3 class="m-b-2">Expert Speakers</h3>
          <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
              <p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
              <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
            </div>

                <div class="col-lg-4">
          <h3 class="m-b-2">What You'll Learn</h3>
              <ul>
                <li><strong>MongoDB</strong>: NoSQL database</li>
                <li><strong>Angular</strong>: JavaScript framework</li>
                <li><strong>Express</strong>: Framework for Node</li>
                <li><strong>Node.js</strong>: JavaScript environment</li>
                <li><strong>ES2015</strong>: Latest version of JavaScript</li>
                <li><strong>Babel</strong>: JavaScript compiler</li>
              </ul>
                </div>
            </div> <!-- /about -->

            <!-- speakers-->
            <h1 class="display-4 text-xs-center m-y-3 text-muted">Speakers</h1>
            [Speaker bios go here]

            <!-- schedule-->
            <h1 class="display-4 text-xs-center m-y-3 text-muted">Schedule</h1>
            [Conference schedule goes here]

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

    <!-- jQuery first, then bootstrap js -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
  </body>
</html>
yes chaghitem
yes chaghitem
266 Points

If you follow the instructions in this video the columns will not be modified, since the classes has been renamed in the latest version of Bootstrap v4. In stead of doing

<div class="col-lg-4 col-lg-push-4"> you need to do <div class="col-lg-4 push-lg-4">

and

<div class="col-lg-4 col-lg-pull-4"> should be <div class="col-lg-4 pull-lg-4">

Gui Schneider
Gui Schneider
4,567 Points
Gui Schneider
Gui Schneider
4,567 Points

Thanks for that, I was about to go mad!

Tim Windhorst
Tim Windhorst
8,242 Points
Tim Windhorst
Tim Windhorst
8,242 Points

Thank you yes chaghitem, good work.

3 Answers

Michael Dowd
Michael Dowd
16,272 Points
Michael Dowd
Michael Dowd
16,272 Points

i just checked the documentation for bootstrap4 and, instead of adding the class col-lg-push-4, you now only need to call it push-lg-4.

David Liu
David Liu
2,255 Points
David Liu
David Liu
2,255 Points

This is what did it for me, thanks!

Sarah Montoro
Sarah Montoro
843 Points

can you show me where this is in the documentation? I got it to work but I don't see it anywhere in the latest version of bootstrap 4.

Margaux Flores
Margaux Flores
11,453 Points
Margaux Flores
Margaux Flores
11,453 Points

Thought I was doing something wrong! Thanks for the answer, guys! Did the trick! Still a valid solution as of October 2016.

Kenya Sullivan
Kenya Sullivan
21,711 Points
Kenya Sullivan
Kenya Sullivan
21,711 Points

Thanks all that did the trick