When designing sites, there is usually some content you need to display in a grid, where different parts go into different columns. Toolset plugins allow you to easily insert and use grids when designing lists of posts, front-end forms, custom searches, and more.

The following table displays some practical examples of using grids when designing sites.

List of content with a simple but important two-column grid in the output of each post Custom search with filter controls arranged in a three-column grid Form for submitting new content, with part of the inputs arranged in a two-column grid
     

 

As you can see, grids allow you to improve the appearance and usability of your site, save space, and more.

Watch the following short video to learn how to add columns to a CRED form, with the Grid tool.

Ensuring grids work with your theme

Although the grids feature is based on Bootstrap grids, it works with any theme, even those that do not use Bootstrap. In this case, you only need to ensure that Toolset loads the necessary stylesheets on the site.

To do this, go to the Toolset -> Settings page and scroll to the Bootstrap loading section. There, select the Toolset should load Bootstrap 3.0 option.

This option allows Toolset to load the Bootstrap styling in case your theme is not using Bootstrap
This option allows Toolset to load the Bootstrap styling in case your theme is not using Bootstrap

How to use grids in Toolset

A critical part of using Toolset plugins occurs with the different editors used to design your site. Most of these editors feature a Grid button. These include the editors found in Views, CRED forms, and the Layouts Visual Editor cell (in HTML editing mode).

Grid button in the Views "Templates for this View" editor
Grid button in the Views “Templates for this View” editor

Let’s consider a simple but important example of inserting and using grids. On our site about traveling tours, we have a View that lists “Special Offers.” As usual, our View uses a template to group the fields of each post, allowing us to style the template more easily.

The following image displays how the list of our “Tour” posts is initially output.

Lists of content with field information one beneath the other
Lists of content with field information one beneath the other

As you can see, each “Tour” post features a custom “Price” and “Duration” field, one below the other.

Usually, to output the posts side-by-side, you could float them, or resort to other less elegant or even “hacky” options. In addition, one also must consider keeping your site responsive.

This is exactly when using Bootstrap grids with Toolset becomes useful. We only need to insert a two-column grid and place our two fields there.

Inserting a grid

To insert a grid into the editor, we click the Grid button. A pop-up dialog box appears with different, pre-designed grids, each featuring a specific column format.

Grid insertion dialog box
Grid insertion dialog box

Use the dialog box to select a grid type that best suits your needs and click on the Insert grid button.

Your grid has now been inserted and will appear similar to the following.

Two-column grid example
<div class="row">
	<div class="col-sm-6">Cell 1</div>
	<div class="col-sm-6">Cell 2</div>
</div>

 

Placing content within the grid

Now, we only have to replace the “Cell 1” and “Cell 2” placeholder contents with our own “Price” and “Duration” field codes, respectively.

The following image displays the editor after we insert the grid and place our content inside.

View template after inserting the grid and placing the content inside
View template after inserting the grid and placing the content inside

On the front-end, our list of posts now displays the “Price” and “Duration” information side-by-side as intended.

List of content after using the grid to display part of the post information
List of content after using the grid to display part of the post information

Customizing the grid

As you can see, Bootstrap grids are composed of simply structured div elements.

By default, grids use the col-sm- (e.g., col-sm-6) classes to specify the columns of a grid. This means they are optimized for small devices.

You can customize the grids, including for device sizes they are optimized, to suit your preference. You can also apply any additional styling.

Visit the official Bootstrap documentation to learn about Bootstrap grids, classes, and related sizes.

For a detailed tutorial on how to customize Bootstrap elements, refer to our page about creating responsive designs.