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) Responsive Layouts with the Bootstrap Grid Column Sizing

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Two rows of three columns, how do I line them out exactly above each other?

One row is text. The other row has also three columns of checkboxes.

How do I get them niceley lined placed above each other? (So they will have the same margin)

My english in combination with explaining programming / webdesign language isn't that well yet. But I think my question is more clear if you look into my workspace. http://port-80-fejk6yu562.treehouse-app.com/

Thanks,

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

:point_right: Your "rows" are not actually separate rows.

What you intended as a second row is actually an extension of the first row beyond the 12th column. Your current layout looks like this:

<div class="tekst">
    <div class="aandoeningen">
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="checkbox symptomen">
            <label>
                <div class="col-md-4">...</div>
                <div class="col-md-4">...</div>
                <div class="col-md-4">...</div>
            </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
        <footer></footer>
    </div>
</div>

Notice how the checkbox div is a peer to the first three column divs, no "row"s are actually declared, and the three columns in the checkbox div are all wrapped with a LABEL.

You might want to restructure your layout to look more like this:

<div class="tekst container">
    <div class="aandoeningen row">
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
    </div>
    <div class="checkbox symptomen row">
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
    </div>
    <div class="row">
        <button type="submit" class="btn btn-default col-md-2 col-md-offset-5">Submit</button>
    </div>
</div>
<footer></footer>

The changes made here from the original are:

  • the rows are peers (siblings) to each other
  • the rows are all declared as rows
  • they each contain the column div's without any intermediate containers
  • the submit button is given it's own row and column position
  • the outer container is declared as a container
  • the footer has been moved to after and outside the container