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 trialGoldSpec Digital
4,185 PointsThis 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.
8 Answers
Mohammed Ali
11,134 PointsBoostrap 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
Courses Plus Student 9,503 PointsGood 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
10,992 Pointsthanks, was fighting the same issue.
Greg Witt
27,133 PointsThis 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>
Katiuska Alicea de Leon
10,341 PointsYes! I did what Jeff Sanders mentions above.
Kevin Gates
15,053 PointsGuil Hernandez : can you update the Teacher's Notes with the correct code, since the video is now outdated?
Karina Rogers
Front End Web Development Techdegree Graduate 15,909 PointsGuil Hernandez, this still needs updating
Felipe Aguiar
Courses Plus Student 3,477 PointsThe video needs updating
shaun bolak
Front End Web Development Techdegree Graduate 18,080 PointsHi 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:
Copy the latest html started template (click "get started" > "starter template").
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).
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
7,015 PointsThank you! I was kinda lost as well...
Greg Witt
27,133 PointsI 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
Front End Web Development Techdegree Student 4,640 PointsAgreed, my button on class="btn-btn-secondary" won't line up to the right height of the enter email box.
Kevin Gates
15,053 PointsHi 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
9,830 PointsI 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>
Stivan Radev
1,475 PointsStivan Radev
1,475 PointsWhat exactly are they changing? Are you talking about the class="" code?