Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap 4 Basics (Retired) Getting to Know Bootstrap 4 Creating a Simple Page

heather918
heather918
6,375 Points

Input is centered, but H1 and P tags are not. Font style/size is also not identical to video.

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags --> <title>Full Stack Conf</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head> <body>

<div class="container text-xs-center">
  <h1 class="display-1">Full Stack Conf</h1>
  <p class="lead">Coming soon!</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-secondary" type="button">Sign Up!</button>
        </span>
      </div>
    </div>
 </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body> </html>

heather918
heather918
6,375 Points

Thank you Gregory. I hadn't realized I was using the wrong version. After following Guil's URL in an earlier video I was able to modify my starter template, and everything is working properly now. Thanks again!

mohammed abdi abdulahi warsame
mohammed abdi abdulahi warsame
4,926 Points

can anyone help!! i dont know where iam getting it wrong, but the class is not working for me

mohammed abdi abdulahi warsame
mohammed abdi abdulahi warsame
4,926 Points

can anyone help!! i dont know where iam getting it wrong, but the class is not working for me

1 Answer

Gregory Ledger
Gregory Ledger
6,116 Points

"text-xs-center" is for version 4. "text-center" is for version 3.