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.
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: