Description
The idea behind Bootstrap Wells is to simply create a bordered section in design that looks a bit sunken. This is an alternative to panel that is little simpler and often can be visually instructive to the user to highlight some information.
If <div class="well"> is added, then it will give a default gray color background and some padding to the html element and then the content is set inside it.
Look, I'm in a SPLessons well!
Example
Below example explains how to place the content inside a well.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Example of Bootstrap Well</h3>
<div class="well">Look, I'm in a SPLessons well!</div>
</div>
</body>
</html>
[/html]
Output:
Example of Bootstrap Well
Look, I'm in a SPLessons well!
Description
The above example has the standard sized well. The size of well can be changed by using other class attributes.
Well-sm gives a more compact well. Notice the size of the well and the size of the content is the same, just the padding between the edge of the well and the content is more abbreviated.
Also, there is also a large that gives a lot of content and is used for large wells.
Look, I'm in SPLessons small well!
Look, I'm in SPLessons normal well!
Look, I'm in SPLessons large well!
Example
Below example demonstrates various sizes of wells.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<div class="well well-sm">Look, I'm in SPLessons small well!</div>
<div class="well">Look, I'm in SPLessons well!</div>
<div class="well well-lg">Look, I'm in SPLessons large well!</div>
</div>
</body>
</html>
[/html]
Output:
Look, I'm in SPLessons small well!
Look, I'm in SPLessons well!
Look, I'm in SPLessons large well!
Key Points
- Well applies a simple inset effect to an element very quickly.
- The sizes of well can be changed using well-sm and well-lg attributes. By default, well will be represented in medium size.
Programming
Tips
While placing the floated content inside a Bootstrap Wells, make sure to add the class .clearfix to the .well element to prevent parent collapsing.