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) Getting to Know Bootstrap 4 Creating a Simple Page

Posted by I-Mei Wu
I-Mei Wu
7,305 Points

"Offsetting Columns" is not working.

I add as follows: <div class="col-lg-6 offset-lg-4"> also I try <div class="col-lg-6 col-offset-lg-4"> both of them are not working. bootstrap version is bootstrap@4.0.0-alpha.3

9 Answers

Dakota Gillette
Dakota Gillette
5,320 Points
Dakota Gillette
Dakota Gillette
5,320 Points

Hi, the documentation for Bootstrap 4 has changed. Make sure you use the updated CDN links, and give this a try: 

          <div class="col-lg-6 offset-lg-3">
roberthopman
roberthopman
16,502 Points

This worked!

Yashwanth Yash
Yashwanth Yash
10,947 Points
Yashwanth Yash
Yashwanth Yash
10,947 Points

The workspaces are updated with Alpha 2 of bootstrap and the new changed classes in docs are Alpha 3 release. You need to update the CDN link <head> tag and JS in the document. It works for me after updating them

<!DOCTYPE html>
<html lang="en">
  <head>
        <title>Full Stack Conf</title>
    <!-- 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">

    <!-- 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>
    <div class="container text-xs-center">
      <h1 class="display-1">Full Stack Conf</h1>
      <p class="lead">Coming soon, a One-day conference about All things JavaScript!</p>
    </div>    
    <div class="col-lg-6 offset-lg-3">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Enter your E-mail for info...">
          <span class="input-group-btn">
            <button class="btn btn-secondary" type="button">Sign Up</button>
          </span>
      </div>
    </div>

    <!-- 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>
hamad Al Ali
hamad Al Ali
3,893 Points
hamad Al Ali
hamad Al Ali
3,893 Points

Yup, same thing here exactly.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

The first one is the correct setting. Could you please provide more of your code.

hamad Al Ali
hamad Al Ali
3,893 Points
hamad Al Ali
hamad Al Ali
3,893 Points

I tried "col-lg-6 col-lg-offset-3" and it's working perfectly.

Not sure why "col-lg-6 offset-lg-4" doesn't work, even though I've taken it from the bootstrap docs.

hope this works for you

squarespacecare
squarespacecare
21,561 Points
squarespacecare
squarespacecare
21,561 Points

Still seeing the same issue with either classes:

<div class="col-lg-6 offset-lg-4"> <div class="col-lg-6 col-offset-lg-4">

Seems to work fine outside Team Treehouse.

Benjamin Veenema
Benjamin Veenema
9,780 Points
Benjamin Veenema
Benjamin Veenema
9,780 Points

<div class="col-lg-6 offset-lg-3"></div> Will center your content correctly. The problem you were having was you used offset-lg-**4** which sets it too far to the right. Bootstrap docs is correct at this moment link

Justin Eaton
Justin Eaton
6,133 Points
Justin Eaton
Justin Eaton
6,133 Points

Thank you Dakota. <div class="col-lg-6 col-lg-offset-3"> worked only up to a width of 990px. Those saying it still works may be having partial success. But try a wider screen to be sure.

<div class="col-lg-6 offset-lg-3"> with bootstrap alpha 4 worked for me at all widths.

Dan Levin
Dan Levin
7,741 Points
Dan Levin
Dan Levin
7,741 Points

Here is the problem and answer.

The code you get from the page for offset http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns is - col-lg-6 offset-lg-3

for it to work in the demo it needs to be this col-lg-6 col-lg-offset-3