Skip to main content

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

Grid

Class NameDescription
grid--2-columnsCreates two columns grid.
grid--3-columnsCreates three columns grid.
grid--4-columnsCreates four columns grid.
grid--5-columnsCreates five columns grid.
grid--6-columnsCreates six columns grid.

Bootstrap Card Columns

Class NameDescription
column--2-columnsCreates two columns masonry like list. See Bootstrap Card columns.
column--3-columnsCreates three columns masonry like list. See Bootstrap Card columns.
column--4-columnsCreates four columns masonry like list. See Bootstrap Card columns.

Masonry

Class NameDescription
masonry--2-columnsCrete two columns masonry list. Applicable field: CSS class
masonry--3-columnsCrete three columns masonry list. Applicable field: CSS class
masonry--4-columnsCrete four columns masonry list. Applicable field: CSS class

List

Class NameDescription
listCreates a list of items.

Responsive variations

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

Example:
grid--3-columns
grid-sm--3-columns
grid-md--3-columns
grid-lg--3-columns
grid-xl--3-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 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 NameDescription
no-bordersRemovers borders from teasers
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.