You can use the Bootstrap grid that is available if your theme or Toolset loads Bootstrap (see Toolset > Settings), but not quite as intended if you are using the wpv-for-each shortcode to loop through the images.
If you have, say, 3 columns, then you would start a new row after every 3rd item. But wpv-for-each doesn't provide any means for doing something after every nth field.
The Bootstrap grid will still work if all of your content is added to a single row provided you add the required class names, with one important proviso. They will only display correctly if the content is the same height.
The structure of the markup, which will include the featured image in the layout, would be something like this:
<div class="row">
<div class="col-sm-4 gallery-item">
...featured image and any caption goes here
</div>
[wpv-for-each]
<div class="col-sm-4 gallery-item">
...Types repeating image field and caption etc.
</div>
</div>
You would set the fixed height for the .gallery-item class and will doubtless need to tweak the CSS to achieve the look you require.
Is that clear enough? If you have problems implementing it, let me know.
I used your code, but I don't know how to get the gallery images in a horizontal line.
I don't know where to set a class for the [wpv-for-each], and I don't know what style I should use.
(I tried vertical-align, inline-block, I also tried .img-responsive, but without success)
It would be great if you could add a class to my Layout Code on the correct position, and also let me know what I have to put into the "Layouts CSS Editor"
The main issue I see with your code is that the div for each new column should be *inside* the wpv-for-each shortcode that iterates over the repeating fields.
I can't try it, but can you replace your code with the following to see if that works?
