Grid should be horizontal but is displayed as vertical [duplicate] - html

Question

This question already has answers here:
bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
(3 answers)
Closed 4 years ago.
I am trying to display some items 4 in an horizontal row but they are all displayed vertical. Any suggestions how to get the layout correct?
<div class="col-lg-12 col-sm-12 portfolio-item">
<div class="card">
<div class="card-body">
<p class="card-text"><strong>Portfolio</strong></p>
<p class="card-text">
<?php require_once('includes/content_portfolio.php');
for ($i = 0; $i < $i_portfolio; $i++) { echo'
<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
<div class="card">
<img class="card-img-top" src="img/portfolio/'.$portfolio[$i][1].'" alt="" style="border:20px solid white;">
<div class="card-body">
<h5 class="card-title">
'.$portfolio[$i][0].'
</h5>
<p class="card-text" style="overflow-y: scroll; height:200px;"><small>'.$portfolio[$i][2].'</small></p>
</div>
</div>
</div>';
} ?>
</p>
</div>
</div>
</div>

Answer 1

bootstrap cols need to be nested with rows to work correctly, you can fix your code by chanhing the wrapper from p.card-text to div.row:
<p class="card-text"><strong>Portfolio</strong></p>
<div class="row"><!-- HERE-->
<?php require_once('includes/content_portfolio.php');
for ($i = 0; $i < $i_portfolio; $i++) { echo'
<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
<div class="card">
<img class="card-img-top" src="img/portfolio/'.$portfolio[$i][1].'" alt="" style="border:20px solid white;">
<div class="card-body">
<h5 class="card-title">
'.$portfolio[$i][0].'
</h5>
<p class="card-text" style="overflow-y: scroll; height:200px;"><small>'.$portfolio[$i][2].'</small></p>
</div>
</div>
</div>';
} ?>
</div><!-- /row-->

Answer 2

You cards need to be inside another <div class="row">, just tested it and seems to now work fine. You would put it below the <p class="card-text"> and above the <?php require_once('includes/content_portfolio.php');

Answer 3

You might want to consider using a flexbox.
.card-text {
display: flex;
justify-content: space-around;
}
.card {
text-align: center;
border: thin solid red; /* for visibility only */
}
.card:not(:last-child) {
margin: 0 1rem 0 0;
}
<div class="col-lg-12 col-sm-12 portfolio-item">
<div class="card">
<div class="card-body">
<p class="card-text"><strong>Portfolio</strong></p>
<div class="card-text">
<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;">
<div class="card-body">
<h5 class="card-title">
Title
</h5>
<p class="card-text" style="overflow-y: scroll; height:200px;"><small>Text</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;">
<div class="card-body">
<h5 class="card-title">
Title
</h5>
<p class="card-text" style="overflow-y: scroll; height:200px;"><small>Text</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;">
<div class="card-body">
<h5 class="card-title">
Title
</h5>
<p class="card-text" style="overflow-y: scroll; height:200px;"><small>Text</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>