Different styles of wells in Bootstrap

How to create well and different styles of wells using Bootstrap?

Well:

A well is a container in <div> that causes the content to appear color or an inset effect on the page.

<body>
    <div class="well">This is well used in bootsrap</div>
</body>

In the above code snippet we have defined well,

<div class=well>- renders well

output

Well sizes

It contains different sizes they are

large
small
normal

<div class="container">
        <div class="well well-sm">This is well used in bootsrap</div>
        <div class="well">This is well used in bootsrap</div>
        <div class="well well-lg">This is well used in bootsrap</div>
    </div>

Well sizes

In the above code snippetwe are using the sizes of the well. We are having the sizes of the well as

<well-sm>-renders small size well
<well-lg>-renders large size well

output

Well color

We can change the color of the well using css

<style>
        .well {
            background-color: rgb(22, 105, 173);
        }
    </style>
</head>
<body>
    <h2>Basic well</h2>
        <div class="well">This is well used in bootsrap</div>
    </body>

Well with color

In the above code snippet we have change the color of the well using style sheet

output

Well height and width

We can set the height and width of the well using stylesheet

 <style>
         .well {
             height: 150px;
             width: 50%;
             color: black;
             background-color: green;
         }
    </style>
</head>
<body>
    <h2>Well height and width</h2>
    <div class="well">
        <div>
            <p>Really long text...</p>
        </div>
    </div>
    </body>

Well height and width

In the above code snippet we have defined the wel height and width by using style sheet , we have given the well height as 150px and width as 80 % of the screen

output