English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Wells

Well is a container <div> that can create an indentation display effect or illustration effect for content. To create a Well, simply place the content within a class .well in the <div>. The following example demonstrates a default Well:

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Default Well</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="well">Hello, I am in the Well! </div>
</body>
</html>
Test and see ‹/›

The results are as follows:

size

You can use optional classes well-lg or well-sm to change the size of the Well. These two classes are associated with .well These two classes affect the inner padding (padding), and the Well will appear larger or smaller depending on the class used.

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Well's size</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="well well-lg">Hello, I am in a large Well!"/div>
<div class="well well-sm">Hello, I am in a small Well!"/div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Bootstrap Create a WebpageBootstrap Panels