Can't figure this out

Can't figure this out
0

#1

Working on my second project for front-end developement and I’m trying to have these 2 containers right next to each other. I’ve been working on this for hours and wouldn’t ask for help if I didn’t really need it. I tried researching grids but everything I found made perfect sense but didn’t solve my problem. Can anyone point me in the direction on how to have 2 jumbotron classes next to each other underneath my nav bar? I’ll provide link below.

Link: https://codepen.io/nicer00ster/pen/aVBaQe


#2

Try wrapping your two containers in a row.

For example:

Also, you’re using id=“jron1” twice. IDs should be unique. I recommend either making a second ID, or making that a class instead.


#3

Oops.

For example:

<div class="row">
    <div class="jumbotron img-thumbnail col-md-6" id="jtron1">
    <div class="jumbotron img-thumbnail col-md-6" id="jtron2">
</div>```

#4

Yeah… I tried that but the second jumbotron just nests into the first. :frowning:


#5

I just forked it, take a look: https://codepen.io/ethanryan/pen/QOGeNg


#6

Also make sure your browser is wider than 767px. It’ll show mobile view when it’s smaller than that.


#7

No one else has mentioned this, but both of the image tags are missing a closing >


#8

Omg. Lol I must’ve used the row class more than 100 times because I had a feeling that was what it was but I didn’t realize that my ending div was closing before the 2nd container was linked. Thank you so much for the feedback, made me see things a little clearer. :slight_smile:


#9

Awesome, glad I could help!