> For the complete documentation index, see [llms.txt](https://learnphp.gitbook.io/learnphp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnphp.gitbook.io/learnphp/codeigniter/bootstrap-theme-integration-into-codeigniter-4.md).

# Bootstrap Theme Integration Into CodeIgniter 4

https\://www\.phpflow\.com/php/bootstrap-theme-integration-into-codeigniter-4/

## Bootstrap Theme Integration Into CodeIgniter 4

{% file src="/files/-LzzQ56AS37bEAelRYbv" %}

Last Updated On: [January 18, 2020](https://www.phpflow.com/php/bootstrap-theme-integration-into-codeigniter-4/)| By: [Parvez](https://www.phpflow.com/author/admin/)

The codeigniter 4 has been launched.I am going to discuss **How to Integrate Bootstrap Theme With Codeigniter 4**.I will create codeigniter layout using bootstrap ace theme.

This codeigniter tutorial help to create custom layout.This is a master template which will use to render child view file, which has partial header, footer and sidebar file.I have already shared [Creating Template in CodeIgniter 3 Using Bootstrap Theme](https://www.phpflow.com/php/creating-template-codeigniter-3-using-bootstrap-theme/).

I am taking same above bootstrap theme and functionalities, I ll integrate bootstrap theme and create layout in CodeIgniter 4.The layout and file structure is too different from codeigniter 3 to code 4.

I am assuming – You have configured and installed CodeIgniter 4 into your system , if not configured yet, please install and configure codeigniter 4 using [Install & Configure Codeigniter 4 In XAMPP](https://www.phpflow.com/php/how-to-install-configure-codeigniter-4-in-xampp/).

![codeIgniter-theme](https://www.phpflow.com/wp-content/uploads/2017/03/codeIgniter-theme.png)

#### Pre-Requisites For CodeIgniter 4 Template Tutorial

There are following libs and software need to configured-

* Download [CodeIgniter 4](https://codeigniter.com/en/download).
* Download Bootstrap Theme [Bootstrap Admin Theme](https://github.com/bopoda/ace).
* WAMP, XAMPP or a Live Server
* Enable `mod_rewrite` module(for Apache)

### Example Of Codeigniter Templates Using Bootstrap Admin Theme

The **bootstrap admin theme** is the popular bootstrap admin theme.Its a open source free bootstrap theme.You can change theme as per your application need.\
I am creating `codeigniter-blog` folder into `xampp/htdocs/` directory and moved all files and directories from CodeIgniter 4 downloaded folder to `xampp/htdocs/codeigniter-blog` folder.

#### I Am Using Following Files And Folder

We will create and modify following CI files.

* **app/Views/default\_layout.php :** This file will use to create HTML layout using `template.php` class.
* **app/Config/Routes.php :** This file will use to define all application routes here.
* **app/Config/app.php :** This file will use configure application level params.
* **app/Views/about.php :** This file will have home page content.
* **app/Views/home.php :** This file will have about page content.
* **app/Controllers/Home.php :** We will create a new Home controller, This file will have all handler method for routes.

**Modify app.php file**\
We will modify configuration parameters in `app/Config/app.php` file, I made following changes into this file:

| 1 | $config\['base\_url'] = '<http://codeigniter-blog/>'; |
| - | ----------------------------------------------------- |

#### Create Default Layout In CodeIgniter 4

We will create a `default_layout.php` view file into the `app/Views/` folder.This file will contains all js, css libraries files with html inner container variable.

| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163 | \<!DOCTYPE html>\<html lang="en">\<head>                \<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />                \<meta charset="utf-8" />                \<title>Test CI Application - \<?php echo $title;?>\</title>                \<meta name="description" content="overview \&amp; stats" />                \<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />                \<!-- bootstrap & fontawesome -->                \<link rel="stylesheet" href="\<?php echo base\_url("css/bootstrap.min.css");?>" />                \<link rel="stylesheet" href="\<?php echo base\_url("font-awesome/css/font-awesome.min.css");?>" />                \<link rel="stylesheet" href="\<?php echo base\_url("css/ace.min.css");?>" class="theme-stylesheet" id="theme-style" />                \<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Tangerine>" />                \<!-- page specific plugin styles -->\</head>\<body class="no-skin"> \<div id="navbar" class="navbar navbar-default"> \<div class="navbar-container" id="navbar-container"> \<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar"> \<span class="sr-only">Toggle sidebar\</span>  \<span class="icon-bar">\</span>  \<span class="icon-bar">\</span>  \<span class="icon-bar">\</span> \</button>  \<div class="navbar-header pull-left"> \<a href="/" class="navbar-brand"> \<small> \<i class="fa fa-leaf">\</i> Sample CI Example \</small> \</a> \</div> \<div class="navbar-buttons navbar-header pull-right" role="navigation"> \<ul class="nav ace-nav"> \<li class="light-blue"> \<a data-toggle="dropdown" href="#" class="dropdown-toggle"> \<img class="nav-user-photo" src="\<?php echo base\_url("avatars/user.jpg");?>" alt="Admin Photo" /> \<span class="user-info"> \<small>Welcome,\</small> Admin \</span>  \<i class="ace-icon fa fa-caret-down">\</i> \</a>  \<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> \<li> \<a href="#"> \<i class="ace-icon fa fa-cog">\</i> Settings \</a> \</li>  \<li> \<a href="#"> \<i class="ace-icon fa fa-user">\</i> Profile \</a> \</li>  \<li class="divider">\</li>  \<li> \<a href="#"> \<i class="ace-icon fa fa-power-off">\</i> Logout \</a> \</li> \</ul> \</li> \</ul> \</div> \</div>\<!-- /.navbar-container --> \</div> \<div class="main-container" id="main-container"> \<div id="sidebar" class="sidebar responsive"> \<ul class="nav nav-list"> \<li class="\<?php echo $title == 'Home' ? 'active' : '' ?>"> \<a href="/"> \<i class="menu-icon fa fa-tachometer">\</i> \<span class="menu-text"> Dashboard \</span> \</a>  \<b class="arrow">\</b> \</li> \<li class="\<?php echo $title == 'about' ? 'active' : ''?>"> \<a href="/about"> \<i class="menu-icon fa fa-list-alt">\</i> \<span class="menu-text"> About us \</span> \</a>  \<b class="arrow">\</b> \</li> \</ul>\<!-- /.nav-list --> \<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> \<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right">\</i> \</div> \</div> \<div class="main-content"> \<div class="main-content-inner"> \<div class="breadcrumbs" id="breadcrumbs"> \<ul class="breadcrumb"> \<li> \<i class="ace-icon fa fa-home home-icon">\</i> \<a href="/">Home\</a> \</li> \<?php if($title != 'Home') :?> \<li class="active">\<?php echo $title;?>\</li> \<?php endif;?> \</ul>\<!-- /.breadcrumb -->  \<div class="nav-search" id="nav-search"> \<form class="form-search"> \<span class="input-icon"> \<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input1" autocomplete="off" /> \<i class="ace-icon fa fa-search nav-search-icon">\</i> \</span> \</form> \</div>\<!-- /.nav-search --> \</div>  \<div class="page-content"> \<div class="row"> \<div class="col-xs-12"> \<!-- PAGE CONTENT BEGINS --> \<?= $this->renderSection('content') ?> \<!-- PAGE CONTENT ENDS --> \</div>\<!-- /.col --> \</div>\<!-- /.row --> \</div>\<!-- /.page-content --> \</div> \</div>\<!-- /.main-content --> \<div class="footer"> \<div class="footer-inner"> \<div class="footer-content"> \<span class="bigger-120"> Copyright � phpflow\.com. All rights reserved. \</span> \</div> \</div> \</div> \<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> \<i class="ace-icon fa fa-angle-double-up icon-only bigger-110">\</i> \</a> \</div>\<!-- /.main-container --> \<!-- basic scripts --> \<script type="text/javascript" src="\<?php echo base\_url("js/jquery.min.js");?>">\</script> \<script src="\<?php echo base\_url("js/bootstrap.min.js");?>">\</script>\</body>\</html> |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

#### Created Home Controller In CI 4

We have created default layout file, Let’s create handler method into the this file, I am creating `Home.php` file into the `app/Controllers` folder.Created a `index()` method into it.Please add below code into `Home.php` controller file.

| 1234567891011 | \<?php namespace App\Controllers; class Home extends BaseController{ public function index() { $data = array(); return view('home'); }} |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------- |

#### Create Home View File

We have defined home view file path in `index()` controller method.Now we will create a new `home.php` view file into `Views/` folder.Please add below code into this file,

| 1234 | \<?= $this->extend('default\_layout') ?>\<?= $this->section('content') ?>    \<p>Lorem Ipsum is .... Lorem Ipsum.\</p>\<?= $this->endSection() ?> |
| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------- |

### Codeigniter Pages Using Template

Let’s create a new page into codeigniter 4 tutorial, This page will have same above custom page layout.Create a *about page* into `/Views` folder, This page will render on the same page layout.We just send view to the Default Layout file and rest of theme structure same as home.\
**Step 1:** Create a new entry route into `app/Routes.php` file.

| 1 | $routes->get('/about', 'Home::about'); |
| - | -------------------------------------- |

We have mentioned `home` is controller and `about` is a method.

**Step 2:** Created about method into `Home.php` controller file.

| 123456 | public function about() { $data = array(); return view('about'); } |
| ------ | ------------------------------------------------------------------ |

**Step 3:** Created `about.php` view file into `views` folder.

| 1234 | \<?= $this->extend('default\_layout') ?>\<?= $this->section('content') ?>    \<p>About page -Lorem Ipsum .... Lorem Ipsum.\</p>\<?= $this->endSection() ?> |
| ---- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |

### Conclusion

This is a codeigniter beginners tutorial help to integrate beautiful bootstrap theme with Codeigniter 4 using Layout.You can also integrate simple HTML theme using this codeigniter tutorial.We have created new controller and view file and render them using template.
