How to use Bootstrap Grid on Dazzling WordPress theme

Aigars,

Hi, I successfully built and launched a site recently using Dazzling Theme and I was so impressed by it I am currently working on a Real Estate website project, that I am hoping will convince a guy I know, that Wordpress has what it takes to replace his soon to be no longer supported Drupal based site.

So far so good, but I have struck a problem that I just cannot figure out how to remedy, his current site has a number of images with links and associated text in a table, as we all know I guess, Tables are not particularly Mobile friendly.

I have just spent quite a few hours trying to figure out how to make it look as close as I can to what he has now, but have each image and associated text “Stack” on top of each other for want of a better term, as the screen width reduces.

I have tried using both the Easy Bootsrap Shortcode plugin, but it doesn’t have a Grid shortcode, I also installed the Bootstrap 3 Shortcodes plugin which does have a Grid shortcode, but can’t get that to work either, maybe grids are not the answer, but from all of the tutorial videos I have watched (a couple of hours worth) it seems to be the way to go.

I noticed on your page Bootstrap Shortcodes For Dazzling WordPress Theme page that there is reference in a comment to the Dazzling Theme Documentation page and how you can configure the Easy Bootsrap Shortcode plugin properly to make it work with Dazzling theme, but I must be blind because i can’t see it.

Maybe I am barking up the wrong tree here, but do you have any suggestions as to how I can achieve what I am trying to do, see the attached screenshot for an example.

Kindest Regards
Bam Bam

PS: I have since found the settings advice, but that doesn’t solve my main question.

Bam Bam

I have solved the problem by using a plugin, but I would still like to hear your views on the subject if you can find the time.

Kindest Regards
Bam Bam

Hi Bam,

I hope you are well today and thank you for your question.

The Dazzling theme uses the bootstrap framework which responsive/mobile friendly so if you just use the bootstrap classes for image container like col-md-4 then it will display the images in single column on mobile devices as shown on the following page in Responsive Images section.

In bootstrap every class has meaning and associated functionality which you can use to develop Grid based responsive layouts. Find more information about it on the following pages.

http://getbootstrap.com/css/#grid-example-basic
http://getbootstrap.com/examples/grid/

Cheers,
Movin