/admin/structure/views
)Setting up the View
Class Name | Description |
---|---|
grid--2-columns | Creates two columns grid. |
grid--3-columns | Creates three columns grid. |
grid--4-columns | Creates four columns grid. |
grid--5-columns | Creates five columns grid. |
grid--6-columns | Creates six columns grid. |
Class Name | Description |
---|---|
column--2-columns | Creates two columns masonry like list. See Bootstrap Card columns. |
column--3-columns | Creates three columns masonry like list. See Bootstrap Card columns. |
column--4-columns | Creates four columns masonry like list. See Bootstrap Card columns. |
Class Name | Description |
---|---|
masonry--2-columns | Crete two columns masonry list. Applicable field: CSS class |
masonry--3-columns | Crete three columns masonry list. Applicable field: CSS class |
masonry--4-columns | Crete four columns masonry list. Applicable field: CSS class |
Class Name | Description |
---|---|
list | Creates a list of items. |
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.
Class Name | Description |
---|---|
no-borders | Removers borders from teasers |
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. |