How to move a container inside of another container in Bootstrap 5 ?

Last Updated : 21 Nov, 2023

The container is used to set the content’s margin. It contains row elements and the row elements are containers of columns. This is known as the grid system. In this article, we will learn about How to move a container inside of another container in Bootstrap 5. We will move a container to the left in another container.

Syntax

ms-0
me-0

Table of Content

Using ms-0 class
Using me-0 class

Using ms-0 class

Add a container inside another container on the left using class ms-0.
This class is used to set the left-margin to zero.
Hence, it will set the left margin of the inner container to 0.
That is how we can add a container inside another on the left.

Example: This example illustrates the placing of one container inside of another container in Bootstrap 5.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div> 
        <div class="container mt-1"> 
            <h2 class="text-success"> 
                GeeksforGeeks 
            </h2> 
            <h2> 
                  How to move a container inside of 
                another container in Bootstrap 5? 
            </h2> 
        </div> 
        <div class="container bg-success"> 
            <div class="container ms-0 bg-warning w-50"> 
                <input type="checkbox"> Java 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

z124

Using me-0 class

Add a container inside another container on the right using me-0.
This class is used to set right-margin to zero.
Hence, it will set the right margin of the inner container to 0.
That is how we can add a container inside another on the right.

Example: This is another example that illustrates the placing of one container inside of another container in Bootstrap 5.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div> 
        <div class="container mt-1"> 
            <h2 class="text-success"> 
                  GeeksforGeeks 
              </h2> 
            <h2> 
                  How to move a container inside 
                of another container in Bootstrap 5? 
            </h2> 
        </div> 
        <div class="container bg-success"> 
            <div class="container me-0 bg-warning w-50"> 
                <input type="checkbox"> Java 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>