Delete the blank area under the container in bootstrap

Question

I want to delete the blank area under the container in bootstrap. How can I do that?

.p {
  color: white;
}

.box_switch {
  position: relative;
  background: #1E3E75;
  padding: 15px;
  margin-bottom: 30px;
  margin: 0px calc(50% - 50vw) 15px;
  width: 100vw;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" />
<div class="container">
  <div class="row mx-auto text-center">
    <div class="col-12">
      <div class="box_switch">
        <p class="p">PPPPPPPPPPP</p>
      </div>
    </div>
  </div>
</div>

I made you a snippet. Please make it a [mcve] and show what expected output should be. Right now your "I do not need this white area" is in the blue area — mplungjan, Sep 27 '22 at 14:01
Also look here: https://getbootstrap.com/docs/4.0/content/reboot/ — mplungjan, Sep 28 '22 at 05:23

score 0 · Answer 1 · answered Sep 27 '22 at 14:04

0

Browsers apply a default stylesheet to HTML documents. This default contains a margin for the <body> element. Add

body {
  margin: 0;
}

to your stylesheet and the white area vanishes.

answered Sep 27 '22 at 14:04

Boldewyn

81,211
44
156
212

Delete the blank area under the container in bootstrap

1 Answers1