Tribute help with responsive class .row

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~

5

Thanks for reply, @camperextraordinaire, 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
image1914×948 251 KB

1 Like
7

Thank you so much! It works!
@camperextraordinaire, 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!

9

Thanks @camperextraordinaire, 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

11

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

13

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

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

Thank you @camperextraordinaire, always available.