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) Building Forms with Bootstrap Structured Form Layouts with the Grid

Ulrike Pechmann
Ulrike Pechmann
18,211 Points
Posted by Ulrike Pechmann
Ulrike Pechmann
18,211 Points

Solved! Expiration Date Selects are close to the edge of the modal box on the left and right side.

My Solution: 

            <div class="row">
              <label class="col-lg-12">Expiration Date</label>
              <div class="col-lg-8 form-group">
                <select class="custom-select form-control">
                    <option value="1">1 - January</option>
                    <option value="2">2 - February</option>
                    <option value="3">3 - March</option>
                    <option value="4">4 - April</option>
                    <option value="5">5 - May</option>
                    <option value="6">6 - June</option>
                    <option value="7">7 - July</option>
                    <option value="8">8 - August</option>
                    <option value="9">9 - September</option>
                    <option value="10">10 - October</option>
                    <option value="11">11 - November</option> 
                    <option value="12">12 - December</option>  
                </select>
              </div>
              <div class="col-lg-4 form-group">
                <select class="custom-select form-control">
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>   
                </select>
              </div>
            </div>
Jake Cormier
Jake Cormier
16,098 Points
Jake Cormier
Jake Cormier
16,098 Points

To anyone that tried this, yet it didn't work - I used a horizontal padding of 1 to its initial div class and it did the trick.

lonedo
lonedo
24,500 Points

Thank you Kindly!

Robin Damsgaard Larsen
Robin Damsgaard Larsen
13,929 Points
Robin Damsgaard Larsen
Robin Damsgaard Larsen
13,929 Points

I can confirm this works! That is, adding the form-control class to the second select-element to the code snippet from the teacher's notes.