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 Basics Getting to Know Bootstrap Creating a Simple Page

GoldSpec Digital
GoldSpec Digital
4,185 Points
Posted by GoldSpec Digital
GoldSpec Digital
4,185 Points

This video needs updating

Hi,

Please could there be something in the teachers notes, or even a new video on this, it's very confusing for beginners when Bootstrap change their code, thank you to those in the comments who helped with this.

Stivan Radev
Stivan Radev
1,475 Points
Stivan Radev
Stivan Radev
1,475 Points

What exactly are they changing? Are you talking about the class="" code?

8 Answers

Mohammed Ali
Mohammed Ali
11,134 Points
Mohammed Ali
Mohammed Ali
11,134 Points

Boostrap has been updated since this vid and it's different which makes hard to follow along. Here's how the new Button addons second option looks:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

I couldn't get the element to center it, because it was taking the whole page and sizing only effected the width of input element its self and nothing else. However by wrapping <div class="col-lg-6"> fixed the issue then you are able to use mx-auto if you have same issue. Here's my code...

  <div class="col-lg-6 mx-auto">
          <div class="input-group mb-3 ">
              <input type="text" class="form-control" placeholder="Enter you email for info" aria-label="Recipient's username" aria-describedby="basic-addon2">
              <div class="input-group-append">
                  <button class="btn btn-outline-secondary" type="button">Sign up</button>
              </div>
          </div>
        </div>
Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

Good call, Mohammed. For what it's worth, I got the same effect by adding .col-lg-6 and .mx auto to div.inputgroup

Roger Sullivan
Roger Sullivan
10,992 Points

thanks, was fighting the same issue.

Greg Witt
Greg Witt
27,133 Points

This should Style the button correctly!

<div class="col-lg-6 mx-auto"> <div class="input-group mb-3 "> <input type="text" class="form-control" placeholder="Enter your email for info" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-secondary" type="button">Sign up</button> </div> </div> </div>

Kevin Gates
Kevin Gates
15,053 Points
Kevin Gates
Kevin Gates
15,053 Points

Guil Hernandez : can you update the Teacher's Notes with the correct code, since the video is now outdated?

shaun bolak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points
shaun bolak
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points

Hi All^^ I ran into the same issues that I think anyone who is new to bootstrap would - the code does not match the current bootstrap code snippets. While I agree that this should video should be updated, on the other hand, it would be hard to keep the videos up-to-date with the ever changing environment that is web-development. If it were me, I would simply give instructions to copy the latest code, etc.

More to the point - as of 5/28/2020, this is the code that I used:

  1. Copy the latest html started template (click "get started" > "starter template").

  2. Adding the "mx-auto" style="width: 800px;" to the page did not work for me - the input/button element was already centered, and if I set this class within it, the setting the width above 400px breaks the mobile first design (it will cause a scroll-bar to appear on screen sizes under the width that you set - in my case In liked 800px).

  3. Change the "width" parameter to max-width. Then set the size that you like.

Here is the full code example. Again, the starter template will likely be different for you. The classes may even be different by that time. Look at the documentation, and try playing around with the parameters. Good luck! 

<!doctype html>
<html lang="en">
  <head>
    <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Full Stack Conf</title>
  </head>
  <body>
    <div class="container text-center mx-auto" style="max-width: 800px;">
      <h1 class="display-1">Full Stack Conf</h1>
      <p class="lead">Coming soon - A One-Day Conference About All Things Javascript!</p>

      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Enter your email for info" aria-label="Enter your email for info" aria-describedby="button-addon2">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button" id="button-addon2">Sign-up</button>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
Amanda Quintero
Amanda Quintero
7,015 Points
Amanda Quintero
Amanda Quintero
7,015 Points

Thank you! I was kinda lost as well...

Greg Witt
Greg Witt
27,133 Points
Greg Witt
Greg Witt
27,133 Points

I agree with the folks here. This video is dated. The class names render significant;y different in the more recent Chrome and Firefox Browsers.

Jaime Takikawa
seal-mask
.a{fill-rule:evenodd;}techdegree
Jaime Takikawa
Front End Web Development Techdegree Student 4,640 Points
Jaime Takikawa
.a{fill-rule:evenodd;}techdegree
Jaime Takikawa
Front End Web Development Techdegree Student 4,640 Points

Agreed, my button on class="btn-btn-secondary" won't line up to the right height of the enter email box.

Kevin Gates
Kevin Gates
15,053 Points
Kevin Gates
Kevin Gates
15,053 Points

Hi Jaime Takikawa , I noticed your code may be incorrect. You likely need this instead:

<button class="btn btn-secondary">Click Me</button>

As you can see above, you need a space between btn and btn-secondary.

Aaron Cummins
Aaron Cummins
9,830 Points
Aaron Cummins
Aaron Cummins
9,830 Points

I wonder if it's been updated on Bootstrap again. Maybe Bootstrap updates a lot and thats why the video hasn't kept up. I was still able to add "col-lg-6" to the first div and "btn" to the span as well as any things he adds in the video. Anything he did to the button, I did to the span instead. Here's my final code for the input group.

<div class="input-group col-lg-6 mx-auto mb-3 p-3"> <input type="text" class="form-control" placeholder="Enter your email for info" aria-label="Enter your email for info" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="btn bg-primary" id="basic-addon2">Sign up</span> </div> </div>