Containers

Containers are used to pad the content inside of them. Their are two classes available in Bootstrap

  • The .container class provides a responsive fixed width container.
  • The .container-fluid class provides a full width container.

Well

  1. Adds a
    • rounded border
    • gray background color
    • some padding
  2. Change the size of the well by adding some following class name .
    • well-sm
    • well-lg

Jumbotron

Indicates a big box for calling extra attention to some special content. Adds a

  • Displayed as a grey box
  • Rounded corners.
  • It also enlarges the font sizes of the text inside it.

Source Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutor Joes</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
</head>

<body>
    <div class="container well">
        <h1>Tutor Joes Computer Education ( Well )</h1>
    </div>
	<div class="container well well-sm">
        <h1>Tutor Joes Computer Education ( well-sm )</h1>
    </div>
	<div class="container well well-lg">
        <h1>Tutor Joes Computer Education ( well-lg )</h1>
    </div>
	<div class="container-fluid well">
        <h1>Tutor Joes Computer Education</h1>
    </div>
	<div class="container jumbotron">
        <h1>Tutor Joes Computer Education</h1>
    </div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--<script src="js/jquery.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
</body>

</html>
To download raw file Click Here

Bootstrap Tutorial

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions