By the end of this video you can style a view — cards, padding, rounded corners, a responsive grid — using W3.CSS class names typed into the Views UI, with no stylesheet of your own.
The three places Views accepts a class
- Advanced → Other → CSS class. Adds class names to the whole display wrapper. Useful for a background or spacing around the entire listing.
- Format → Settings → Row class, with the companion checkbox Add views row classes. This is where the visual work usually happens.
- Field → Style settings → Customize field HTML → CSS class. One field at a time, for a badge or a price.
The validation rule that stops people
Drupal validates the display-level field and rejects anything else with "CSS classes must be alphanumeric or dashes only." Every W3.CSS name passes that test, and several can be separated by a single space: w3-card-4 w3-white w3-padding-16, w3-round-large, w3-hover-shadow.
A detail specific to this theme
W3CSS Theme overrides views-view-unformatted.html.twig and already puts w3-row on every row, adding the standard views-row class only when Add views row classes is ticked. Because each row is a W3.CSS row, putting w3-third or w3-half in Row class turns an ordinary unformatted list into a responsive grid that collapses on a phone by itself.
When a class is not enough
The theme's preprocess adds a path-view-<view id> class to the <body> tag on a view page, so one view can be targeted from CSS without touching the others. It also registers a page template suggestion per view: a view whose machine name is recent_video can have its own page--recent-video.html.twig.
All of this works on Drupal 9 through 12, the range declared in the W3CSS Theme info file. If you would rather assemble the same layouts as editable content instead of view configuration, that is what W3CSS Paragraphs is for. Next step: open one existing view, add w3-card-4 w3-padding-16 to Row class, and save.
If you would rather have this set up for you, Drupal theming services covers the work, and recent projects show the result.
