Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Using bootstrap grid classes in column options

Featured Lock Resolved Task
Hi, and thank you for this amazing extension.

I have only one "feature request" that would be really useful, that is to make possible to use bootstrap classes in column grid options in CSS class. I had to make changes to SPPB core file to make this possible, and that is never good idea because update would overwrite it back.

See example in the image I attached.

I wanted to make very simple setup, 6 column layout for desktop version (image 1), and 3 column layout for tablet version (image 2), but currently that is not possible with SPPB, as you can assign only one grid layout for all page widths (as in image 3).

If you try to add bootstrap "width classes" (eg. col-md-2... as in image 4) in the column CSS field it will be assigned to inner container of the column div, thus not affecting width of the column.

So in short it would be great if core parser file is changed to assign css class to outer container of the column, which would allow as to use all boostrap width combinations.

Attachments (1)

  • sppb-bootstrap-question.jpg
    sppb-bootstrap-question.jpg 282 KB

11 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your query. Please add below css class of sp page builder column option.


sppb-col-xs-4 sppb-col-md-6


-Thanks

joomla.team

More than a month ago #Permalink
Hi and thank you for your reply, but I think you didn't understood my question/suggestion.

It doesn't matter do I use bootstrap css classes or sp page builder css classes, what matters is that they are assigned to inner container, which means that they will not affect grid layout in any way.

Please check the attached image and notice in the above image default output vs. output after modification of parser.php file in the bottom image.

It should be obvious what I mean.

Thanks

Attachments (1)

  • sbbp-bootstrap2.jpg
    sbbp-bootstrap2.jpg 275.6 KB

Toufiq - Staff

More than a month ago #Permalink
joomladienst wrote:

Hi and thank you for your reply, but I think you didn't understood my question/suggestion.

It doesn't matter do I use bootstrap css classes or sp page builder css classes, what matters is that they are assigned to inner container, which means that they will not affect grid layout in any way.

Please check the attached image and notice in the above image default output vs. output after modification of parser.php file in the bottom image.

It should be obvious what I mean.

Thanks


Hi, Thanks for your reply. As per your screenshot & query i have give you solution. So do you have other issue? Let me know please. Thanks

joomla.team

More than a month ago #Permalink
Hi Toufiq,

Can you send me a link with live example where I can see such grid layout?
SPPB Section with more than one column grid layout.
Any website will do.

Thanks.

pepperstreet

More than a month ago #Permalink
joomladienst wrote:
If you try to add bootstrap "width classes" (eg. col-md-2... as in image 4) in the column CSS field it will be assigned to inner container of the column div, thus not affecting width of the column.
So in short it would be great if core parser file is changed to assign css class to outer container of the column, which would allow as to use all boostrap width combinations.


Finally! A second person on this planet who understood the basic Bootstrap grid feature and mobile-first approach!
Also mentioned it earlier in this PAGEBUILDER topic. Thanks for confirming my complaint and major pagebuilder shortcoming. This issue has to be fixed and improved in up-coming release! There is also a related HELIX3 topic...

(PS: Although the dev team is aware of these issues, I am going to add separate topics on respective GitHub project pages as soon as possible...)

Toufiq - Staff

More than a month ago #Permalink
joomladienst wrote:

Hi Toufiq,

Can you send me a link with live example where I can see such grid layout?
SPPB Section with more than one column grid layout.
Any website will do.

Thanks.


Hi, Thanks for your reply. Please check large screen & small device screenshot. Thanks

Attachments (2)

  • mobile device.png
    mobile device.png 7.8 KB
  • large-device.png
    large-device.png 8.4 KB

joomla.team

More than a month ago #Permalink
Toufiq wrote:

joomladienst wrote:

Hi Toufiq,

Can you send me a link with live example where I can see such grid layout?
SPPB Section with more than one column grid layout.
Any website will do.

Thanks.


Hi, Thanks for your reply. Please check large screen & small device screenshot. Thanks


Hi Toufiq.

The images you posted are nice, and present layout exactly as I need, but I really doubt they are screenshots!

I've read pepperstreet replay and understand that dev team is aware of this, hopefully they would be kind enough to implement this feature in the next release.

Thanks.

joomla.team

More than a month ago #Permalink
Hi there Toufiq,

From your responses so far it's clear that we haven't yet understood each other fully. Let me try once again to summarise the problem, maybe that will help:

We work a lot with Bootstrap and understand the Bootstrap column model very well. Before posting on the forum we had already tried adding a bootstrap class as you suggested (e.g. sppb-col-xs-4 sppb-col-md-6) to the CSS class field of the column within SPPB.

The problem is that SPPB currently adds this class to the wrong DIV container.

If you look at the code example I posted (on Tuesday, August 30 2016, 08:44 PM) you'll see that by default, SPPB adds the CSS class to the inner DIV container. As a result, the Bootstrap column model cannot work as it should.

When I follow your suggestion and add the class sppb-col-xs-4 sppb-col-md-6 to the column CSS class field it doesn't work. Perhaps the easiest thing would be for you to try exactly this yourself on a demo site running SPPB to see.

I've attached another copy of the HTML code with further clarification, please take a look.

Thanks for your help!

Attachments (1)

  • forums.jpg
    forums.jpg 175.5 KB

Toufiq - Staff

More than a month ago #Permalink
joomladienst wrote:

Hi there Toufiq,

From your responses so far it's clear that we haven't yet understood each other fully. Let me try once again to summarise the problem, maybe that will help:

We work a lot with Bootstrap and understand the Bootstrap column model very well. Before posting on the forum we had already tried adding a bootstrap class as you suggested (e.g. sppb-col-xs-4 sppb-col-md-6) to the CSS class field of the column within SPPB.

The problem is that SPPB currently adds this class to the wrong DIV container.

If you look at the code example I posted (on Tuesday, August 30 2016, 08:44 PM) you'll see that by default, SPPB adds the CSS class to the inner DIV container. As a result, the Bootstrap column model cannot work as it should.

When I follow your suggestion and add the class sppb-col-xs-4 sppb-col-md-6 to the column CSS class field it doesn't work. Perhaps the easiest thing would be for you to try exactly this yourself on a demo site running SPPB to see.

I've attached another copy of the HTML code with further clarification, please take a look.

Thanks for your help!


Hi, Thank you so much for describing elaborately. Got it your point. We will fix it next version. Thanks

joomla.team

More than a month ago #Permalink
This issue still exists, even in the latest SPPB version.
Thanks for an update on whether we can expect a fix any time soon?

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your reply. We have fixed our latest version.

1. Our desktop device
http://prntscr.com/e30etd
2. Tablet device
http://prntscr.com/e30egb
3. Back end settings
http://prntscr.com/e30f82

-Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 125
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 93
Toufiq

Toufiq

Total Accepted Answers: 22
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289688

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us