Requested
Seen
10 occasions
I need to delete the clean space beneath the container in bootstrap.
How can I do this?
.p {
coloration: white;
}
.box_switch {
place: relative;
background: #1E3E75;
padding: 15px;
margin-bottom: 30px;
margin: 0px calc(50% - 50vw) 15px;
width: 100vw;
}
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.web/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>
2
Attempt to add the next:
html, physique {
margin: 0;
}
I wasn’t capable of reproduce the issue you are describing. See the snippet under.
.p {
coloration: white;
}
.box_switch {
place: relative;
background: #1E3E75;
padding: 15px;
margin-bottom: 30px;
margin: 0px calc(50% - 50vw) 15px;
width: 100vw;
}
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.web/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="nameless">
<script src="https://cdn.jsdelivr.web/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="nameless"></script>
<script src="https://cdn.jsdelivr.web/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+this autumn/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="nameless"></script>
<hyperlink href="https://cdn.jsdelivr.web/npm/bootstrap@5.0.2/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>
Browsers apply a default stylesheet to HTML paperwork. This default comprises a margin for the <physique>
component. Add
physique {
margin: 0;
}
to your stylesheet and the white space vanishes.
lang-html