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

Alexander Lanz
Alexander Lanz
10,420 Points
Posted by Alexander Lanz
Alexander Lanz
10,420 Points

Input gets not centered by adding 'col-lg-offset-3'. Why?

I added the class name but the textbox is still not centered in the browser in large mode. Tried in Chrome, latest version and Firefox.

  <div class="col-lg-6 col-lg-offset-3">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Enter your email for info...">
        <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Sign up</button>
        </span>
      </div>
  </div>

5 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I also experienced this problem when trying to do this with the alpha version 5 of Bootstrap. Then I did what all the teachers always suggest... I checked the documentation found here.

When I changed this line:

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

To this:

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

It finally became centered! So if you're using the alpha version 5 of Bootstrap, give this a go. Hope this helps! :sparkles:

Alexander Lanz
Alexander Lanz
10,420 Points
Alexander Lanz
Alexander Lanz
10,420 Points

Hello!

Thank you for answering my question. I've finished the course now and I realized that there are a some differences between the v4 alpha version the tutorial uses and the v4 alpha version I use. The offset-lg class is one of them.

I was using Bootstrap 4.0.0-alpha.5

regards, Alexander

Jason Cook
Jason Cook
11,403 Points
Jason Cook
Jason Cook
11,403 Points

Nice job, Jennifer! I had the same issue, and had to brutally track it down! I should have checked the forums sooner to find your response, to save a lot of time! :-)

Upvoted!

Happy coding!

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

Hi! there things have changed in Bootstrap-4.0.0-beta. None of the above classes like col-lg-offset-3 or offset-lg-3 works. New Spacing Utilities have been added. Refer to (https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering)

This work for 4.0.0-beta

<div class="col-lg-6 mx-auto">

mx refers to both margin-left and margin-right and both are set to auto which aligns it Center.

Aline Pauwels
Aline Pauwels
7,353 Points
Aline Pauwels
Aline Pauwels
7,353 Points

Thank you you resoly my problem ! :D

osman musse
osman musse
169 Points
osman musse
osman musse
169 Points

Jennifer thanks for that important update info keep it up.

osman musse
osman musse
169 Points
osman musse
osman musse
169 Points

thanks Karan Nahar