Bootstrap 4 | Wells - GeeksforGeeks

16 Jul, 2021
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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 Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
Bootstrap-4
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?