---
title: "Styles"
description: "Styles"
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-10-20"
last_update: "2026-10-20"
time_minutes: 2
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig-components/styles"
---

# Styles

The components are HTML with the classes of Bootstrap 5, the icons of Font Awesome 6 and the CSS of the package. A page that shows them needs the three.

## What the Page Needs

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="https://www.derafu.dev/path/to/components.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
```

The CDN is one way to have Bootstrap and Font Awesome; use the one that your application uses.

## The CSS of the Package

`resources/css/components.css` imports the CSS of every component, which is in `resources/css/components`, one file per component (`block-alert.css`, `block-card-grid.css`...). Link `components.css` after Bootstrap and the `@import` of it are resolved relative to its path, so the directory `components` has to be next to it.

How the file gets to the page depends on the application: reference it in the CSS of the application (`@import '../../vendor/derafu/twig-components/resources/css/components.css';`), copy the directory to where the application serves its assets, or give it to the asset system that the application has.

## Customizing

The CSS of the components reads the CSS variables of Bootstrap (`--bs-primary`, `--bs-body-color`, `--bs-border-color`...), so the theme of Bootstrap, and the variables that you set for it, are the ones of the components.

## The JavaScript

Twelve components use the JavaScript of Bootstrap through `data-bs-*` attributes, so they need `bootstrap.bundle.min.js` in the page:

`block-accordion`, `block-alert`, `block-gallery`, `block-header`, `block-image-grid`, `block-modal`, `block-offcanvas`, `block-scrollspy`, `block-table`, `block-tabs`, `block-testimonials` and `block-toast`.

The others are only HTML and CSS.



---
Last updated on 20/10/2026