Besides its responsive grid system, Bootstrap provides a whole range of ready-to-use components. After enabling Bootstrap 4 on your Toolset-powered site, you can easily use any of these components. In this tutorial, we go over some examples of usage.

Getting Started

Start by enabling Bootstrap 4 from the Bootstrap loading section, on the Toolset -> Settings page. This will load the full Bootstrap 4 library, allowing you to use all of the Bootstrap 4 Components.

Using Bootstrap 4 components is very easy. All you need to do is apply relevant Bootstrap 4 classes or copy-paste some code snippets from Bootstrap 4 components documentation.

Styling your site elements using Bootstrap classes

Let’s take a look at a few examples to see how easy it is.

Example #1 – Card

The card component is one of the most powerful elements introduced in Bootstrap 4.

It’s a flexible and extensible content container, built with little markup but very flexible in terms of customization. Built with flexbox, the card component offers easy alignment and mixes well with other Bootstrap components.

The following images display an example of the same content with and without the card classes applied.

Content without card classesContent with some card classes applied

 

In our example, we add a container div with a card class and some classes to elements in our content, as displayed in the following image.

Container and content classes for using Bootstrap 4 card component
Container and content classes for using Bootstrap 4 card component

Here are the classes we use:

  • card – acts as a container for elements inside it, built with flexbox
  • card-img-top – makes the top corners rounded
  • card-body – adds paddings

You can add an optional header and footer within a card.

This is how our code looks like in this example (click to expand).

 

Cards support a wide variety of content, including images, text, list groups, links, and more.

Visit Bootstrap 4 documentation to see other applications of using cards.

Jump to the How to use Bootstrap classes in Toolset section to see how to apply the classes in Toolset Views.

Example #2 – jumbotron

Jumbotron is a lightweight and flexible component to make your content stand out. It adds paddings to your container, grey background and makes the corners a bit rounded. Note that the paddings will adjust nicely on mobile devices as well.

The following images display an example of the same content with and without the jumbotron classes applied.

Content without the “jumbotron” classContent with the “jumbotron” class applied

To use the jumbotron component you just need to add one container div with the jumbotron class. Jumbotron also mixes well with other Bootstrap classes.

This is how our code looks like in this example (click to expand).

 

How to use Bootstrap classes in Toolset

In Views created with shortcodes

Simply add Bootstrap classes and relevant HTML to your markup.

The following image displays how we added the necessary HTML markup and Bootstrap classes to our View’s template.

HTMlL markup using Bootstrap classes in a View's template
HTMlL markup using Bootstrap classes in a View’s template

And here is how our View outputs posts using the Bootstrap card component.

A View listing portfolio items that uses Bootstrap card classes
A View listing portfolio items that uses Bootstrap card classes

Views and Templates using blocks

To add Bootstrap classes, use the HTML mode of the TB Fields and Views block. Switch to the HTML mode to alter the HTML markup and apply Bootstrap Classes as displayed in the following image.

TB Fields and Text blocks with Bootstrap classes applied - backend
TB Fields and Text blocks with Bootstrap classes applied – backend

The following image displays the front-end results for Toolset Fields and Text blocks with Bootstrap card classes applied.

TB Fields and Text blocks with Bootstrap classes applied - front-end
TB Fields and Text blocks with Bootstrap classes applied – front-end

Learn about growing your WordPress business

BTW, we recently launched a new podcast on WordPress marketing.

In the latest episode, we discuss how to make become one of the most popular blogs on WordPress.

Feedback?

Are you using Bootstrap components on your Toolset-powered sites?

Let us know how it goes! Please leave your comments below and we’ll get back to you.