Skip to content

Ditch Custom CSS for Bootstrap

We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.

Don't worry - there will be plenty of time to customize our CSS later.

Delete the .red-text, p, and .smaller-image CSS declarations from your style element so that the only declarations left in your style element are h2 and thick-green-border.

Then delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.

Finally, remove the smaller-image class from your first img element and replace it with the img-responsive class.

Tests

  • Waiting: 1. Your h2 element should no longer have the class red-text.
  • Waiting: 2. Your h2 element should now have the class text-primary.
  • Waiting: 3. Your paragraph elements should no longer use the font Monospace.
  • Waiting: 4. The smaller-image class should be removed from your top image.
  • Waiting: 5. You should add the img-responsive class to your top image.
/**
* Your test output will go here
*/