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:
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> <!-- By default wells are medium in size --> <div class="well"> This is a bootstrap well </div> </div></body></html> |
- Output:
Small Well: The .well-sm after .well class is used to create a small-sized well. small wells are as follows:
- Example:
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> |
- Output:
Large Well: The .well-lg after .well class is used to create a small-sized well. Large wells are as follows:
- Example:
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> |
- Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...