Bootstrap 4 Wells

Bootstrap well是一种类似于Bootstrap面板的东西，周围有圆形边框和填充物。这是用来创造一些对网页内容的关注。.well类在元素周围添加了一个圆形的边框，背景颜色为灰色，并有一些填充物。但我们可以在CSS的帮助下改变文本颜色和填充。
基本Wells：.井类用于创建基本Wells。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Wells</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 align="center" style="color: green;">
            GeeksforGeeks
        </h1>
        <h3 align="center">Bootstrap Wells</h3>
        <!-- By default wells are medium in size -->
        <div class="well">
            This is a bootstrap well
        </div>
    </div>
</body>
</html>

输出:

Bootstrap 4 Wells

小well：.well-sm在.well类之后，用于创建一个小尺寸的well。小well的情况如下。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Wells</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 align="center" style="color: green;">
            GeeksforGeeks
        </h1>
        <h3 align="center">Bootstrap Wells</h3>
        <div class="well">
            This is a bootstrap well(Default)
        </div>
        <div class="well well-sm">
            This is a bootstrap well-sm
        </div>
    </div>
</body>
</html>

输出:

Bootstrap 4 Wells

大型well：.well-lg后的.well类用于创建一个大型well。大型well的情况如下。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Wells</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 align="center" style="color: green;">
            GeeksforGeeks
        </h1>
        <h3 align="center">Bootstrap Wells</h3>
        <div class="well">
            This is a bootstrap well(Default)
        </div>
        <div class="well well-lg">
            This is a bootstrap well-lg
        </div>
    </div>
</body>
</html>