Tribute help with responsive class .row

Tribute help with responsive class .row
0
#1

I’m working on this first project with a mix practice of semantic tags and bootstrap. However, I don’t know why the border of the div mainInfo with class .row keeps getting out of the the root div with class .container-fluid. I need to divide into sections inside that div mainInfo later.

Could anyone please help me? Here is my codepen for this tribute project.

Thanks,
AnT

#2

Maybe I can help. As I see it you declared the class of container-fluid on a header tag instead of a div.

<h2 class="container-fluid">

Instead of:

<div class="container-fluid">

Additionally, there is one closing div in excess in the end of the HTML structure:

<div class="mainInfo row"> Main info
        </div>
</div>

But maybe that’s just there because you are articulating the main info.

Hope I was of some help :).

#3

Thanks for helping me. I did make a mistake with <h2> tag and have fixed it, but the <div class="mainInfo row"> is still out of border. I don’t know why it does not fit if I add class row in it.
I can change all semantic tags to div but I would like to practice with semantic tags as well…

Please help~

#4 
        <div class="info col-8">info</div>
        <div class="side-info col-4">Side bar</div>
#5

Thanks for reply, @RandellDawson, but the border of the div still not within the <div class="contain-fluid">…

#6

It is because the Bootstrap class row has a -15px left and right margin. You can test this by writing:

.row { margin: 0;}

and the row will be contained like you are expecting.

Whenever in doubt of what styles have been applied to an element, you can right-mouse click the element and select Inspect (in Chrome) and then click on Computed to see all the properties with values.

image
image.png1914×948 251 KB

#7

Thank you so much! It works!
@RandellDawson, if you don’t mind, could you tell me where you find the source to fix this issue? I look through bootstrap site to find this info about class row but cannot find it.
Thanks!

#8

See the screenshot I added in my last post.

#9

Thanks @RandellDawson, but I have another question, why can’t this code below work:

<div class="mainInfo row">
          <div class="col-xs-8">info</div>
          <div class="col-xs-4">Side bar</div>
 </div>

but this one works:

<div class="mainInfo row">
          <div class="col-8">info</div>
          <div class="col-4">Side bar</div>
</div>

Thanks

#10

Bootstrap 3 used the col-xs- syntax. Bootstrap 4 is “mobile first”, so leaving off a screen type (sm, md, lg, etc…) is the same as the Bootstrap 3 xs. There were very big changes in syntax between 3 and 4. Currently, FCC teaches Bootstrap 3, so when ever you look up documentation, make sure you are viewing version 3 documentation instead of version 4. The main Bootstrap site is all about version 4.

#11

Thanks again for your explanation. I really appreciate your help :slight_smile:

#12

No problem. I am here to help where I can.

Sorry for not understanding your original question sooner.

#13

Sorry for not getting back to you sooner, I guess there’s a time zone difference.

Indeed as @RandellDawson explained, far more eloquently than I ever could, it’s about the sometimes quirky default settings of bootstrap.

Thank you @RandellDawson, always available.