Grid should be horizontal but is displayed as vertical

Question

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">
                                <a href="#"><img class="card-img-top" src="img/portfolio/'.$portfolio[$i][1].'" alt="" style="border:20px solid white;"></a>
                                <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>

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Sep 26 '18 at 16:09
You have a whole lot of stuff nested inside paragraph tags here (including more paragraphs). That's invalid markup. Any content should be inside Bootstrap column elements, which in turn are inside rows and containers. Nested grids must follow the same structure. Paragraphs should only contain textual content and images. — isherwood, Sep 26 '18 at 16:16

score 1 · Accepted Answer · answered Sep 26 '18 at 16:14

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">
                            <a href="#"><img class="card-img-top" src="img/portfolio/'.$portfolio[$i][1].'" alt="" style="border:20px solid white;"></a>
                            <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-->

Thank you for the detailed explanation! – Muiter Sep 26 '18 at 16:31 — Muiter, Sep 26 '18 at 16:31

score 1 · Answer 2 · answered Sep 26 '18 at 16:18

1

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');

answered Sep 26 '18 at 16:18

A.Broderick

181
5

score 0 · Answer 3 · answered Sep 26 '18 at 16:16

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">
            <a href="#"><img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;"></a>
            <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">
            <a href="#"><img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;"></a>
            <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">
            <a href="#"><img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;"></a>
            <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>

Grid should be horizontal but is displayed as vertical

3 Answers3