Wells
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 spotlight content by placing it in a light grey box.
Default
Use the default well size for most situations.
Appearance
Content
Correct use
Compliance point(s):
- Use to call attention to a specific segment of noteworthy content
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<div class="well">...</div>Small well
Use the small well when space is at a premium, and reducing the inner padding allows for more content to appear in a single row.
Appearance
Content
Correct use
Compliance point(s):
- Use
.well-smto call attention to a specific segment of noteworthy content, as well as reduce the inner padding of the container
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<div class="well well-sm">...</div>Large well
Use the large well when there is a need for additional prominence on the page. Since the default well already creates prominence, there is limited value to using the larger well.
Appearance
Content
Correct use
Compliance point(s):
- Use
.well-lgto call attention to a specific segment of noteworthy content, as well as expand the inner padding of the container
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<div class="well well-lg">...</div>Enhanced use
Add-on features
Additional add-on features and behaviours are available.
Some of the code and documentation for this page is sourced from Bootstrap (external link)
- Date modified: