How to add Bootstrap 4 in codeigniter 4

How to add Bootstrap 4 in codeigniter 4

We have many frameworks nowadays to create our layout/templates/webpages, but Bootstrap is the worlds best and powerful front-end framework, we always use it when you need responsive web pages. While working on Codeigniter 3 we always create one extra folder assets and keep all our CSS and js files in that folder, some people keep the assets folder in the application folder and some people create the folder in the root of the project.

But in Codeigniter 4 you have a public directory/folder so you don’t need to create the extra folder to keep the extra CSS and js files, Codeigniter 4 introduced many new concepts in the latest version of the CI i.e the index.php file is now available in the public directory/folder.

Adding Bootstrap in Codeigniter is very easy, you have two ways to add the Bootstrap files one is with CDN and second is by downloading the files don’t worry we use both methods to add the bootstrap in our Codeigniter project but before doing this you just need to download the Codeigniter 4 from the GitHub.

Step 1: Copy the CDN from bootstrap.

CDN from bootstrap

Step 2: Open your view and add the Bootstrap CDN.

add the Bootstrap CDN

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>

<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>

Step 3: Check out the console, if your console is empty(without error) that means you have successfully embedded the bootstrap in your project.

Check out the console

This is the first way to add the bootstrap files in your project and I also recommend this way to use the bootstrap, the second method is listed below.

Step 1: Download the bootstrap source files.

Download the bootstrap source files

Step 2: Go to the public directory/folder and keep the zip file which you have just downloaded here, now unzip it and rename your folder bootstrap.

public directory

Step 3: Open your view and add the CSS and JS  files of the Codeigniter [you have to add jquery separately ]

<link rel=”stylesheet” href=”<?php echo base_url(‘bootstrap/css/bootstrap.css’)?>” type=”text/css”>

<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>
<script type=”text/javascript” src=”<?php echo base_url(‘bootstrap/js/bootstrap.js’)?>”><</script>

 

Step 4: Now check your console, if you have an empty console that means you have successfully embedded the bootstrap in your project.

Check out the console

Now, what happens if I use the wrong file name or directory in this example I am using the wrong files name bootstrapssss.css (This file does not exist).

wrong file name

Conclusion

Front-end is the part of every website/web application and people always use bootstrap in their projects. adding bootstrap in Codeigniter 4 is not hard but it’s different from Codeigniter 4 because we have public directory in Codeigniter 4, there are two ways exist to add the bootstrap in your project. 1. Using the bootstrap CDN and by 2. Download the bootstrap 4 files. You can also debug your code by using the browser console (if you used the wrong file name or directory).

shakzee
administrator
First, let me first introduce myself. 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. Web design and development constantly developing every day with new trends, ideas, and innovations. That’s why nowadays you need to learn and keep yourself up-to-date with everything daily and that’s what I do and that is something that I love because I am so passionate about it! When I have spare time I use to give time to my web development community. Teaching kids, managing online programming groups, attending a conference and making blogs, I like keeping myself up-to-date and engaged in my field always. I have my expertise in (PHP, Codeigniter, Laravel, Bootstrap, WordPress, SQL, Query Optimization, Data Science and Design Patterns). Anyone who wants to learn and know anything about web development and design I am always available for that and would love to help out. I always love to be looking out for new things and that is why I spend a lot of my time learning new techniques and helping other people learn web development and design through various groups and web development tutorials as well as online courses.

Leave a Reply

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

WhatsApp chat