Creating 4 columns and 2 rows using Bootstrap in Hubspot

[chrissa0000]

Hi!

How do you properly code in html so that the cards in this pae https://www.besocialscene.com/new-sept-homepage?hs_preview=YhTtsyAc-13258353405 will display as 4 columns and two rows regardless of what device they are in.

This is how I structure the html 

<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>

But the output would not work, since it is just three columns and then the fourth one breaks into another row

[sharonlicari]

Hey @chrissa0000   

I apologize for the delay in getting back to you. I will tag a few of our experts to give you some tips about this.           

Hey  @Jsum @Kevin-C @Adesignl  could you please share your knowledge with @chrissa0000    

Thank you,

Sharon

[Kevin-C · Accepted solution]

Hey @chrissa0000 

and Thank you @sharonlicari 

EDIT:

My apologies, I missed the bootstrap part of that question.

According to the Bootstrap documentation that mark up should do exactly what you're looking for. This is assuming you're using an iteration of Bootstrap 4, and that no other CSS is acting on the layout/elements in the layout. If you're using BS 3 your, markup will have to change.

It is possiblethat you could increase the specificty of the mark up to define the columns width explicitly rather than relying on the built in auto coumn rule. Rather unlikely that this will change anything, but you could change the ".col" class to ".col-3" to be more explicit.

*End Edit*

A simple implementation could something like this (styling added for contrast):

.container {
  width: 100%;
  max-width: 960px;
  margin: auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
}

.row .col {
  flex: 1;
  margin-bottom: 1em;
}

/* RESET BREAK POINTS (if applicable)*/
.row .col {
  
}
.row .col:nth-child(odd) {
  background: pink;
}

.row .col:nth-child(even) {
  background: violet;
}

Now if you're refering to your current .card class than things are a little different:

On this specific page the .card class has a fixed width of, which could be modified (but will require substantial changes to the inner elemt's css):

To start down that road this should get you goin:

.card.col {
  width: calc(25% - 25px)!important;
}

@media screen and (max-width: 1024px) {
  .card.col {
    width: calc(25% - 17px)!important;
  }
}

If you're refering to the giveaway images nearer the bottom of the page:

#giveaway-images .span3 {
  display: inline-block;
  width: calc(25% - 22px)!important;
}

@media screen and (max-width: 1024px) {
  #giveaway-images .span3 {
    width: calc(25% - 4px)!important;
  }
}

@media screen and (max-width: 1280px) {
  #giveaway-images .span3 {
    width: calc(25% - 20px)!important;
  }
}

#giveaway-images .span3 a {
  padding: unset;
}