CODEWITHSUNDEEP
cssbootstrap-4
Leff
Leff

Reputation: 1276

Bootstrap 4 - columns are stacked instead of next to each other horizontally

I am having an accordion element on my site, and the div that I am showing on clicking the button, has 2 columns, each was given md-5 width in a row, but the problem I have is that when I open the div, the columns are stacked, instead of next to each other horizontally on wider screens, why is that?

         <div class="row collapse" id="infoData">
            <div class="col-md-5">
              <p><img src="/icons/shirt.svg" class="icon">{{ $player->club }}</p>
              <p><img src="/icons/football-field.svg" class="icon">{{ $player->position }}</p>
              <p><img src="/icons/contract.svg" class="icon">Pro sports agency</p>
            </div>
            <div class="col-md-5">
              <p><img src="/icons/scale.svg" class="icon">100m: 11.1s</p>
              <p><img src="/icons/scale.svg" class="icon">Vertical jump: 65cm</p>
              <p><img src="/icons/football-field.svg" class="icon">Left foot</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-10">
              <a data-toggle="collapse" href="#infoData" aria-expanded="false" aria-controls="infoData">
                See more
              </a>
            </div>
          </div>

Here is the fiddle.

Upvotes: 0

Views: 881

Answers (1)

MasNotsram
MasNotsram

Reputation: 2273

This is occurring because of the way 'collapse' works.

Bootstrap 4 uses CSS3's display:flex on the DIVs of class row

This conflicts with the fact that the 'collapse' code provided doesn't return the DIV to it's original display property, but instead sets it to display:block, thus stopping Bootstrap 4 from working properly.

If you nest the row inside your collapse div instead, it will work as desired (fiddle here).

Just a note on using JSFiddle for this, remember that col-md-* classes will appear as full width below size 'md' screens, and so the small render box on JSFiddle can be misleading unless you expand it.

<div class="collapse" id="infoData">
  <div class="row">
    <div class="col-md-5">
      <p><img src="/icons/shirt.svg" class="icon">{{ $player->club }}</p>
      <p><img src="/icons/football-field.svg" class="icon">{{ $player->position }}</p>
      <p><img src="/icons/contract.svg" class="icon">Pro sports agency</p>
    </div>
    <div class="col-md-5">
      <p><img src="/icons/scale.svg" class="icon">100m: 11.1s</p>
      <p><img src="/icons/scale.svg" class="icon">Vertical jump: 65cm</p>
      <p><img src="/icons/football-field.svg" class="icon">Left foot</p>
    </div>
  </div>

</div>
<div class="row">
  <div class="col-md-10">
    <a data-toggle="collapse" href="#infoData" aria-expanded="false" aria-controls="infoData">
                    See more
                  </a>
  </div>
</div>

Upvotes: 3

Related Questions