I have some cards on my webpage currently displayed horizontally in a row. I am wanting to make these move to display vertically on a smaller screen. At the moment, they just go off the page when the screen is shrunk. I still want the cards to be equally spread apart (currently using .justify-content-between). The code for the cards are
<!-- Cards -->
<div class="d-flex justify-content-around mb-3">
<div class="p-2">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i3-10105F.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i3-10105F <span class="badge bg-success">New</span></h4>
<h5 class="card-title">$130</h5>
<p class="card-text">
4 Cores 8 Threads <br>
Core Clock: 3.70 GHz <br>
Boost Clock: 4.40 GHz <br>
LGA1200 Socket
</p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/203474/intel-core-i310105f-processor-6m-cache-up-to-4-40-ghz/specifications.html?wapkw=i3-10105F" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i3-10105f-3.7ghz-quad-core-cpu-bx8070110105f" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="p-2">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i5-11600KF.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i5-11600KF <span class="badge bg-success">New</span></h4>
<h5 class="card-title">$389</h5>
<p class="card-text">
6 Cores 12 Threads <br>
Core Clock: 3.90 GHz <br>
Boost Clock: 4.90 GHz <br>
LGA1200 Socket
</p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/212276/intel-core-i511600kf-processor-12m-cache-up-to-4-90-ghz/specifications.html" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i5-11600kf-3.9ghz-six-core-cpu-(no-cooler)-bx8070811600kf" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="p-2">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i9-11900K.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i9-11600K <span class="badge bg-secondary">Recommended</span></h4>
<h5 class="card-title">$749</h5>
<p class="card-text">
8 Cores 16 Threads <br>
Core Clock: 3.50 GHz <br>
Boost Clock: 5.30 GHz <br>
LGA1200 Socket
</p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/212325/intel-core-i911900k-processor-16m-cache-up-to-5-30-ghz/specifications.html?wapkw=i9-11900k" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i9-11900k-3.50ghz-8-core-cpu-(no-cooler)-bx8070811900k" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
Any help is greatly appreciated.
Use the grid classes (row > col) for responsive behavior. For example...
<div class="container-fluid">
<div class="row justify-content-around mb-3">
<div class="col-lg-4">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i3-10105F.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i3-10105F <span class="badge bg-success">New</span></h4>
<h5 class="card-title">$130</h5>
<p class="card-text"> 4 Cores 8 Threads <br> Core Clock: 3.70 GHz <br> Boost Clock: 4.40 GHz <br> LGA1200 Socket </p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/203474/intel-core-i310105f-processor-6m-cache-up-to-4-40-ghz/specifications.html?wapkw=i3-10105F" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i3-10105f-3.7ghz-quad-core-cpu-bx8070110105f" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i5-11600KF.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i5-11600KF <span class="badge bg-success">New</span></h4>
<h5 class="card-title">$389</h5>
<p class="card-text"> 6 Cores 12 Threads <br> Core Clock: 3.90 GHz <br> Boost Clock: 4.90 GHz <br> LGA1200 Socket </p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/212276/intel-core-i511600kf-processor-12m-cache-up-to-4-90-ghz/specifications.html" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i5-11600kf-3.9ghz-six-core-cpu-(no-cooler)-bx8070811600kf" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width:400px">
<img class="card-img-top" src="Images/i9-11900K.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Intel i9-11600K <span class="badge bg-secondary">Recommended</span></h4>
<h5 class="card-title">$749</h5>
<p class="card-text"> 8 Cores 16 Threads <br> Core Clock: 3.50 GHz <br> Boost Clock: 5.30 GHz <br> LGA1200 Socket </p>
<a href="https://www.intel.com.au/content/www/au/en/products/sku/212325/intel-core-i911900k-processor-16m-cache-up-to-5-30-ghz/specifications.html?wapkw=i9-11900k" target="_blank" class="btn btn-primary">More Information</a>
<a href="https://www.computeralliance.com.au/intel-s1200-core-i9-11900k-3.50ghz-8-core-cpu-(no-cooler)-bx8070811900k" target="_blank" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
</div>
Demo: https://codeply.com/p/RX3tviIzOB
Note: Fixed width cards don't work well for responsiveness.