Bootstrap Tutorial - Bootstrap Wells

Default well

Use the well as a simple effect on an element to give it an inset effect.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--   ww  w.  j a  va  2s.  co  m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

<div class="well">
   Look, I'm in a well!
</div>
</body> 
</html>

Click to view the demo

Optional classes

Control padding and rounded corners with two optional modifier classes.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w  w  w  .  ja v a2s .  com-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

<div class="well well-lg">
   Look, I'm in a well!
</div>
</body> 
</html>

Click to view the demo

Small wells

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--   ww w  .ja  v  a  2s .  com-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

<div class="well well-sm">
  Look, I'm in a well!
</div>
</body> 
</html>

Click to view the demo