Bootstrap Containers


Go to main Page

Containers in bootstrap

Containers are used to wrap the content.

In bootsrap there are two types of container.


Fixed Container

The .container have fix width and it is responsive.


Example

<div class="container">
  <h1>First Bootstrap webpage</h1>
</div>



Full Container

The .container-fluid have max width and it is responsive.

Example

<div class="container-fluid">
  <h1>First Bootstrap webpage</h1>
</div>




Container padding and margin

For padding we use p-3 and p-5.

For padding top we use pt-3 and pt-5.

For padding bottom we use pb-3 and pb-5.

For padding left we use pl-3 and pl-5.

For padding right we use pr-3 and pr-5.


Container Margin

For margin we use m-3 and m-5.

For margin top we use mt-3 and mt-5.

For margin bottom we use mb-3 and mb-5.

For margin left we use ml-3 and ml-5.

For margin right we use mr-3 and mr-5.



<div class="container m-5">
 
</div>


Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container m-5">
    <h1>Heading</h1>
  </div>
  
</body>
</html>