Bootstrap - .container-fluid inside .container-fluid-CodePudding

In bootstrap 5, when I do:

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>
  <div  style="background-color: lime;">
    <div  style="background-color: red;">
       <h1>Hello!</h1>
    </div>
  </div>
</body>
</html>

the second container is not 100% width.

I can read the following in the official docs:

.container-fluid, which is width: 100% at all breakpoints

So... why does this happen?

CodePudding user response：

after inspecting your code it appears that the .container-fluid has right and left padding:

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

this was the code, try doing the following in your css and hopefully your div will take up the 100% width like you need it to, replace it with this:

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

if adding the padding-right: 0; and padding-left: 0; doesnt fix your problem then try:

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-right: auto;
    margin-left: auto;
}