Jumboton

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to extend the entire viewport to showcase key content on your site.

Design and coding

Basic use

Default

Appearance

A component for calling extra attention to featured content or information.

Learn more

Correct use

Compliance point(s):

  • Use to call attention to a specific segment of noteworthy content
  • Use primarily for display beyond the viewport of the container (full-screen)
Incorrect use

Compliance point(s):

  • Do not use this styling if the content is confined to a .container, use wells instead
  • Do not use in place of more effective ways to showcase content, such as alerts, images, carousel, lead in statements, and so forth
  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<section class="jumbotron">
<p>...</p>
<p><a class="btn btn-info btn-lg" role="button">Learn more</a></p>
</section>

Full width

To make the jumbotron full width, and without rounded corners, place it outside all .containers. Instead add a .container within.

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: