在具有行 class 的分区内的列上放置边框

Question

This is what my code looks like:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container" style="padding-top: 50px;"> <div class="row"> <div class="border col-md-5 px-5 py-5"> Hi </div> <div class="border col-md-5 "> Hi </div> </div> </div>

I want to put a border that covers the only the columns with col-md-5 class. I tried doing it by putting border (bootstrap) in div with row and container class. The border when I put border in class in row was near acceptable but the problem in that was it was covering extra space after the two columns. Please help me out.

Answer 1

Bootstrap borders are "substractive" as well so you can remove left/right side of the border on the columns...

<div class="container" style="padding-top: 50px;">
    <div class="row">
        <div class="border border-right-0 col-md-5 px-5 py-5"> Hi </div>
        <div class="border border-left-0 col-md-5 "> Hi </div>
    </div>
</div>

https://codeply.com/p/FC3sJALVVH