Feedback on tribute to a dog

See the Pen FCC Responsive Tribute Page by Momo Khan (@KhanOnCodePen)

Two things that I could not figure out how to do on bootstrap 4 were to make the caption part of the thumbnail for the image and also how to keep all of the list items left justified while also keeping the list centered.

Add d-inline-block and text-left classes to the ul element.

	    <h4>Lucy's Life:</h4>
	    <ul class="list-unstyled d-inline-block text-left">
	      <li><b>2003</b> - Lucy was adopted</li>
	      <li><b>2013</b> - Lucy ate some ants</li>
	      <li><b>2015</b> - Lucy passed away. Rest in peace, Lucy</li>
1 Like

Thank you. If I wanted to also have this list sort of indented underneath the header would I do that through using margin-left on ul? Would this also work for decreasing the space between the quote and the cite for the quote?

Also it seems like the example code pen text for the block quote is larger without having done any more styling. I know I could make it larger with styling, but I was wondering if there was any particular reason for that.


Do you mean the vertical space? If so, then you want to change the value of margin-bottom for the p element.

It appears to be a difference in the way Bootstrap 3 (the example) and Bootstrap 4 (the version you are using) affect blockquote elements.