Tribute page problem: unusual wrapping with 12 cols

Tribute page problem: unusual wrapping with 12 cols
0

#1

Hey guys and gals! I cant belive I’m asking for help right out of the box, but ive searched for 2days and could not come up with an answer. ive tried every solution I can find.
I set up like this

<div row
can anyone tell me why "col 10" would wrap to a new line underneath "col 2"?!

ive tried changing the xs-10 to xs-9. it goes in a row then. but I have space at the end of my row. want full page usage, without a giant blank 12th column.

ive tried changing “xs” to “md”, “lg” and just “col-” same effect.

I feel that there is a crucial bootstrap issue that I’m not understanding or codepen is janky. my bet is on me not getting it!
Thanks, any advice will be welcome. I Really don’t want to take such a noob question to stack overflow!
Bob


#2

It looks like indentation problem. Never indent the code using spaces! U have to use Tab key

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 tt">2</div>
    <div class="col-md-10 tt">10</div>
  </div>
</div>

Also u can’t use the same ID twice or more on one page. Use class for the “banner-icon”.

Good luck man :slight_smile:


#3

Look at the document elements in Developer Tool. You have two non-breakable spaces in the page text.

image
image


#4

Solved it! feel stupid now!
do you mind telling me how you figured that out?
trying to learn how to trouble shoot better.
and thanks for the id note. you saved me from another potential
problem


#5

If you have any content in <div#row>, which not included in <div#col-…>, it will be wrapped out the columns. I did something similar in my tribute page (https://konstbessonov.github.io/TributePage/). So, it’s was just a piece of luck. I opened your pen and did “Tidy HTML”. Then saw, what wrapping is gone. Thus opened the devtools and… voila - extra content out of the columns!