Bootstrap Wells

A well in bootstrap adds a rounded border to an element. The background is changed to grey color and padding is added to the element. A well can be created by adding the class .well in the <div> tag.

Consider the following example in which a well is created:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/ bootstrap /js/bootstrap.min.js”></script>

</head>

<body>

<div class = “well”>Well in Bootstrap</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Bootstrap Wells

Sizing:

The size of the wells can be changed by using the class .well-lg or well-sm.

Consider the following example:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

</ head >

< body >

< div class = “well well- sm” > Well in Bootstrap </ div >

< div class = “well well- lg ” > Well in Bootstrap </ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

well in bootstrap