In this example, you will learn how to create bootstrap 4 containers tutorial. Bootstrap tutorial provides basic and advanced concepts of Bootstrap. Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive and mobile-friendly website. There are several advantages of using bootstrap. Bootstrap is a strong front-end framework for faster and easier web development.
Bootstrap 4 Containers Tutorial With Example
Containers provide the foundation for page layout. Containers are the most basic layout element in Bootstrap and are wanted when using our default grid system.
#1: Introduction
In Bootstrap, a container is used to set the content’s margins dealing with the responsive behaviors of your layout. Bootstrap needs a containing element to wrap elements and contain its grid system
The container class is used to build boxed content.
Bootstrap containers can be either fixed or fluid.
#2: Fixed Container
A fixed Container is a fixed-width container. Meaning its max-widthchanges at each breakpoint. You resize your browser, its width remains unchanged until it passes a certain breakpoint. Next, we will see an example.
#3: Fixed Container Example
Now, we will see a fixed container example so add following code in your file.
<!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">
<title>Bootstrap 4 Fixed Width Container Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.container {
background: red;
text-align: center;
padding-top: 140px;
padding-bottom: 140px;
}
</style>
</head>
<body>
<div class="container">
Bootstrap 4 Fixed Width Container Example
</div>
</body>
</html>
Save and Run. You can see below output in your screen.
#4: Fluid Container
In Bootstrap 4 you can use the class .container-fluid to create the fluid layouts in order to spans the full width of the viewport. It will increase and contract fluidly as you resize the browser.
#5: Fluid Container Example
The following code creates a fluid layout that covers 100% width of the screen.
<!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">
<title>Bootstrap 4 Fluid Container Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.container-fluid {
background: red;
text-align: center;
padding-top: 140px;
padding-bottom: 140px;
}
</style>
</head>
<body>
<div class="container-fluid">
Bootstrap 4 Fluid Container Example
</div>
</body>
</html>
Save and Run. You can see below screenshot in your screen.
While you can create Bootstrap pages without containers, they are required when using the Bootstrap grid system.
At last, our Bootstrap 4 Containers Tutorial With Example is over.
Krunal Lathiya is an Information Technology Engineer by education and web developer by profession. He has worked with many back-end platforms, including Node.js, PHP, and Python. In addition, Krunal has excellent knowledge of cloud technologies including Google Cloud, Firebase, AWS, and Azure, and various softwares and tools.