Adding CSS and JS to our component

Joomla! comes with the popular frontend toolkit Bootstrap 5. This toolkit provides several CSS classes and JavaScript files to add common features and styles to our component.

We can use Bootstrap CSS classes directly in our component by just adding them to the markup of the file. Let’s transform our list of projects in a grid by simply using Bootstrap classes. Edit the src/component/site/tmpl/projects/default.php file, and add the class attribute to the div elements containing the elements, as per the following code:

src/component/site/tmpl/projects/default.php

<div class="cards row row-col-3">
<?php foreach ($this->items as $item) : ?>
    <div class="card col m-1">
        <h2>
            <?php echo $item->name; ?>
       ...