Create a View From Scratch

  1. Under Administration toolbar choose 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 bottom of the page.
  2. Click on the Add dropdown menu and choose Block.

  1. Setting up the View

    1. Click on the Fields link, change the row style to Content and choose a teaser layout form the list. See available teaser layouts.
    2. Click on the Unformatet List and change it to HTML List.
    3. Enter a CSS class from a Row Style Classes in the Wrapper class field to defined the view row style.
    4. Adjust the view filters and sort criterias.
    5. Adjust the number of items and choose a pager type.
    6. Choose name and category for the block.

Row style classes

Class Name Description
grid--2-columns Creates two columns grid.
grid--3-columns Creates three columns grid.
grid--4-columns Creates four columns grid.

Class Name Description
list Creates classical list items.

Responsive variations

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


This means that you can combine row classes in the Wrapper filed to transform the view depending on display width.
For exaple, if you use this three classes in the Wrapper field list grid-md--2-columns grid-xl--4-columns, you will have a list of items on a mobile devices, 2 columns grid on tablets and 4 columns grid on large displays.

Utility Classes
Class Name Description
no-gutters Removes the gutter from the list. You can combine this class with any grid--N class.
equal-height Combine this class with grid--N classes to make an equal height on a Teaser Cards in the grid.
items--separator--border Creates bottom border on list items.
items--spacer--tiny Decreases the top and bottom space between items. Useful in combination with list classes.
items--spacer--large Increases the top and bottom space between items. Useful in combination with list classes.