Question 182717 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap leaves margin on the right

I wrote code in Bootstrap. I’ve added the class "m-0" but it still leaves margin on the right for this element.

This is the code:

<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.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <section>
        <div class="container h-100 w-100 bg-light m-0">
            <div class="row justify-content-center align-items-center h-100">
                <div class="col-lg-6 text-lg-start text-md-center">
                    <h1 class="display-1">
                        text
                    </h1>
                    <h3 class="display-5 text-muted">
                        description
                    </h3>
                </div>
                <!-- lub md--><div class="col-lg-6 text-center">
                    <iframe src="" width="450" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

I checked system (MacOs, Windows), browser (Chrome, Safari). Tried deleting the section tag. I tried setting width of the element to 110vw. I tried class "mx-0" Any of these steps didn’t help.
The max-width:100% works but I don’t want to force the solution and find the reason of it not working

Tags:

2

Answers


  1. 0

    Bootstrap’s container HTML class has the max-width CSS property set by default.

    To override it, add the following CSS:

    .container {
  max-width: unset !important;
}

    See the snippet below.

    .container {
  max-width: unset !important;
}
    <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.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <section>
    <div class="container h-100 w-100 bg-light m-0">
      <div class="row justify-content-center align-items-center h-100">
        <div class="col-lg-6 text-lg-start text-md-center">
          <h1 class="display-1">
            text
          </h1>
          <h3 class="display-5 text-muted">
            description
          </h3>
        </div>
        <!-- lub md-->
        <div class="col-lg-6 text-center">
          <iframe src="" width="450" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
      </div>
    </div>
  </section>
</body>

</html>
    Login or Signup to reply.
  2. 0

    little modification

    <!DOCTYPE html>
<html>
<body>
<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.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Document</title>
    <style>
.container{
     max-width:100% !important;
    text-align:left;
    width:100% !important;;
margin-left:0px;
    }
    
    </style>
    
</head>
<body>
    <section>
        <div class="container h-100 w-100 bg-light " style="text-align:left;margin-left:0px;>
            <div class="row justify-content-center align-items-center h-100">
                <div class="col-lg-6 text-lg-start text-md-center" style="float:left;">
                    <h1 class="display-1">
                        text
                    </h1>
                    <h3 class="display-5 text-muted">
                        description
                    </h3>
                </div>
                <!-- lub md--><div class="col-lg-6 text-center">
                    <iframe src="" width="450" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search