How to set container width to 100% in Bootstrap 5?

Question

Layout

Visually, the width looks like it's set to 95%. The container itself is wrapped as container-fluid
This is what it looks like in my browser

<div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="jumbotron">
                    <h1>hello</h1>
                </div>
                
            </div>
        </div>
    </div>

Answer 1

The easiest way is to just override the bootstrap properties with your own properties, but the padding data is done as an airbag for your layout, because when the screen width decreases, it may happen that the text, etc. will go off screen.

Answer 2

You need to understand how the bootstrap grid works.
If you need to set the background for the header, you can use a wrapper

<div class="header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="jumbotron">
          <h1>hello</h1>
        </div>
      </div>
    </div>
  </div>
</div>

.header {
  background: gray;
}

or set the background for the .row element

<div class="container-fluid">
  <div class="row header">
    <div class="col-md-12">
      <div class="jumbotron">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</div>