Tribute - Basic help with Align, Div, Bootstrap grid, Responsive resizing

1

Hello,

Pardon me if these questions seem very ignorant. It’s because I am completely new to coding. I tried to make a tribute page following the example shown in the video but mine looks severely stupid!

I tried reading about div containers to understand how to have everything center aligned like in the example, but what I tried to do doesn’t work. First tried by putting in columns so that it would span all 12 regardless of small or large device…does not work when I view on mobile (image is much larger than div container. I wanted to have the Heading block centered as in the example, followed by the centered image and caption, followed by a centered timeline and quote with link.

Barry Allen

I also liked this one user’s page but did not understand how his code works. Why can he put in div containers of columns without entering the row first? Also, I thought columns must sum to 12 in each row…I do not see that happening in his code, so can someone please explain why his seems to do exactly what I want mine to do but doesn’t follow what I’ve read on w3?

What I’ve read so far hasn’t helped me to understand how to answer those questions, which is why I am asking (trying to follow the read search ask method).

Resources I’ve used:

http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
http://getbootstrap.com/css/#grid-example-basic

2

[W3C] documentation on how to center things using CSS. The footer tag has a class text-right??

<ul></ul>

ul {
  display: inline-block;
}

Changing the display value will allow you to center the ul tag.

3

Hi @mvoltairec
Unfortunately, codepen.io decided to replace the quick-add bootstrap version from 3 to 4 without any notice (it might be a temporary bug). You have to add link to version 3 manually.

4

Thanks! I think it’s working now :)…

Any further feedback would also be greatly appreciated!

5

Thanks Reggie, I tried using the inline block and didn’t notice a change…could something be overruling it? I am actually ok with the way it looks right now but I am curious to know why it’s not working, if you know why I would really appreciate your input! I had a big issue with the picture not being centered and not resizing properly but I forked the page and now it works magically.

6

The documentation to center-text class in bootstrap. Add this class to h3, blockquote, caption, h4 and footer tag.

// example
<h3 class="text-center">(your content)</h3>

The documentation to center-block class in bootstrap. Add this to ul tags.
Watch this video on css-styles to learn how to inspect your css and other people webpages.