how to divide bootstrap card class to same size 3 horizontal boxes and 2 vertical boxes for image gallery

Umm... simply use grids?

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>

    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

You may run into image height problem. You can resolve it by the followings

• One option is to have appropriate size of images so that you do not have to manage the image size in HTML and CSS
• Set height manually through css
• You can do something like this to have your images more responsive as well.

<div class="row gallery">
    <div class="img col-md-4" style="heigh:300px; background-image: url(...)"></div>
    <div class="img col-md-4" style="heigh:300px; background-image: url(...)"></div>
    <div class="img col-md-4" style="heigh:300px; background-image: url(...)"></div>

    <div class="img col-md-6" style="heigh:600px; background-image: url(...)"></div>
    <div class="img col-md-6" style="heigh:600px; background-image: url(...)"></div>
</div>

.gallery img{
    width: 100%;
    backgrouund-size: cover;
    background-position: center;
}