This tutorial teaches you how to create responsive layouts using the Toolset Layouts plugin. You’ll see how layouts automatically adjust to the screen size and how they can be tweaked to achieve perfect appearance on both wide and narrow devices.

How layouts automatically adjust to the available screen size

The designs that you create with Toolset Layouts use Bootstrap, so they are responsive out of the box. In the Layouts editor, you use rows and cells, which correspond directly to Bootstrap rows and cells.

By default, each of the cells you create in Layouts gets the col-sm-* Bootstrap class. It means that on

  • large
  • medium
  • small

devices, your layout on the front-end will appear as you see it in the editor.

Example layout in the Layouts Editor (backend)
Example layout in the Layouts Editor (backend)

Example layout on the front-end. The layout front-end appearance reflects its backend design - 3 cells in a row.
Example layout on the front-end. The layout front-end appearance reflects its backend design – 3 cells in a row.

With the default col-sm- classes, on extra small devices the cells will automatically move to display one below the other (what Bootstrap refers to as “stacked”).

Example layout in the Layouts Editor (backend)
Example layout in the Layouts Editor (backend)

For extra small devices, the layout cells on front-end will stack - display one below the other
For extra small devices, the layout cells on front-end will stack – display one below the other

Toolset hint
You can change the default base class by clicking on the Column width bottom in your Layout Editor.

How to change the Bootstrap base class

Why you should control the appearance of layouts on small devices and how to do it

You can tweak the grid to achieve accurate control over the appearance of your design on different screen widths.

Here are some examples what you can do:

  • set up larger margins for extra small devices
  • set up different number of cells in a row for different devices
  • set up a different cell order for different devices
  • hide/show elements on different devices

Let’s see these examples in action.

How to set up larger margins for extra small devices

By default on extra small devices your the cells automatically stack (display one below the other). This means that a cell that took up only part of the page before, now takes the entire width on a narrow screen.

Layout displayed on extra small devices - default view
Layout displayed on extra small devices – default view

Th same layout displayed on extra small devices after changes
The same layout displayed on extra small devices after changes

So, now, a cell may actually be too wide when it appears on a narrow device (refer to the first image).

In our example, we want to make the text appear more narrow (refer to the second image).

To achieve this, we’ll add the col-xs-8 class to the cell. This class tells Bootstrap to display the cell with only 8 columns, instead of taking up the entire width, which has 12 columns.

How to open a cell for editing
How to open a cell for editing

Here is how we would do this in practice:

  1. Go to the Responsive Web Design page and open it for editing.
  2. Click the Edit with Layouts button.
  3. Locate the Exercise 1 row and open the first cell for editing.

How to add Bootstrap classes to your layout cells
How to add Bootstrap classes to your layout cells

  1. Scroll down to the Tag classes section.
  2. Enter the col-xs-8 class.
  3. Click Apply.

Our layout after adding the col-xs-8 class to the first cell
Our layout after adding the col-xs-8 class to the first cell

  1. Click Preview to check your layout appearance on the front-end.
  2. Resize your browser window until it matches the extra small device width.

The resulting page on the front-end will look as shown in the screenshot on the left.

Now, we can see a new problem. The cell, indeed, has the width that we wanted, but it’s no longer centered. To fix this, we’ll add the col-xs-offset-2 class.

Our layout after adding the col-xs-offset-2 class
Our layout after adding the col-xs-offset-2 class

  1. Open your cell for editing.
  2. Add col-xs-offset-2 class into the Tag classes section.

Now, the cell appears at the correct width and position on the page.

But wait. We manually set an offset for extra small devices, however, this will now change the way this cell appears on all larger screens. This is because Bootstrap will use the offset that we set for extra small devices on all other device sizes.

Col-xs-offset-2 for medium device
Col-xs-offset-2 for medium device

Col-xs-offset-2 for small devices
Col-xs-offset-2 for small devices

To fix this, we have to add col-sm-offset-0 to the cell. This will tell Bootstrap that on small and larger devices, there should be no offset for this cell.

Adding the col-sm-offset-0 class.
Adding the col-sm-offset-0 class.

  1. Open your cell again and add the col-sm-offset-0 class.
  2. Add the same set of classes to the other cell of your row.
  3. Preview your layout again.

It should now look as shown in the following images:

Extra small devices
Extra small devices

Medium devices
Medium devices

To summarize, each cell now has the following classes:

Bootstrap class What it does
col-xs-8 sets the cell width to 8 columns for extra small+ devices (extra small+ means extra small devices and larger)
col-xs-offset-2 moves the cell 2 columns to the right on (increases the left margin of a cell by 2 columns) for extra small+ devices
col-sm-offset-0 restores the default offset for smaller+ devices

How did this work?

Bootstrap includes several screen-size settings:

  • xs: Extra small
  • sm: Small
  • md: Medium
  • lg: Large

Predefined Bootstrap classes that you can add classes to cells

You can add classes to cells, which will override the cell’s size and position on different screen sizes.

Table 2: Classes you can add to cells to control their appearance on different screen widths
Bootstrap class Class role Example
col-xs-*, col-sm-*, col-md-*, col-lg- Sets the number of grid columns the cell will occupy on extra small, small, medium, and large devices, respectively. col-md-6 – A cell with this class will span to 6 columns on medium devices

col-lg-4 – A cell with this class will span to 4 columns on large devices.

col-xs-offset-* Increases the left margin by the number of columns to move the cell to the right. col-xs-offset-2 – Moves the cell 2 columns to the right on extra small devices
col-xs-push-*, col-xs-pull-*
col-sm-push-*, col-sm-pull-*
col-md-push-*, col-md-pull-*
col-lg-push-*, col-lg-pull-*
Reorder cells.
Push – move a cell to the right
Pull – move a cell to the left
col-md-push-3 – On medium devices, push the cell 3 columns to the right

col-md-pull-3 – On medium devices, pull the cell 9 columns to the left

visible-xs-*, hidden-xs,
visible-md-*,
hidden-md,
visible-md-*, hidden-md,
visible-lg-*,
hidden-lg,
 hide/show cells  Hide a cell with this class on extra small devices, display it on small, medium, and large devices.

Toolset hint

Note that grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g., applying any .col-md-* class to an element will not only affect styling on medium devices, but also on large devices, if a .col-lg-* class is not present.

Source: http://getbootstrap.com/css/#grid

Let’s see examples of how all these classes work in practice.

Displaying 2 cells in a row for small devices and 4 cells in a row for larger devices

In some cases, you would need to display a different number of cells in a row for larger and small devices. For example, four cells in a row for large and medium devices, but for small devices, only two cells in a row.

This is illustrated in the images below:

4 cells in a row on large screens
4 cells in a row on large screens

2 cells in a row on small screens
2 cells in a row on small screens

4 cells in a row on medium screens
4 cells in a row on medium screens

By default, your 4-cell layout will display four cells in a row for large, medium, and small devices.

The cells become too narrow for small devices.
The cells become too narrow for small devices.

If you resized your browser window slowly and watched how the grid changes for different screen widths you would see that on small screens the cells have become too narrow (refer to the screenshot).

We would fix that issue by adding the col-sm-6 classes to our cells, so each cell will occupy a bit larger space.

Our layout on small devices after adding the col-sm-6 class
Our layout on small devices after adding the col-sm-6 class

In practice we would:

  1. Go to the Responsive Web Design page and open it for editing.
  2. Click Edit with Layouts.
  3. Locate the Exercise 2 row and add the col-sm-6 class to each of its cells.
  4. Preview your layout on the front-end.
  5. Resize your browser window to reach the small device width.

Your grid has now become 2×2. You can see two cells in a row, each 6 columns wide. Compare with the screenshot.

This is what we expected.

2 cells in a row on large screens
2 cells in a row on large screens

However, now the 2×2 grid displays on all larger devices as well (that’s because Bootstrap classes scale up). Instead, for medium and large devices, we want to stick to our original layout appearance and display four cells in a row.

We will fix this by adding the col-md-3 classes to our cells.

  1. Add the col-md-3 class to each of your cells.
  2. Preview your layout.

4 cells in a row on large screens
4 cells in a row on large screens

4 cells in a row on medium screens
4 cells in a row on medium screens

Now, you should see four cells in a row for medium and large devices (refer to the screenshot).

To summarize, each Exercise 2 row cell now has the following classes:

Bootstrap class What it does
col-sm-6 sets a cell width to 6 columns for small+ devices
col-md-3 sets a cell width to 3 columns for medium+ devices (and overrides the col-sm-6 classes for small devices)

How does it work?

For small devices, the col-sm-6 class causes the cell to span to 50% of its container. This makes two cells in a row, half-width each.

For medium (and larger devices), the col-md-3 class is used. The col-md-3 class tells your cell to span to three columns. So, now, there is enough space to accommodate four cells in a row (3×4 = 12, which is the total number of columns in a row).

Displaying 1 cell in a row for small devices and 2 cells in a row for larger devices

In some cases, you might need to display two cells in a row for large and medium devices, but for small and extra small devices, only one cell in a row.

This is illustrated in the images below:

Large devices
Large devices

Medium devices
Medium devices

Small and extra small devices
Small and extra small devices

By default, your 2-cell layout will display two cells in a row for large, medium, and small devices.

When your browser window reaches the small device width the picture no longer looks good
When your browser window reaches the small device width the picture no longer looks good

Resize your browser window slowly and watch how the grid changes for different screen widths.

When your browser window reaches the small device width, you will see that the cells have become so narrow that the picture no longer looks good next to the cell with text (refer to the screenshot).

We will fix this issue by adding the col-sm-12 class to our cells, so each cell will occupy the full row on small devices.

Our layout after adding the col-sm-12 class
Our layout after adding the col-sm-12 class

In practice we would:

  1. Go to the Responsive Web Design page and open it for editing.
  2. Click Edit with Layouts to edit the content layout.
  3. Locate the Exercise 3 row and add the col-sm-12 class to each of its cells.
  4. Preview your layout on the front-end.
  5. Resize your browser window to reach the small device width.

Now, you should see each of your cells in a separate row. Compare with the screenshot.

This is what we expected.

Our layout on medium devices after adding the col-sm-12 class
Our layout on large and medium devices after adding the col-sm-12 class

However, now you see one cell in a row on all larger devices as well (that’s because Bootstrap classes scale up). Instead, for medium and large devices, we want to stick to our original layout appearance and display two cells in a row.

We will fix this by adding the col-md-6 class to our cells.

  1. Add the col-md-6 class to each of your cells.
  2. Preview your layout.

Medium devices
Medium devices

Large devices
Large devices

Now, you should see two cells in a row for medium and large devices (refer to the screenshot).

To summarize, each Exercise 3 row cell now has the following classes:

Bootstrap class What it does
col-sm-12 sets the cell width to 12 columns for small+ devices
col-md-6 sets the cell width to 6 columns for medium+ devices (and overrides the col-sm-12 class for small devices)
col-sm-offset-0 restores the default offset for smaller+ devices

How does it work?

For small devices, the col-sm-12 class causes the cell to span 12 columns, which is 100% of its container. This makes one cell per row, full width each.

For medium (and larger devices), the col-md-6 class is used. The col-md-6 class tells your cell to span to 6 columns, which is 50% of its container. Now, there is enough space to accommodate two cells in a row (2×6 = 12, which is the total number of columns in a row).

Setting up a different cell order for different devices

In some cases, you might need to display your cells in a different order for different devices.

For example, on large, medium, and small devices, you want your text cell to display first (appear on the left), and the image cell, second (on the right). However, on extra small devices, you want to revert the order: the image comes first, then, the text cell follows.

This is illustrated by the images below:

vector illustration of a laptop, monitor, tablet and phone on a white background

Cell order on medium devices - image comes second
Cell order on medium devices – image comes second

Cell order on extra small devices - the image comes first
Cell order on extra small devices – the image comes first

By default, the cell that comes first in your Layout Editor will display first on all devices.

Layout default behavior on extra small devices
Layout default behavior on extra small devices

Resizing your browser you would see that the cells collapse and display one below the other on extra small devices.

Because the image comes second in the Layout Editor, it will naturally display below the text cell. However, we would like it to display first.

To fix this issue, we will revert our cells’ order in the Layout Editor and use the Bootstrap push and pull classes to restore the original order for larger devices.

Drag the image cell and move it to the left to swap it with the text cell.
Drag the image cell and move it to the left to swap it with the text cell.

In practice we would:

  1. Go to the Responsive Web Design page and open it for editing.
  2. Click Edit with Layouts.
  3. Locate the Exercise 4 row.
  4. Grab the cell with the image and move it to the left to swap with the text cell.

Our layout on extra small devices after changing the cell order
Our layout on extra small devices after changing the cell order

  1. Preview your layout on the front-end.
  2. Resize your browser window to reach the extra small device width.

Now, you should see the image appear first.

This is what we expected.

After changing the cell order, we violated its original appearance for all other devices.
After changing the cell order, we violated its original appearance for all other devices.

After changing the cell order, we violated its original appearance for all other devices.

Now, the image appears first on all screen sizes.

We will fix this now by adding the push and pull classes.

  1. Open the image cell for editing and add the col-sm-push-7 class.
  2. Now, open the text cell and add the col-sm-pull-5 class.
  3. Preview your layout.

The image cell should now display on the left for large, medium, and small devices (refer to the image).

The image cell should now display on the left for large, medium, and small devices.
The image cell should now display on the left for large, medium, and small devices.

The image cell should now display on the left for large devices
The image cell should now display on the left for large devices

To summarize, your cells should now have the following classes:

Bootstrap class What it does Bootstrap class What it does
Image cell First (on the left) col-sm-push-7 Moves the cell 7 columns to the right for small+ devices.
Text cell Second (on the right) col-sm-pull-5 Moves the cell 5 columns to the left for small+ devices.

How does it work?

We want to push the image cell to the right, to take the space now occupied by the text cell. The text cell occupies seven columns in our layout, so we need to move the image cell seven columns to the right. That’s exactly what the col-sm-push-7 class does.

Once the image cell is moved, we need to move the text cell to the left, so that both cells swap. The col-sm-pull-5 class moves the cell five columns to the left, which corresponds to our text cell width in our layout.

We want to apply that trick to all screen widths, starting from small devices. That’s why we use the -sm- in our class names. Bootstrap classes scale up, so the classes will be used for medium and large devices as well.

Hiding images on extra small devices

On certain devices, such as phones (extra small devices), you may want to hide the image.

This is illustrated by the images below:

Image on large devices
Image on large devices

Image on medium devices
Image on medium devices

Hiding images on extra small devices
Hiding images on extra small devices

By default, the images always appear.

To hide the images on extra small devices, we will use the hidden-xs Bootstrap class.

Hiding images on phones
Hiding images on phones

In practice we would:

  1. Go to the Responsive Web Design page and open it for editing.
  2. Click Edit with Layouts.
  3. Locate the Exercise 5 row.
  4. Open the image cell and add the hidden-xs class.
  5. Preview your layout.
  6. Resize your browser window to reach the extra small device width.

Your image should disappear. Refer to the image.

To summarize, your image cell should now have the following class:

Bootstrap class What it does
hidden-xs Hides content on extra small devices and displays for all other devices.

How does it work?

The hidden-xs class is one of the Bootstrap classes used for toggling content across multiple devices. It hides the content on extra small devices, however, leaves it visible on small, medium, and large devices.

Summary

In this tutorial, we talked about how to get the most out of Bootstrap and obtain a perfect display with different screen sizes. We designed layouts with drag-and-drop editing and added Bootstrap classes for display optimizations.

Remember:

  • The layouts you create in the Layouts editor are based on the Bootstrap grid system and, therefore, are responsive out of the box.
  • By default your layout will get the col-sm-* Bootstrap classes, which means:
    • cells will display just as you draw them in the Layouts editor for small, medium and large devices.
    • for extra small devices cells will be stacked, one below the other.

    You can change the base col-sm-* classes to col-md-*, col-lg-* or col-xs-* by clicking on the Column width icon in your Layouts Editor

  • To customize your layout appearance for specific screen widths, you add Bootstrap classes to your cells. Bootstrap classes apply to devices with screen widths corresponding to the class name and greater widths. They override classes targeted at smaller devices.Use the following classes:
  • You can combine different classes to create fully custom layouts for different screen widths.

In the tutorial, we covered five examples, but the possibilities are endless.