Bootstrap 4 Containers Tutorial With Example

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.

Bootstrap 4 Fixed Width Container Example

#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.

Bootstrap 4 Fluid Container Example

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.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.