Bootstrap tab content set cards side by side

Question

I'm trying to get the content cards side by side in 3's, every 3 card inline comes a new row with another 3, I tried setting flex-wrap: nowwrap;

It worked but the cards kept going on nonstop didn't break into rows on every 3 or 4 cards, I tried adding display:inline-block and other display settings but non worked for some reason.

Heres the HTML and CSS code I'm using thanks!

CSS

#cover {
  height: 100%;
  text-align: center;
  margin: 0 auto;
}

#cover-caption {
  width: 100%;
  position: relative;
  z-index: 1;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}

HTML

<section id="cover" class="min-vh-100">
    <div id="cover-caption">
        <div class="container">

            <div id="content" class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">

                <div class="px-2">

                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="recent-tab" data-toggle="tab" href="#recent" role="tab"
                                aria-controls="recent" aria-selected="true">Recent</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" id="search-tab" data-toggle="tab" href="#search" role="tab"
                                aria-controls="search" aria-selected="false">Search</a>
                        </li>
                    </ul>

                    <div class="tab-content" id="myTabContent">
                        <div style="border: none;" class="tab-pane fade show active" id="recent" role="tabpanel"
                            aria-labelledby="recent-tab">

                            <div class="container-fluid mt-4">

                                <div class="row justify-content-center">

                                    <div class="col-auto mb-3 d-flex flex-row">
                                        <div class="card text-center" style="width: 20rem;">
                                            <img class="card-img-top"
                                                src="https://cdn.pixabay.com/photo/2020/02/08/19/15/winter-4831013_1280.jpg"
                                                alt="Card image cap">
                                            <div class="card-body">
                                                <h5 class="card-title">Wow</h5>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-auto mb-3 d-flex flex-row">
                                        <div class="card text-center" style="width: 20rem;">
                                            <img class="card-img-top"
                                                src="https://media.istockphoto.com/photos/colorful-sunset-picture-id1181315370"
                                                alt="Card image cap">
                                            <div class="card-body">
                                                <h5 class="card-title">Colorful Sunset</h5>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-auto mb-3 d-flex flex-row">
                                        <div class="card text-center" style="width: 20rem;">
                                            <img class="card-img-top"
                                                src="https://media.istockphoto.com/photos/snowcapped-winter-landscape-picture-id1181522290"
                                                alt="Card image cap">
                                            <div class="card-body">
                                                <h5 class="card-title">Snowcapped Winter</h5>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div style="border: none;" class="tab-pane fade" id="search" role="tabpanel"
                            aria-labelledby="search-tab">

                            to do search stuff

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

This is it:

css:

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

html:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      
    <div class="card ">
  <img class="card-img-top" src="https://media.istockphoto.com/photos/snowcapped-winter-landscape-picture-id1181522290" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
    <div class="col-sm-4">
      <div class="card" >
  <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/02/08/19/15/winter-4831013_1280.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>s
    </div>
    <div class="col-sm-4">
      <div class="card">
  <img class="card-img-top" src="https://media.istockphoto.com/photos/colorful-sunset-picture-id1181315370" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
  </div>
</div>

check: https://jsfiddle.net/4fsw6ed0/7/

Answer 2

You just messed up with bootstrap grid layout and column breakpoint. Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use.col-4. Please check the below code

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <style> </style> </head> <body> <section id="cover" class="min-vh-100"> <div id="cover-caption"> <div class="container"> <div id="content" class=" mx-auto text-center form p-4"> <div class="px-2"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="recent-tab" data-toggle="tab" href="#recent" role="tab" aria-controls="recent" aria-selected="true">Recent</a> </li> <li class="nav-item"> <a class="nav-link" id="search-tab" data-toggle="tab" href="#search" role="tab" aria-controls="search" aria-selected="false">Search</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div style="border; none:" class="tab-pane fade show active" id="recent" role="tabpanel" aria-labelledby="recent-tab"> <div class="container-fluid mt-4"> <div class="row justify-content-center d-flex"> <div class="col-md-4 mb-3 "> <div class="card text-center" style="width; 20rem:"> <img class="card-img-top" src="https.//cdn.pixabay.com/photo/2020/02/08/19/15/winter-4831013_1280:jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Wow</h5> </div> </div> </div> <div class="col-md-4 mb-3"> <div class="card text-center" style="width; 20rem:"> <img class="card-img-top" src="https.//media.istockphoto:com/photos/colorful-sunset-picture-id1181315370" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Colorful Sunset</h5> </div> </div> </div> <div class="col-md-4 mb-3"> <div class="card text-center" style="width; 20rem:"> <img class="card-img-top" src="https.//media.istockphoto:com/photos/snowcapped-winter-landscape-picture-id1181522290" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Snowcapped Winter</h5> </div> </div> </div> </div> </div> </div> <div style="border; none;" class="tab-pane fade" id="search" role="tabpanel" aria-labelledby="search-tab"> to do search stuff </div> </div> </div> </div> </div> </div> </section> </body> </html>