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 William Gray
William Gray
118 Points

col-lg-4 col-lg-push-4 not showing. Do I have something wrong?

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <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>1 North Ltd - Home Improvement Loans and Business Finance</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
</head>

<body>
    <div class="container pt-2">
        <!--   about    -->
        <div class="row">
            <div class="col-lg-4 col-lg-push-4">
                <h3 class="mb-2">About Full Stack Conf</h3>
                <img class="mb-1 img-fluid rounded" src="bs4/img/pdx.jpg" alt "1North Products">
                <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="mb-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="mb-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 my-3 text-muted">Speakers</h1> [Speaker Bios go here]


        <!--  Schedule   -->
        <h1 class="display-4 text-xs-center my-3 text-muted">Schedule</h1> [Conference Schedule goes here]
    </div>
    <!--    /.container-->

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>

</html>

4 Answers

Quentin Plummer
Quentin Plummer
8,518 Points
Quentin Plummer
Quentin Plummer
8,518 Points

Bootstrap updated the Push/pull.. The code should read push-lg-4

Learning Coding
Learning Coding
7,134 Points
Learning Coding
Learning Coding
7,134 Points

An example: <div class="col-md-4 pull-md-4">

Bootstrap has been updated since this video was filmed. Go to : http://v4-alpha.getbootstrap.com/layout/grid/ And go down to "Column Ordering".

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

Kindly check the bootstrap docs, as the push and pull classes have been updated in the very recent version This is a direct link: http://v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

sorry about the mistake William Gray

Bootstrap 4 has changed since this video was shot. In the alpha v6, the class names for pushing, pulling and offsetting columns has changed.

Pushing and pulling columns

Instead of col-lg-push-4 to push a column over 4 columns to the right you use push-lg-4. Likewise to pull a column to the left 4 columns use push-lg-4.

For this video, to push the first column 4 columns to the right and place it in the middle (on large breakpoints), use this code:

<div class="col-md-4 push-lg-4">

To pull the second column over 4 columns to the left side (on large breakpoints):

<div class="col-md-4 pull-lg-4">
Offsetting columns

The classnames for offsetting columns has also changed. Instead of col-xl-offset-2 to move a column 2 units over on extra large screens you use offset-xl-2.

For this video, to offset the signup form at the bottom of the page so that it aligns with the right edge on extra large screens, use this code:

<div class="col-md-6 col-xl-5 offset-xl-2">