Title: Responsive Grid layout (Bootstrap?)
Last modified: August 28, 2018
---
# Responsive Grid layout (Bootstrap?)
* Resolved [hielkio](https://wordpress.org/support/users/hielkio/)
* (@hielkio)
* [7 years, 9 months ago](https://wordpress.org/support/topic/responsive-grid-layout-bootstrap/)
* Hi folks,
* I hope anyone can help me out here. I’m trying to show a 3 or 4 column grid for
pod items, which should be responsive. The default bootstrap grid gives me 1
column. using just CSS with child-nth functionality as below gives me a more
proper outcome:
* ```
.blog-entry {float:left; width:33.33333%; margin-bottom:1em;}
.blog-entry:nth-of-type(3n+1) {padding-right:1%;}
.blog-entry:nth-of-type(3n+2) {padding:0 .5%;}
.blog-entry:nth-of-type(3n+3) {padding-left:1%;}
.blog-entry img {width:100%; height:auto; margin:0;}
.blog-entry:nth-of-type(3n+4) {clear:left;}
```
* It’s working, but it isn’t responsive. I’d like to prevent using seperate media
queries and using Bootstrap instead. Is this possible?
* This is the template html code:”
* ```
{@post_title}
Locatie: {@locatie}
Website: {@website}
E-mail: {@e-mail}
```
* I hope anyone has a clear answer, or maybe solution for me 🙂 thank you very
much in advance!
- This topic was modified 7 years, 9 months ago by [hielkio](https://wordpress.org/support/users/hielkio/).
- This topic was modified 7 years, 9 months ago by [hielkio](https://wordpress.org/support/users/hielkio/).
* The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresponsive-grid-layout-bootstrap%2F%3Foutput_format%3Dmd&locale=en_US)
to see the link]_
Viewing 5 replies - 1 through 5 (of 5 total)
* Plugin Author [Jory Hogeveen](https://wordpress.org/support/users/keraweb/)
* (@keraweb)
* [7 years, 9 months ago](https://wordpress.org/support/topic/responsive-grid-layout-bootstrap/#post-10631541)
* Hi [@hielkio](https://wordpress.org/support/users/hielkio/),
* If you don’t want to work with [@media](https://wordpress.org/support/users/media/)
queries I think your only option is to use grid/column classes.
For example:
[https://getbootstrap.com/docs/4.0/layout/grid/](https://getbootstrap.com/docs/4.0/layout/grid/)
* Keep in mind that your theme needs to support this.
* Regards, Jory
- This reply was modified 7 years, 9 months ago by [Jory Hogeveen](https://wordpress.org/support/users/keraweb/).
* Thread Starter [hielkio](https://wordpress.org/support/users/hielkio/)
* (@hielkio)
* [7 years, 9 months ago](https://wordpress.org/support/topic/responsive-grid-layout-bootstrap/#post-10632502)
* Hi Jory,
* That’s just what I’m looking for, but I tried that, as I mentioned in my post.
The only problem is, that every POD item starts at a new row. My theme supports
Bootstrap for sure, because I’m using it all the time 😀
* Do I have to place the PODs shortcodes elsewhere maybe? Caus’ it’s using the
grid (col-sm-2 and col-sm-10) per POD item. Here’s the backup code of the bootstrap
grid:
* ```
```
* Plugin Contributor [Jim True](https://wordpress.org/support/users/jimtrue/)
* (@jimtrue)
* [7 years, 9 months ago](https://wordpress.org/support/topic/responsive-grid-layout-bootstrap/#post-10637900)
* You pretty much are the one defining your output in rows and columns; you have
complete control of that. Typically when you’re working with a variable ‘grid’
where you’re not sure how many items you’re going to have, you class the outer
container, and then style that container to properly handle the unordered list
within.
* I also hate to say this, but this isn’t really within the scope of Pods Support
as this is CSS Grid, FlexBox, etc styling of your theme output. As long as you
can output the content into a way you can style it, you can grid it. When I’ve
done these myself, I’ve styled the outer ‘gridbox’ with an unordered list with
it’s own class, ie