I’m having a hard time understanding how the bootstrap “offset” classes work, specifically the ones used in the example tribute page: https://codepen.io/freeCodeCamp/pen/NNvBQW
Specifically, I’m looking at how the author was able to get a gap before or after the div with the timeline information in it. Here’s what I have right now:
Some of Bob Uecker’s notable achievements:
- Appeared as the ring announcer for the 1987 Wrestlemania event in Pontiac, Michigan.
I’ve tried defining screen sizes for mid, small, and extra-small, with or without offsets for any and all of them, and nothing seems to be working. What am I missing here?
Also, this is my first time posting to this forum, so I have no idea how to paste a snippit without it translating into actual code…
the <div> tags have nothing really to do with the spacing between the header tags and list tags.
https://www.w3schools.com/tags/tag_ul.asp
there’s “built-in” spacing between the <h3> tags and the <ul> tags. Once the <h3> tag is closed and the <ul> is started the browser inserts appropriate spacing
For reference, the full pen is here: https://codepen.io/tlannoye11/pen/QdXojg/
I added the red border to try and better illustrate what I’m looking for. I want to have a nice amount of gutter in between the two lists, but no matter what I do, they keep mashing up next to each other to look like one big blob. How can I control the space between the two lists?
Nvm, I think I found the answer…needed to add a second div inside the one that has the col-sm-6 class.
Updated code is in the same pen above.
2 Likes