# Creating 4 columns and 2 rows using Bootstrap in Hubspot

**URL:** <https://community.hubspot.com/t/creating-4-columns-and-2-rows-using-bootstrap-in-hubspot/16261>\
**Category:** CMS Development\
**Tags:** design-manager, css\
**Created:** [September 17, 2019, 2:33am UTC](https://community.hubspot.com/t/creating-4-columns-and-2-rows-using-bootstrap-in-hubspot/16261 "2019-09-17T02:33:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrissa0000](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chrissa0000/32/89259_2.png) [@chrissa0000](https://community.hubspot.com/u/chrissa0000)\
**Post date:** [September 17, 2019, 2:33am UTC](https://community.hubspot.com/t/creating-4-columns-and-2-rows-using-bootstrap-in-hubspot/16261/1 "2019-09-17T02:33:44Z")

</div>

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](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

```auto
<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

---

<div class="post-metadata">

**Author:** ![sharonlicari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sharonlicari/32/101479_2.png) [@sharonlicari](https://community.hubspot.com/u/sharonlicari)\
**Post date:** [December 5, 2019, 12:07pm UTC](https://community.hubspot.com/t/creating-4-columns-and-2-rows-using-bootstrap-in-hubspot/16261/2 "2019-12-05T12:07:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [December 5, 2019, 1:37pm UTC](https://community.hubspot.com/t/creating-4-columns-and-2-rows-using-bootstrap-in-hubspot/16261/3 "2019-12-05T13:37:24Z")

</div>

Hey @chrissa0000

and Thank you @sharonlicari

**EDIT:**

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

According to the [Bootstrap documentation](https://getbootstrap.com/docs/4.4/layout/grid/) 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):

```auto
.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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/c/3c3583f64cf13f9c99ea83be6f4a9e60d3dac05a.png)

To start down that road this should get you goin:

```auto
.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:

```auto
#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;
}

```