Bootstrap classes not responding in Random Quote Machine

JavaScript
1

Tell us what’s happening:

Hello! Finishing up the HTML markup and noticed some of the bootstrap classes are not applied to my Random Quote Machine project. More specifically:

  1. the content does not center on the page
  2. my btn-default buttons don’t show a border/frame, and they stack vertically even though I used list-inline class.

Thanks for reading!

Steve O.

Your code so far

    https://codepen.io/stevepo74/pen/ExKyNvB

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

2

Hi Steve O,

You have bootstrap 4 linked to your html page, and you are using bootstrap 3 classes.
Either change your bootstrap to bootstrap3 or:

  1. offsetting class should be offset-md-2 not col-md-offset-2
    https://getbootstrap.com/docs/4.0/layout/grid/

  2. for buttons in b4
    https://getbootstrap.com/docs/4.0/components/buttons/

  3. for inline list, give your list items a class of “list-inline-item”
    https://v4-alpha.getbootstrap.com/content/typography/#inline

3

Wow, you are amazing! You saved my day! Thank you so much, Vumbhoni!

Have an awesome day!

1 Like