Style our screenshots better

[sarahmaddox]

Add a “screenshot” style to improve the way screenshots appear on the page. Example of some screenshots that would be more easily understood with better styling: https://www.kubeflow.org/docs/started/getting-started-gke/

Some styling suggestions to start with:

• Add a border to separate the screenshot from the text. The border should be reasonably unobtrusive.
• Add a margin at top and bottom of the image.
• Attempt center.
• Attempt ideal sizing.

Note: Add the style after we've implemented the Docsy theme (issue #291 , so that we can adjust the Docsy styles rather than the kf theme’s styes.

Consider contributing the style to the Docsy theme.

[sarahmaddox]

/area docs-ux

[sarahmaddox]

After some reading, I've discovered we can use the Bootstrap styles: https://getbootstrap.com/docs/4.0/content/images/ https://getbootstrap.com/docs/4.0/utilities/borders/

So, no need to create our own class.

[sarahmaddox]

/close

[k8s-ci-robot]

@sarahmaddox: Closing this issue.

In response to [this](https://github.com/kubeflow/website/issues/388#issuecomment-453350293): >/close Instructions for interacting with me using PR comments are available [here](https://git.k8s.io/community/contributors/guide/pull-requests.md). If you have questions or suggestions related to my behavior, please file an issue against the [kubernetes/test-infra](https://github.com/kubernetes/test-infra/issues/new?title=Prow%20issue:) repository.