How to add CSS and JS files in codeigniter 4

add css and js files in codeigniter-4

Working on Codeigniter 4 is very easy because of the flexibility, Codeigniter introduced a lot of new things in Codeigniter 4 version like modeling Data, Testing, Command line usage, Built-in pagination, View Renderer, View Layouts, Localization, View Cells and  Public directory to store CSS and JS files.

In Codeigniter 3 we always keep our CSS files in separate folders i.e assets/CSS OR assets/js, but Codeigniter 4 is providing now the public folder where you can keep your all images, CSS, js and other files. So now you need to create your CSS and js folder and keep the files in those folders. Download the Codeigniter 4 version from the official website of Codeigniter 4

Now create a folder named CSS in the public directory, and now create a style.css fine and keep this file in the same folder which you have just created, Now create a js folder in the public directory and once again create a custom.js file and keep the file in the same directory which you have just created.

css folder in public direcotry in codeigniter 4

Now create a controller name Home, and after that create a view named home and make sure to keep the controller folder in the app/controllers folder and also the view file in the app/view folder.

home controller and home view

Now add this code in the view which you have just created, i consider you have already set the base_url=”your Project Name”

<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Add css and js files in codeigniter 4</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/style.css'); ?>">
<h1>How to add css and js files in codeigniter 4</h1>
<script type="text/javascript" src="<?php echo base_url('js/custom.js'); ?>"></script>


Now access the home controller.


access the home controller


Add some CSS and js code in your CSS and js files, I am adding this code in custom.js file alert(‘working..’); and styling in style.css file h1{color: olive;}


checking css and js code


The console section is clear because everything is working fine, but if you give the wrong folder name or the fileName your browser always shows the error in the console section, now I am using the wrong fileNames for CSS and js  “styleeee.css” and this fileName as js customdfdfdf.js and definitely your browser will give you the error.


stynax error

My Name is Shehzad Ahmed and I am a full-time developer with over 7+ years of experience. In that time, I’ve worked as a developer with many big and small firms and was teaching web design and development skills to many keen learners and by the time passes I’ve found a great passion and potential on myself as a teacher on this particular field and now I am a full-time teacher and working as a freelancer.


  • Marc
    August 22, 2019

    I’ve tried your code with CodeIgniter version 4.0.0-beta.4 and it doesn’t work.
    a) base_url() complains when using ‘ ‘ and wants ” ” for argument;
    b) what I try as path even the simplest “/css/style.css” which mimicks the icon call of the welcome message, nothing is loaded!!!
    I really do not understand what can happen!

Leave a Reply

Your email address will not be published. Required fields are marked *

WhatsApp chat