Tribute Page Project!

EDIT- Removed Link as pen has been deleted

  1. You can make the parent div text-center and then change the ones you don’t want text-centered. In your css file: .container {text-align: center;} li {text-align: left}
  2. I’m not sure what you mean. Does this work? In your css file: figcaption {background-color: white;}
1 Like

Thanks for replying! Actually the challenge asks me to do everything in Bootstrap and not use custom CSS. I cannot make it look like the sample tribute page

I made some changes keeping in view your suggestions but still the li’s are not where they should be! and the caption background width is not the same as image width.

For the challenge, you can use css, but don’t mess with custom css for layout because Bootstrap takes care of that. Avoid padding, margins, and floats in css. Things like text-align, colors, and borders are okay to customize.

You can use custom CSS if you want for the entire project. There are no requirements in the user stories to only use Bootstrap or that you have to use Bootstrap at all. You can choose to use external CSS libraries (i.e. Bootstrap) or no libraries at all. The choice is up to you. The sample page does use Bootstrap 3 and the following custom CSS, but the sample is just a guide and you do not need to duplicate it.

body {
  margin-top: 60px;

Alright! I will keep that in mind next time I attempt it. Thanks!

Good job! Huge improvement. The html and css is a lot cleaner.

The only thing I might change is <strong> tags to <b>. Or, change it to <span class="timeline-year"> and the css to .timeline-year {font-weight:700;} because strong is meant to be used for emphasizing something of great important to the content. See for an in-depth explanation.

1 Like