• Translate


Tutorial Installing Bootstrap Templates In Codeigniter

Tutorial Web Design |


Tutorial Installing Bootstrap Templates In Codeigniter

Bootstrap is one of the HTML and CSS framework that jQuery has a JavaScript framework. Many web designers use bootstrap as the framework they use because of its elegant looks. If you open a wapplyzer, there are 1,126,686 websites that use bootstrap on April 26, 2016 as the framework. With that also, there are many template - website template created by web designer either free or paid. Based on that, many late-stage students are using CI and bootstrap or people learning about CI that uses bootstrap for how it looks.

After installing CodeIgniter please download the bootstrap template here I use Bootstrap Zero. Just follow the steps:

► In the CI folder create one folder and name it assets.
In the CI folder create one folder and name it assets
► Then locate the downloaded template file and extract it. In the extracted folder there are CSS and JavaScript folders as well as other supporting files such as images.
template file
► Move the folders and supporting files into the assets folder that we have created in the folder or the directory CodeIgniter. Files with html or php extensions are not moved. Then open your text editor (Text editor favorite author is Sublime Text 3). Open the autoload.php file located on Codeigniter/application/config. Then on line 92 or search $autoload[‘helper’] = array(); In the array add the URL helper $autoload['helper'] = array('url');


► Open the welcome_message.php file located on Codeigniter/application/views. File welcome_message.php is the initial view after installing CodeIgniter. Then remove the existing tags except the PHP script at the top of the file <?php defined(‘BASEPATH’) OR exit(‘No direct script access allowed’);?> open one of the views of the template we downloaded in this case the author chose login.html which will be the initial view when run.

► Copy the tag on the file and move it to welcome_message.php. Adjust some things like the titles. Then look for tags that contain tags to load css and JavaScript <link href=”css/bootstrap.min.css” rel=”stylesheet”> And change it to <link href=”<?php echo base_url(‘assets/css/bootstrap.min.css’)?>” rel=”stylesheet”> Base_url is one of the helper URL functions and the url is added assets because folders and supporting files are placed in the assets folder.
contain tags to load css and JavaScript

► Here's the view after loading or URL link changed.

Here's the view after loading or URL link changed.

In addition to CSS files, base_url can also be used to call JavaScript files and image, video and sound files that are supportive in creating views. The above can be used for all frameworks like Zurb Foundation, Skeleton, Gumby and our own custom made CSS and JavaScript files.

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box