Bootstrap 4 | Wells
A bootstrap well is something like a bootstrap panel with round borders and padding around it. This is used to create some attention towards some content of the webpage. The .well class adds a rounded border around the element with a gray background color and some padding. But we can change the text color and padding with the help of CSS.
Basic Well: The .well class are used to create basic well.
- Example:
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Wells</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><h1align="center"style="color: green;">GeeksforGeeks</h1><h3align="center">Bootstrap Wells</h3><!-- By default wells are medium in size --><divclass="well">This is a bootstrap well</div></div></body></html>chevron_rightfilter_none - Output:
Small Well: The .well-sm after .well class is used to create a small-sized well. small wells are as follows:
- Example:
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Wells</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><h1align="center"style="color: green;">GeeksforGeeks</h1><h3align="center">Bootstrap Wells</h3><divclass="well">This is a bootstrap well(Default)</div><divclass="well well-sm">This is a bootstrap well-sm</div></div></body></html>chevron_rightfilter_none - Output:
Large Well: The .well-lg after .well class is used to create a small-sized well. Large wells are as follows:
- Example:
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Wells</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><h1align="center"style="color: green;">GeeksforGeeks</h1><h3align="center">Bootstrap Wells</h3><divclass="well">This is a bootstrap well(Default)</div><divclass="well well-lg">This is a bootstrap well-lg</div></div></body></html>chevron_rightfilter_none - Output:
