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 Adding Buttons and Button Groups

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Why doens't d-block m-x-auto center my buttons? I solved it with margin-left, is that a right solution as well?

For at least an hour I tried different things to center my buttons. "d-block block x-m-y didn't center my buttons. Why didn't it?

When I tried center-block on one button, the button centered, but it didn't work for two buttons. So finally I made a button group and just centered the buttons with margin-left in the stylesheet.

kobbyberks
kobbyberks
10,722 Points

In the very recent version of bootstrap 4 alpha, the hyphen between the margin and the direction has been removed. So instead of d-block m-x-auto, use d-block mx-auto. Hope this helps!

3 Answers

Andrea Monty
Andrea Monty
2,724 Points
Andrea Monty
Andrea Monty
2,724 Points

Bootstrap is now in Alpha 6 so there may have been more changes. Good news I read in Bootstraps Blog that Beta is coming soon so not as many changes will occur.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Thanks, but how did you know that and why is there a need to keep on changing this code by bootstrap? I tried it on every line in this code, but it didn't work though.

<div class="jumbotron jumbotron-fluid bg-info"> <div class="container-fluid navbar-header"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar- collapse-1" aria-expanded="false">
</div> <div class="collapse navbar-collapse navbar-fixed-top bg-info" id="bs-example-navbar-collapse-1"> <div class="container text-sm-center"> <ul class="nav navbar-nav nav-pills"> <li><a href="#">Home</a></li> <li><a href="#Symptomen">Symptomen</a></li> <li><a href="#">Aandoeningen</a></li> <li><a href="#">Online Buteyko training</a></li> <li><a href="#">Blog</a></li> </div>

</div><!-- /.navbar-
kobbyberks
kobbyberks
10,722 Points

Since Bootstrap 4 is still in its alpha stage, the code for some of their classes in use keeps on changing by the developers. So to know the classes to use (eg. d-block mx-auto), you have to regularly refer to their excellent and up-to-date documentation.

Regarding the code snippet in your comment, it seems you are still using Bootstrap 3 classes and that is the reason why they don't work as expected. I have rewritten your code using Bootstrap 4 classes.

<!-- navbar -->
<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
  <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation"></button>
  <div class="collapse navbar-toggleable-sm" id="bs-example-navbar-collapse-1">
    <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="#symptomen">Symptomen</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#aandoeningen">Aandoeningen</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#online-buteyko-training">Online Buteyko training</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#blog">Blog</a>
        </li>
      </ul>

    </div>
    </div>
  </nav>

  <!-- /navbar -->

  <!-- jumbotron -->
  <div class="jumbotron jumbotron-fluid bg-info text-white">
    <div class="container text-sm-center pt-3">
      <h1 class="display-2">Header Text</h1>
    </div>
  </div>
  <!-- /jumbotron -->

Please make sure to get the current version of bootstrap 4.0 alpha (as of 4th January, 2017) for this to work.

http://v4-alpha.getbootstrap.com/

For the mobile dropdown menu to work, you need to include jquery.min.js and bootstrap.min.js

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

My site actually looks better after copy copy-pasting these code's, but where should I put d-block-mx-auto so the buttons in the navbar will center?

kobbyberks
kobbyberks
10,722 Points

After referring to the docs, it seems the d-block mx-auto class cannot be used on navbar-items and there are also no classes to center navbar items. They can only be floated to the left or right using the float-md-right and float-md-left classes. But you can use your own custom css to center the navbar items. I will be using inline css for this.

The <ul> tag right after the container class in the navbar should now look like this:

<ul class="nav navbar-nav  style= "margin-left: 40%">

Play with the percentage value to find the right alignment.

Hope this helps!