CMS Development

chrissa0000
Contributor

Creating 4 columns and 2 rows using Bootstrap in Hubspot

SOLVE

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

0 Upvotes
1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Creating 4 columns and 2 rows using Bootstrap in Hubspot

SOLVE

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):

Screeenshot - 2019-12-05 at 8.07.22 AM.png

 

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;
}

 

 

 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

2 Replies 2
sharonlicari
Community Manager
Community Manager

Creating 4 columns and 2 rows using Bootstrap in Hubspot

SOLVE

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


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Creating 4 columns and 2 rows using Bootstrap in Hubspot

SOLVE

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):

Screeenshot - 2019-12-05 at 8.07.22 AM.png

 

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;
}

 

 

 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev