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

Ivan Kozhunkov
PLUS
Ivan Kozhunkov
Courses Plus Student 8,480 Points
Posted by Ivan Kozhunkov
Ivan Kozhunkov
Courses Plus Student 8,480 Points

How can i set 2 div's inline in the form?

 <div class="row"></div>
                  <label class="col-lg-12">Expiraton Date:</label>


                  <div class="form-group col-lg-8">
                    <select class="c-select form-control" id="exp-month">
                      <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="form-group col-lg-4">
                    <select class="c-select form-control" id="exp-year">
                      <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>

These 2 div's situate on different lines... Will happy for a help! :)

4 Answers

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

There are a few different ways of making this happen I'm partial to floats and here's an example to see what the out come looks like: codepen.io

here's what I came up with

.col_lg_12 {
  width: 100%;
  float: right;
}
.form-group-2 {
 width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.form-group {
    float: left;
  margin-right: 5px;
}

If you need more help understanding what I did please feel free to ask :)

Ivan Kozhunkov
Ivan Kozhunkov
Courses Plus Student 8,480 Points
Ivan Kozhunkov
Ivan Kozhunkov
Courses Plus Student 8,480 Points

I attempted to style it without any css code, only using bootstrap methods, also thought about writing some css... So or another, it looks rather nice, thanks a lot!)

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

Np, happy to help! Sorry didn't realize you were using bootstrap tho, I believe that code would be under the grid system? if I remember right, I haven't used it too much :(

Ivan Kozhunkov
PLUS
Ivan Kozhunkov
Courses Plus Student 8,480 Points
Ivan Kozhunkov
Ivan Kozhunkov
Courses Plus Student 8,480 Points

Yes, these "col" classes in my code toward exactly from bootstrap grid system.

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

Yeah I noticed right after you mentioned bootstrap, just goes to show my ignorance lol.

William Sanders
William Sanders
11,396 Points
William Sanders
William Sanders
11,396 Points

set the div's display to inline-block

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi Ivan Kozhunkov,

I know it may be a little late for this, but since we are both in the same boat, I think it may still be helpful for you (although you probably solved it already) or for others who may have the same issue.

What you did was almost perfect, the only thing is that regarding the row div, that you opened in the first line of the code you posted here above, ideally you would like to close it at the end of your code. Why? Because that div is the row that will make the grid work, that is, accept the column values you added.

HTH.

Ivan Kozhunkov
Ivan Kozhunkov
Courses Plus Student 8,480 Points
Ivan Kozhunkov
Ivan Kozhunkov
Courses Plus Student 8,480 Points

Hi, Nico!

It was my error from the workspace, where usually when you add an opening tag at the same time a closed tag was added. Sure, this div tag from the first line must be situated at the end of the code.