Bootstrap 4 | Wells
Last Updated :
29 Apr, 2022
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.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap Wells</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< h1 align = "center" style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 align = "center" >Bootstrap Wells</ h3 >
< div class = "well" >
This is a bootstrap well
</ div >
</ div >
</ body >
</ html >
|
Small Well: The .well-sm after .well class is used to create a small-sized well. small wells are as follows:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap Wells</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< h1 align = "center" style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 align = "center" >Bootstrap Wells</ h3 >
< div class = "well" >
This is a bootstrap well(Default)
</ div >
< div class = "well well-sm" >
This is a bootstrap well-sm
</ div >
</ div >
</ body >
</ html >
|
Large Well: The .well-lg after .well class is used to create a small-sized well. Large wells are as follows:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap Wells</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< h1 align = "center" style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 align = "center" >Bootstrap Wells</ h3 >
< div class = "well" >
This is a bootstrap well(Default)
</ div >
< div class = "well well-lg" >
This is a bootstrap well-lg
</ div >
</ div >
</ body >
</ html >
|
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...