Tribute Bootstrap help

1

Howdy,

I’m working on my tribute project with some of the formatting and trying to get bootstrap to work as I’d like.

https://codepen.io/senoff/pen/yzYjbG

so i’ve used a bootstrap card for background and then for the time line I used two cards. one for the image and the caption and another card or the time line. i had to use css to get the time line moved to the right see .list. that’s a hack.

and i also used .header-space css to create room between the top card and the list.

seems like there should be ways in bootstrap to achieve this without the css

also take a look at the first card

i don’t know how the class="“card mx-auto d-block card-background-2” works. i don’t know what d-block is.

or why mx-auto works with d-block but not by itself.

also i tried to add img-polaroid to this class and it didn’t work.

3

mx-auto d-block card-background-2

  • mx-auto for margin left right auto

  • d-block for display:block

  • for the colors use for example bg-primary or text-white colors with bootstrap

Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options

card use flex, don’t change to block, but you must define the size, for example with the class w-25 (see documentation) and use mx-auto for the margin