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.

  • The Modeling Data
  • Testing
  • Command-line usage
  • Built-in pagination
  • View Renderer
  • View Layouts
  • Localization
  • View Cells
  • Store CSS and JS files in a public directory.

In Codeigniter 3, we always keep our CSS files in separate folders, i.e., assets/CSS OR assets/js. Still, Codeigniter 4 is providing now the public folder where you can keep all your images, CSS, js, and other files. So far, you need to create your CSS and js folder and save 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">
<head>
<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'); ?>">
</head>
<body>
<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>
</body>
</html>

 

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. Still, 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

shakzee
administrator
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.

Comments

  • Marc
    August 22, 2019

    Hi,
    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!
    Regards,
    Marc

    • shakzee
      April 18, 2020

      Have you check the app/config.php file where you always set the base_url in Codeigniter.

  • Thierry Parlier
    April 20, 2020

    Same problem for me with the css. Can’t figure it out. All templates i’ve seen as example use cdn links for loaded frameworks like bootstrap that work but none with custom css. For custom css, i’ve tryied with ‘http://link.test/public/assets/style.css””, “https://link.test/public/assets/style.css””, “/public/assets/style.css” but each time it doesn’t work. If i check the error message, it’s seems they are processed but the router and the link to the file is not admit. If you put the file in the plugins folder, they works…

Leave a Reply

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

Featured Courses

Learn Web Development and web designing in few months from shakzee with real-world experience. Get up to 80% discount!