Search…

X3 Photo Gallery Support Forums

Search…
 
amateur56
Experienced
Topic Author
Posts: 27
Joined: 12 Apr 2019, 04:31

Display 3 images across in the CONTENT box using bootsrap

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
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

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

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:
Code
<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:
Image

In X4, we will likely migrate to Bootstrap, in which case you would be able to use Bootstrap grid html directly.
 
amateur56
Experienced
Topic Author
Posts: 27
Joined: 12 Apr 2019, 04:31

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

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 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

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

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.