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 Enhancing the Page

Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points
Posted by Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points

shortening the length of the email form

I used mx-auto in my code for the form, but the form looks too wide. How can I narrow it down so it fits snugly under "Full Stack Conf"?

2 Answers

kols
kols
27,007 Points

There were some similar questions/comments on the previous video, but for anyone still curious or having trouble with this...

You can add 'col-lg-6' to the class declarations in the button add-on div in order to more closely match what Guil has done in the video tutorial. Here's how this looks in my code:

<div class="input-group col-lg-6 mx-auto">
   <input type="text" class="form-control" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="button-addon2">
   <div class="input-group-append">
      <button class="btn btn-primary" type="button" id="button-addon2">Submit</button>
   </div>
</div>

Just a quick note: If you're confused by this - or it isn't working for you - don't worry. By going through the rest of the videos in this course, it should clear up any confusion you might have on how to resolve similar layout issues. :thumbsup:

Gabriel Plackey
Gabriel Plackey
11,064 Points
Gabriel Plackey
Gabriel Plackey
11,064 Points

I'm not too familiar with the particulars you are talking about or looking at. But I think you could throw it into a div with a max-width. Like a wrapper.