Bootstrap 4 Layout
Containers
Containers are the essential elements of the bootstrap layout. It is required when we are using a bootstrap grid system. Containers can also be nested, but most layouts do not need nested containers.
Bootstrap has two classes of containers
- .container
- .container-fluid
.container class – This class is used to create a responsive and fixed-width container. There is a fixed margin in the left and right of this class, and it does not completely cover its parent, screen, or Viewport.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Container Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body> <div class="container" style="background-color: #c7c7c7"> <h1>Hello World</h1> <p>This is the example of .container class</p> <p>This part is inside a .container class.</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script> </body> </html>
Output
.container-fluid class – Container-fluid class covers the full width of the screen.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Container-fluid Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body> <div class="container-fluid" style="background-color: #c7c7c7"> <h1>Hello World</h1> <p>This is the example of .container-fluid class.</p> <p>This part is inside a .container-fluid class.</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script> </body> </html>
Output
Responsive Containers
The responsive containers automatically adjust themselves (in terms of height and width) according to their parent element. The max-width of the container varies at different scream size.
| Extra small <576px | Small >=576px | Medium >=768px | Large >=992px | Extra-large >=1200px | |
| .container | 100% | 540px | 720px | 960px | 1140px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px |
| .container-md | 100% | 100% | 720px | 960px | 1140px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% |