Tribute Page to "The Office"

Heya Gals/Guys, I just finished my tribute page to my favourite show, The Office, and would love some feedback on it! Here’s the link:

Thank you!

Hey. Try using the bootstrap classes more effectively. You can end up with same (or very similiar anyway) result with a lot less css.

For example, to have a structure like you have (image quote - new line - quote image), you could just do this:

<div class="row">
  <div class="col-auto">
    <img class="img-actor" src="">
  <div class="col">
    <i>"If I had a gun with two bullets, and I was in a room with Hitler, Bin Laden and Toby, I would shoot Toby twice." - MICHAEL SCOTT</i>
  <div class="w-100 pt-3 pb-3"></div>
  <div class="col text-right">
    <i>“Reject a woman, and she will never let it go. One of the many defects of their kind. Also, weak arms.” - DWIGHT SCHRUTE</i>
  <div class="col-auto">
    <img class="img-actor" src="">
  <div class="w-100 pt-3 pb-3"></div>

with as little css as this:

.img-actor {
  border-radius: 50%;

Thank you for that! I will definitely try that! Just a quick question, what would say,


No problem!

I imagine you were trying to add some code to your post. When you want to do that, you need to wrap it in a single backtick if it’s just one line, or a triple backtick if it’s a block of code, otherwise it won’t show up.

See this post for more info.

Haha, yes, I was trying to put in a single line code. I had no idea it didn’t show up. Thank you once again!

I wanted to ask, what <div class="w-100 pt-3 pb-3"></div> does?

It’s fine, I had a hard time figuring that out as well. :slight_smile:

The “w-100” class just gives a 100% width at the div you’re using it on. You can see it in use in the Bootstrap 4 documentation here.

The “pt-3” and “pb-3” are spacing classes that, in this case, give some padding top (pt) and bottom (pb) respectively.

So, that <div class="w-100 pt-3 pb-3"></div> basically acts like a “break” to force the next column to start on a new line and have a little space between it and the one before it.

Awesome, I’ll try and refine my code and see how it goes!

1 Like