Bootstrap 3 - SPLessons

Bootstrap Wells

Chapter 30

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Wells

Bootstrap Wells

shape 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!

shape Example

Below example explains how to place the content inside a well.

<!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>

Output:

Example of Bootstrap Well

Look, I’m in a SPLessons well!

Bootstrap Well Size

shape Description

The above example has the standard sized well. The size of well can be changed by using other class attributes.

Well-sm

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.

Well-lg

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!

shape Example

Below example demonstrates various sizes of wells.


<!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>

Output:

Look, I’m in SPLessons small well!
Look, I’m in SPLessons well!
Look, I’m in SPLessons large well!

Summary

shape 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.

shape Programming
Tips