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.
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 4.0 option.
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, Toolset forms, and the Layouts Visual Editor cell (in HTML editing mode).
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.
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.
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.
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.
<div class="col-md-6">Cell 1</div>
<div class="col-md-6">Cell 2</div>
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.
On the front-end, our list of posts now displays the “Price” and “Duration” information side-by-side as intended.
As you can see, Bootstrap grids are composed of simply structured div elements.
By default, grids use the col-md- (e.g., col-md-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.