[SOLVED] bootstrap in Kazumi

Hi,
ich verwende normalerweise bootstrap in den Beiträgen, z.B. für eine Galerie meiner Fotos.
<div class="container">
<div class="row">
<div class="col-md-4"> image </div>
<div class="col-md-4"> image </div>
<div class="col-md-4"> content </div>
</div>
</div>
Leider wird bei Kazumi diese Angabe ignoriert. Auch im browser werden alle Bilder untereinander dargestellt.

Wie lässt sich bootstrap verwenden? Es ist im warp nicht deaktiviert.

Vielen Dank.

---

Hi,
normally, I'm using bootstrap in the articles, ex. for my photo galleries.
<div class="container">
<div class="row">
<div class="col-md-4"> image </div>
<div class="col-md-4"> image </div>
<div class="col-md-4"> content </div>
</div>
</div>
In the Kazumi template, this does not work. The arrangement is vertically only, also in the desktop view.
What can I do to use bootstrap? It is not deactivated in warp.

Many thanks.

Hello,
please use the uikit instead of the bootstrap
getuikit.com/v2/docs/grid.html

Hi,
I just would like to create a grid 7 x 8 (for images) that is shown always 7 x 8 for at least medium sized screens and vertically arranged for smaller screens.
It works fine with my code, but the images are shown in a smaller size with a huge gap in between the larger the screen gets. It looks fine at I guess 1000px width (small gaps) but then the images get a lot smaller and the gaps increase.

See at magicdaya.com/index.php/en/ming-design-en

My code:
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<div class="uk-grid">
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_01.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_02.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_03.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_04.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_08.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_09.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_10.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_11.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_15.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_16.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_17.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_18.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_22.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_23.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_24.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_25.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_29.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_30.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_31.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_32.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_36.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_37.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_38.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_39.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_43.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_44.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_45.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_46.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_47.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_48.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_49.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_50.jpeg previewWidth=200}{/lightgallery}</div>
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-grid">
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_05.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_06.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_07.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4"> </div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_12.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_13.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_14.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4"> </div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_19.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_20.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_21.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4"> </div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_26.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_27.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_28.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4"> </div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_33.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_34.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_35.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4"> </div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_40.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_41.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4">{lightgallery type=url path=images/50shadesOfSky/signed_42.jpeg previewWidth=200}{/lightgallery}</div>
<div class="uk-width-medium-1-4"> </div>
<div class="uk-width-medium-1-1"><img style="border: 0px solid transparent; box-shadow: 0 0 0 0 transparent; padding-top: 20px;" src="images/50shadesOfSky/x_title.png" alt="" width="600" /></div>
</div>
</div>
</div>

Hello, your grid is wrong.
If you are using 1/4 then its 4 x 25%.

Here is what I would do 6 rows with 1/6. ( 7 Rows is not possible its a prime number)

<div class="uk-grid">
<div class="uk-width-1-6-medium">...</div>
<div class="uk-width-1-6-medium">...</div>
<div class="uk-width-1-6-medium">...</div>
<div class="uk-width-1-6-medium">...</div>
<div class="uk-width-1-6-medium">...</div>
<div class="uk-width-1-6-medium">...</div>
</div>

Hi, thank you.

No, my grid is not wrong. The grid itself works fine.
Sorry, the above written code is a bit confusing. I put all the code in - so you can see how I put in the images (with lightgallery).

It is a 1-2 grid and nestled a 1-4 grid. Otherwise there will be (due to responsive design) a break after 6 images or 4 and for that the layout of my photo arrangement is not made (it should be 7 x 8 or just one image below the other, but not 4 x 11 or 6 x 9).

On the prevoiusly posted link to my website (magicdaya.com/index.php/en/ming-design-en) you can see that it works.
I made two columns - one with 4 images (in a 1-4 grid), one with 3 images per row and an empty place (in a 1-4 grid).

It looks like that:
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<div class="uk-grid">
<div class="uk-width-medium-1-4"> image </div>
<div class="uk-width-medium-1-4"> image </div>
<div class="uk-width-medium-1-4"> image </div>
<div class="uk-width-medium-1-4"> image </div>
.... and so on ...
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-grid">
<div class="uk-width-medium-1-4"> image </div>
<div class="uk-width-medium-1-4"> image </div>
<div class="uk-width-medium-1-4"> image </div>
<div class="uk-width-medium-1-4"> empty </div>
.... and so on ...
</div>
</div>
</div>

The only problem is that the grid is fine with smaller screens (large images, small spaces), but it is shown with very tiny images on larger screens - with huge spaces between the images.

What can I do? I did not find anything in the documentation.

Hello,
I told you that "7" is not possible, its a prime one.
Read it carefully, there are many options.
getuikit.com/v2/docs/grid.html
You can try medium, large, and so on.
And the grid gutter can changed as well too.