Bootstrap Wells

A well is a container which causes simple effect on an element to give an inset effect on the page. To create a well, Bootstrap provides class called .well which can be used with div element.

also read:

The below examples shows the various techniques used for implementing the wells in Bootstrap. If you have any questions about bootstrap wells, please write it in the comments section.

Bootstrap Default Well

The following example shows creation of default well by using the class .well within the div element.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Default Well</h2>
<div class="well">
   It's in Well!!!
</div>
</body>
</html>

Bootstrap Default Well Example

Bootstrap Well Sizing

We can make wells with different sizes like larger size well and smaller size well by using .well-lg and .well-sm classes in conjunction with .well class. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Sizing Well</h2>
   <div class="well well-lg">
      This is in Larger Well!!!
   </div>
   <div class="well well-sm">
      This is in Smaller Well!!!
   </div>
</body>
</html>

Bootstrap Sizing Well Example

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pin It on Pinterest

Share This

Share this post with your friends!

Share This

Share this post with your friends!