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 Andrea Faciane
Andrea Faciane
10,042 Points

input form is not centered

can anyone detect why my input form is not centered? also the heading's top margin failed to space the given rem

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Full Stack Conf</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 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 class="bg-info text-white">
    <div class="container text-center">
    <h1 class="display-1 m-t-6">Full Stack Conf</h1>
    <p class="lead m-b-3">Coming Soon, a One-day Conference About All Things JavaScript!</p> <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-primary" type="button">sign up</button>
      </span>
    </div>
  </div>
</div>


    <!-- jQuery first, then Tether, 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>

4 Answers

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Hey Andrea,

When you go on the bootstrap's doc, you will see the answer. It's now using "text-center" instead of "text-xs-center".

Do the change and this should work just fine :).

Oh, and just in case you need, here is my solution !

<div class="container text-center">
      <h1 class="display-1">Full Stack Conf</h1>
      <p class="lead">Coming Soon, a One-day Conference About All Things JavaScript!</p>

      <div class="col-lg-6 offset-lg-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>
    </div>
Andrea Faciane
Andrea Faciane
10,042 Points

thanks ...btw?... how do you know these things?

Tim Acker
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points
Tim Acker
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points

This lesson was very tricky to follow because it is based on an earlier alpha build of bootstrap and changes to bootstrap have been made. Change your CSS link to "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css". You need to be referencing the alpha 2 build and you are currently referencing alpha 6.

Andrea Faciane
Andrea Faciane
10,042 Points

thank you Timothy I did as you suggested. I copied the link that you posted. I saved and there was no change..is it me or is it a bug?

Pablo Mello
Pablo Mello
443 Points
Pablo Mello
Pablo Mello
443 Points

Thomas, I had the same problem faced by Andrea and your solution has helped me! Many thanks!

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Thanks Pablo for your answer :). Maybe there should be a warning at the beginning of this course which would tell that bootstrap 4 is now on Alpha 4 and not Alpha 2.

That being said it always a good practice to follow each course with the document of the technologie you are working on!

Thomas.