Skip to main content

Creating a View From Scratch

  1. Go to Structure > Views. (/admin/structure/views)
  2. Click the "Add new view" button.

  1. Give the view a name and click the Save and edit button at the bottom of the page.
  2. Click on the Add button and from the dropdown menu choose Block.

  1. Setting up the View

  2. Click on the Fields link, change the row style to Content, and choose a teaser layout from the list. You can also use Fields in the View instead of Content. To do that, you have to follow the Teasers Style Guide and replace the text with field tokens from the view.

  3. Click on the Unformatet List and change it to HTML List.

  4. Enter a CSS class from a Row Style Classes in the Wrapper class field to defined the view row style.

  5. Adjust the view filters and sort criterias.

  6. Adjust the number of items and choose a pager type.

  7. Choose name and category for the block.

Row style classes


Class NameDescription
grid--2-columnsCreates two columns grid.
grid--3-columnsCreates three columns grid.
grid--4-columnsCreates four columns grid.


Class NameDescription
listCreates classical list items.

Responsive variations

You can also apply Bootstrap responsive variations on grid--N classes like this: grid-VARIATION--N-columns


You can combine row classes inside the Wrapper field to transform view depending on the display width.
For example, if you use this three classes in the Wrapper field list grid-md--2-columns grid-xl--4-columns, you will produce a list of items on mobile devices, two columns grid on tablets and four columns grid on large displays.

Utility Classes

Class NameDescription
no-guttersRemoves the gutter from the list. You can combine this class with any grid--N class.
equal-heightCombine this class with grid--N classes to make an equal height on a Teaser Cards in the grid.
items--separator--borderCreates bottom border on list items.
items--spacer--tinyDecreases the top and bottom space between items. Useful in combination with list classes.
items--spacer--largeIncreases the top and bottom space between items. Useful in combination with list classes.