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) Using Bootstrap Components Displaying Content with Cards

nicolaslemaire
nicolaslemaire
12,806 Points
Posted by nicolaslemaire
nicolaslemaire
12,806 Points

Can't understand why my buttons don't get centered with "center-block"

Hi guys, I've followed Guil's videos thoroughly but I don't know if it's because he uses a "beta-version" of Boostrap or something, but it seems that the "center-block" to center the buttons is not functioning here on any external text editor, such as codepen. Here comes my code, maybe I got something wrong but I don't think so. Please check it out, thanks in advance:

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

<head> <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>Full Stack Conf</title> <!-- 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>

<nav class="navbar navbar-dark bg-primary"> <div class="container"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#home">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#speakers">Speakers</a> </li> <li class="nav-item"> <a class="nav-link" href="#schedule">Schedule</a> </li> </ul> <a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down" href="www.teamtreehouse.com">Presented by Treehouse</a> </div> </nav>

<div class="jumbotron jumbotron-fluid bg-info"> <div class="container text-sm-center p-t-3"> <h1 class="display-2" style="font-weight:400">Full Stack Conf</h1> <p class="lead" style="font-weight:500">A One-day Conference About All Things JavaScript!</p> </div>

<div class="btn-group m-t-2 center-block" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary btn-lg">Register Now</button>
  <a class="btn btn-secondary btn-lg" href="#speakers">See Speakers</a>
</div>

</div>

<div class="container p-t-2"> <div class="row"> <div class="col-md-4"> <h3 class="m-b-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-md-4">
    <h3 class="m-b-2">About Full Stack Conf</h3>
    <img class="m-b-1 img-fluid img-rounded hidden-xs-down" src="http://treehouse-code-samples.s3.amazonaws.com/bootstrap-4/img/pdx.jpg" />
    <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-md-4">
    <h3 class="m-b-2">What You'll Learn</h3>
    <ul>
      <li><strong>MongoDB</strong>: No SQL 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>


<!-- Second div: speakers -->
<h1 id="speakers" class="display-4 text-xs-center m-y-3 text-muted">Speakers</h1>


<!-- Third div: schedule -->
<h1 class="display-4 text-xs-center m-y-3">Schedule</h1>

<button type="button" class="btn btn-outline-info btn-lg m-y-3 center-block">Don't Miss Out, Register Now!</button>

<!-- signup form -->
<hr>
<div class="row p-y-2 text-muted">
  <div class="col-md-6 col-xl-5">
    <p><strong>About Treehouse</strong></p>
    <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
  </div>

  <div class="col-md-6 col-xl-5 col-xl-offset-2">
    <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email">
      <span class="input-group-btn">
             <button class="btn btn-primary" type="button">Sign up</button>
          </span>
    </div>
  </div>
</div>
<hr>
<!-- /signup form -->
<div class="row p-y-1">

  <div class="col-md-7">
    <ul class="nav nav-inline">
      <li class="nav-item">
        <a class="nav-link" href="#">Community</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tracks</a>
      </li>
      <li class="nav-item">
        <!-- Example split danger button -->
        <div class="btn-group dropup">
          <button type="button" class="btn btn-secondary">Other Confs</button>
          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>

</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">CSS Conf</a> <a class="dropdown-item" href="#">Python Conf</a> <a class="dropdown-item" href="#">Java Conf</a>

            <a class="dropdown-item" href="#">Swift Conf</a>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <div class="col-md-5 text-md-right">
    <small>&copy; 2016 Full Stack Conf &amp; Treehouse</small>
  </div>
</div>
<!-- footer -->

</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>

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

Sorry about that, when I pasted it, it was not that mess :p

3 Answers

rays0
rays0
16,293 Points
rays0
rays0
16,293 Points

Just to add, m-x-auto is now (12/16/16) mx-auto.

Ravi Yadav
Ravi Yadav
10,152 Points
Ravi Yadav
Ravi Yadav
10,152 Points

Hi, center-block is not supported anymore in bootstrap 4 alpha. You should try other methods, like first make the element large by btn-lg next make it block by d-block and then give auto margin to right and left sides by m-x-auto.. Add these three classes and you will get your desired result.

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

Hey Ravi, thanks A LOT, I'll try that out later on today, hopefully that'll do the trick this time ;)