Adding CSS classes to templates allows you to target templates or parts of the template in your CSS files.
For example, if you want a different background colour per content type, then you need a way to identify each content type with a CSS selector. By default the node template includes a class for each content type, making it easy for you to target each one. You’ll see this in action later on in this tutorial. You will also learn how to create your own classes.
Adding a single class
To add a class, pass in the class name as an argument to the
Adding multiple classes
To add multiple classes to an element, create an array with all of the class names. To create an array in Twig, use the
set tag followed by the name of the array.
And then pass that array to the
Classes are merged with existing classes
If there are any existing classes, the new classes will be merged. Therefore, all the classes will be added to the element.
Removing a class
You may decide that you’d like to remove one of the existing classes. To do that, you can use the
Two real world examples
In your code editor, head over to the templates in the Classy theme (
field/time.html.twig. This is an example of a single class being added to the time element.
Multiple class array
layout/region.html.twig. The classes array:
In this example, there are two classes. The first one is a simple one called ‘region’. The second one looks more interesting:
Let’s break this down:
'region-': a simple sting
~is a Twig operator that concatenate two strings together
region: the region variable. It will be replaced with the actual region (e.g. block)
|: A pipe that separates a variable (
region) from a filter (
clean_class: a filter that will remove invalid characters from HTML classes
If you have a block in the header region, then the above code will add a class called
<div class="region region-header">
The final example is the classes added to the article element in the node template.
content/node.html.twig. This is another example of multiple classes.
As mentioned in the example at the top of this tutorial, the node template will have a class for the content type, making it easy for you to specify styles on for specific content types. That is defined with this line:
A content type is a type of bundle in Drupal. So node.bundle will return the content type machine name. Just like the field example, this is passed through the
If you are viewing an article node, the class added to article will be:
There are also four conditions that check if something exists before adding the class. For example:
node.isPromoted() ? 'node--promoted',
This checks if the node is promoted to the frontage. If it is, it adds the
not node.isPublished() ? 'node--unpublished',
This checks if the node is not published. If it isn’t published, it adds the
Hopefully this tutorial has helped you understand how you can add classes to Twig templates. I encourage you learn from more examples by having a look at more templates (in the Classy theme, or another theme).