Tribute Page Finished Yet Confused With Quincy's Use Of Row In His Tribute Page

Tribute Page Finished Yet Confused With Quincy's Use Of Row In His Tribute Page
0

#1

This is my tribute page which I tried to mirror exactly from the original tribute page as made by Quincy Larson. The part which bugs me is his use of class row. He used only one row and in it he put the entire content like lists, headings, images, paragraphs, etc. Also, inside one col-xs-12(just after row) he inserted another col. So col inside col. This has got me confused as to his method.

What I understand from Bootstrap is, you have a container then inside you have a row and inside that row you have cols which may or may not filled the entire row. Then only you can start a new row after the previous row ends and so on. But his(Quincy’s) is one row, inside it one col then inside that col another col.

I need help understanding his row and col method.

Links:
My Code : https://codepen.io/selate/full/ppyjVv/
Original Tribute Page Code(FCC) : https://codepen.io/freeCodeCamp/full/NNvBQW/


#2

Unlike containers and rows, Bootstrap columns are nestable and the part of the code that you mentioned, as far as I can tell, is perfectly valid.

If I’m not mistaken, the effect of structuring it this way is two-fold:

  1. Since columns have left and right paddings of 15px, nesting a column inside a column would mean that content in the nested column can take advantage of that padding (a row has -15 px left and right margins, so content inside a column that is immediately inside a row would be at the edge of a container)
  2. Nested columns scale with respect to the width of its parent column. While it’s not apparent/irrelevant in the example tribute page, nesting columns allow you to create more complex layouts, consider the following code:
<div class="col-xs-9 col-md-6">
  <div class="col-xs-6"></div>
  <div class="col-xs-6"></div>
</div>

I hope that helps. :slight_smile:


#3

Thank you so much for the explanation :blush:


#4

also I can put a huge number of stuffs inside one row, right, just as in original tribute page code?


#5

The row class is meant to be a wrapper for columns and content should be placed inside columns. If I remember correctly, you can have any number of columns inside a row and they will just stack according to their order and how much space they fill up. :slight_smile:

You may find this useful: https://getbootstrap.com/docs/3.3/css/#grid-intro


#6

Thanks a lot, bud! :slight_smile:


#7

Jumping into the conversation. Why does he use row at the beginning? I didn’t use it until I got to the timeline and wanted to add columns to offset where the timeline was place on the screen and it doesn’t seem to have affected anything.


#8

I’m definitely missing something. I tried copying Quincy’s code, but I’m not getting any of the centering or background coloration. Am I missing some hidden code?


#9

Probably don’t have the CDN for bootstrap.


#10

Okay. That definitely makes sense, so I’ll have to work out how to do that. Thanks.