Photo Gallery Forums

Posted: **15 Oct 2020, 04:28**

Hi

Im trying to display 3 images across using bootstrap gird but they only display one across
eg
If I add this into the content (menu next to page) it works fine on a normal bootstrap page but not in X3
I can do 3 across if I use a table though.
<div class="container">
<div class="row">
<div class="col-md-4">
One of three columns
</div>
<div class="col-md-4">
One of three columns
</div>
<div class="col-md-4">
One of three columns
</div>
</div>
</div>

George

Posted: **16 Oct 2020, 01:49**

Hi George,

X3 doesn't use Bootstrap, so unless you included the bootstrap CSS, your grid-html would not work. Instead, X3 uses Foundation, which has a similar syntax. See docs:
https://get.foundation/sites/docs-v5/components/grid.html

To achieve the same as in your example, I believe you would use the below:

<div class="row">
  <div class="medium-4 columns">...</div>
  <div class="medium-4 columns">...</div>
  <div class="medium-4 columns">...</div>
</div>

In the content section of your page, you can also find templates that add a grid to the page:

In X4, we will likely migrate to Bootstrap, in which case you would be able to use Bootstrap grid html directly.

Posted: **16 Oct 2020, 08:45**

Am I using a different ver as I cant find the "Insert template" in the content tab?
edit: I was using Html Wysiwig so cant see it..

I tried adding the bootstrap.css to Custom <head> [html] in settings
but it never picked it up?
So just added padding class to Custom CSS [CSS] then used the class on the images
That worked..

Is there somewhere else I need to add the bootstrap.css
Guess I'll have to start using bs.5 now that I know you may be moving to bs.
It will probably be bs10 before you get to though, but good news anyway.
:)
Thanks
George

Posted: **17 Oct 2020, 00:56**

amateur56 wrote:Is there somewhere else I need to add the bootstrap.css

It should work to add it to Settings > Custom > Custom head, as long as you include the entire <link> tag and the correct path. If it doesn't work, do you have a link?

amateur56 wrote:Guess I'll have to start using bs.5 now that I know you may be moving to bs.
It will probably be bs10 before you get to though, but good news anyway.

haha :smile: I wouldn't even consider Bootstrap until version 5 was released, which is still in "alpha". But indeed it will definitely take some time until X4, which is just an emerging idea for now. I already use some Bootstrap 5 Alpha in our new Files app.

Photo Gallery Forums

Display 3 images across in the CONTENT box using bootsrap

Display 3 images across in the CONTENT box using bootsrap

Re: Display 3 images across in the CONTENT box using bootsrap

Re: Display 3 images across in the CONTENT box using bootsrap

Re: Display 3 images across in the CONTENT box using bootsrap