[Resolved] Layout setting

[Author]

Posts

[reimundH]

Hello,

I´d like to adjust the layout of the text-information which shown with views.
Could you please explain to me how I can create a layout according to the attached example screenshot? It would be great if you provide a sample code.

Thanks in advance.

Best regards
Reimund

[Waqar]

Hi Reimund,

Thanks for asking! I'd be happy to help.

From your screenshot, I understand that currently, your website's view is showing the output in a single line and you'd like it to show the results in a four column layout/grid.
( screenshot: hidden link )

Please go to your view's "Loop Editor" section and using the "Loop Wizard" button, select the layout to use "Bootstrap grid".

The detailed steps along with the screenshots are covered in this guide:
https://toolset.com/documentation/user-guides/view-layouts-101/

I hope this helps and please let me know how it goes.

regards,
Waqar

[reimundH]

Hello,

sorry, maybe my description was unclear.
Let me explain more clearly.
I´ve already create a four column layout/grid with bootstrap.

The gray fields which shown in the screenshot are just placeholder for images (the screenshot only shown 2 column of 4).
The text under the image-placeholder are a information by "Custom field".
I´d like to show the text information, under the images as 4 column. Like the attached screenshot shows (yellow frames).
Please check the attached screenshots.

Thanks in advance.

[Waqar]

Hi Reimund,

Thanks for writing back and sharing further details.

To show these fields in a grid as shown in the screenshot, you can use the Bootstrap grid classes, as explained in this guide:
https://toolset.com/documentation/user-guides/displaying-content-using-grids/

Example:

<div class="row">
	<div class="col-sm-12" align="center">Row 1 - Cell 1</div>
</div>
<div class="row">
	<div class="col-sm-3" align="center">Row 2 - Cell 1</div>
	<div class="col-sm-3" align="center">Row 2 - Cell 2</div>
	<div class="col-sm-3" align="center">Row 2 - Cell 3</div>
	<div class="col-sm-3" align="center">Row 2 - Cell 4</div>
</div>

Note: you can add the image field's shortcode in the "Row 1" which will cover the full available width and the other 4 fields can be added in each cell in the "Row 2". The align="center" part will make sure that the content inside these columns is centered.

regards,
Waqar

[reimundH]

My issue is resolved now. Thank you!