bootstrap remove space between divs in a row

I want to create a shape like this

And here's my code:

<section style="background-color: red;">      <div>         <div class="row justify-content-center px-4 d-flex flex-column">             <div class="col-lg-4 text-center py-5 rounded" style="background: white">                 <p>Let's work together!</p>                 <a href="#" target="_blank" class="btn btn-primary mt-4" style="color: #3E7DC0; border-radius: 8px;">                <span style="font-weight: 900;"><mdicon name="whatsapp"/> Contact us now!</a><br>             </div>             <div class="down-triangle align-self-center p-0"></div>         </div>         <div class="col-lg-4">            <img src="image.png">         </div>     </div>  </section>  

and here's my CSS for the small triangle

.down-triangle {      width: 0;       height: 0;       border-top: 40px solid transparent;      border-bottom: 40px solid transparent;      border-right:40px solid white;       border-radius: 4px;      transform: rotate(270deg);  }  

With that code, here's a picture of what I got

My question is, how do I remove the spacing between those two divs? I've tried margin bottom and padding bottom but it doesn't work. Thank you so much.

https://stackoverflow.com/questions/66094426/bootstrap-remove-space-between-divs-in-a-row February 08, 2021 at 08:09AM