Open In App

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

Last Updated : 21 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

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=
          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=
          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>


Output:

z125



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads