Bootstrap Tutorial - Bootstrap Wells








Wells wrap the content within a rounded cornered box with a gray background.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--from   w w  w  .j  a  v  a  2 s  .  c o m-->
  <body style='margin:30px'>
    <div class="well">
       <p>Lorem ipsum  dolor  sit amet,  consectetur ... </p>
    </div>

  </body>
</html>

Click to view the demo





Note

Bootstrap Wells comes in three variants:

  • Default: use only the well class.
  • Large spacing: use the well and well-lg classes together.
  • Small spacing: use the well and well-sm classes together.
<!-- w w w . java  2 s .  co m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
    <div class="well">Look, I'm in a well!</div>
    <div class="well well-lg">Look, I'm in a large well!</div>
    <div class="well well-sm">Look, I'm in a small well!</div>
</div>
</body>
</html>

Click to view the demo