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>
<
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
>
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>
<
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
>
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>
<
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
>
chevron_rightfilter_none - Output: