html - How to close gap between jumbotron and about section in bootstrap

Question

[How to close the gap between jumbotron and about section ][1] how to close that white gap? i've tried to minimize the margin between jumbotron and the about section but thats not working properly

  <section id="atas">
      <div class="jumbotron jumbotron-fluid bg-dark">
        <div class="container text-center ">
            <img src="https://img.pngio.com/-profile-png-700_720.png" width="18%" class=" rounded-circle 
   img-thumbnail">
          <h1 class="display-4 text-warning">Rakha Arka</h1>
          <p class="lead text-warning">Kenyamanan anda?.. Ohh Saya tidak perduli ! </p>
        </div>
      </div>
    </section>

    <section id="about" class="about bg-warning">
      <div class="container  pt-5 ">
        <div class="row mt-0">
          <div class="col text-center mb-4  ">
            <h1> About </h1> 
          </div>
        </div>

        <div class="row justify-content-center pb-5">
          <div class="col-md-5 text-center">
            <p>Saya adalah seorang vcerdikiawan yang sangat mementingkan semua berjalan dengan seharusnya dan sesuai dengan rencana saya dan apabila suatu rancana tidak berjalan sesuai arahan saya maka saya akan...</p>
          </div>
          <div class="col-md-5 text-center">
            <p>Halo temanteman nama saya adalah Rakha Arkananta saya adlah seorang freelancer yang sangat handal dalam melakukan setiap tugas yang diberikan client dan saya kan selalu bertanggung jawab akan segala tugas yang client saya berikan</p>
          </div>
        </div>
      </div>
    </section>

question from:https://stackoverflow.com/questions/65847137/how-to-close-gap-between-jumbotron-and-about-section-in-bootstrap

Answer 1

By default in bootstrap 4.x, jumbotron component has margin-bottom: 2rem

Solution

Add mb-0 to jumbotron class

<section id="atas">
      <div class="jumbotron jumbotron-fluid bg-dark mb-0">
        <div class="container text-center ">
            <img src="https://img.pngio.com/-profile-png-700_720.png" width="18%" class=" rounded-circle 
   img-thumbnail">
          <h1 class="display-4 text-warning">Rakha Arka</h1>
          <p class="lead text-warning">Kenyamanan anda?.. Ohh Saya tidak perduli ! </p>
        </div>
      </div>
    </section>

    <section id="about" class="about bg-warning">
      <div class="container  pt-5 ">
        <div class="row mt-0">
          <div class="col text-center mb-4  ">
            <h1> About </h1> 
          </div>
        </div>

        <div class="row justify-content-center pb-5">
          <div class="col-md-5 text-center">
            <p>Saya adalah seorang vcerdikiawan yang sangat mementingkan semua berjalan dengan seharusnya dan sesuai dengan rencana saya dan apabila suatu rancana tidak berjalan sesuai arahan saya maka saya akan...</p>
          </div>
          <div class="col-md-5 text-center">
            <p>Halo temanteman nama saya adalah Rakha Arkananta saya adlah seorang freelancer yang sangat handal dalam melakukan setiap tugas yang diberikan client dan saya kan selalu bertanggung jawab akan segala tugas yang client saya berikan</p>
          </div>
        </div>
      </div>
    </section>