Bootstrap integration with Codeigniter.

This lesson will help you to understand how to integrate bootstap with Codeigniter.

First remember this is just a skelton example.

Ok..Lets go.

Step 01 :

Download Bootstrap form it's official website.

Step 02 :

Create a folder called 'assets' in /wamp/www/CodeIgniter directory[In WAMP server].
N.B CodeIgniter in above directory is the name of my project.
Unzip the above downloaded folder and copy all(css,js,fonts folders) the folders inside that folder.
Paste them inside the assets folder.

Please check that the path is correct to bootstap.

\wamp\www\CodeIgniter\assets\css
\wamp\www\CodeIgniter\assets\fonts
\wamp\www\CodeIgniter\assets\js




Step 03 :

Open the config.php in /CodeIgniter/application/config directory,

And edit it as

$config['base_url'] = 'http://localhost/codeigniter/';

Step 04 : Create the controller as boots.php and save belows in  it.

<?php

class boots extends CI_Controller
{
public function getBoots()
{
$this->load->view('samplebootstrap');
}

}

?>

Step 05 :

Create the view file as samplebootstrap.css and save beloes in it.

<link  href="<?php echo base_url('assets/css/bootstrap.css');?>" rel="stylesheet">
<link  href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet">

<div class="container">

<?php echo form_open("boots/getBoots",'class="form-inline"'); ?>
</br>
<legend>Enter the data </legend>
</br>

<div style="margin-left:30%;margin-top:20px;" >

<div class="form-group">
<label for="employeeno" class="control-label">Employee No :</label> <input type="text" name="name" class="form-control" />
</div>


</br>

</br>
<div class="form-group">
<label for="age" class="control-label">Age :</label> <input type="text" name="age" class="form-control" />
</div>
</br>
</br>
<input type="submit" name="name" class="btn btn-primary"/>

</div>

<?php echo form_close(); ?>
</div>

Step 06 :

Now That is all go to the web browser and type

http://localhost/codeigniter/index.php/boots/getBoots

You will see a form which has applied the bootstrap.

Dear sir ,

I am getting error . I have tried your code with the exact file path as you mentioned in your code.
How to solve this php error

A PHP Error was encountered
Severity: Error
Message: Call to undefined function base_url()
Filename: views/samplebootstrap.php
Line Number: 1
Backtrace:

You need to load the CI url_helper.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

"<link href="<?php echo base_url('assets/css/bootstrap.css');?>" rel="stylesheet">
<link href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet">"

This is unnecessary. I would recommend to load just the minified version from bootstrap css and js files too.

In step 5, there's this:

Code:

<link  href="<?php echo base_url('assets/css/bootstrap.css');?>" rel="stylesheet">
<link  href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet">

I'm convinced that this loads exactly the same css code twice. The .min.css is just a 'minified' version of the normal css file, isn't it?

If you're looking for a simple and easy way to implement bootstrap in your project, i made a simple library called Attire, witch is an implementation of Twig template engine and Sprockets-PHP asset manager framework for CodeIgniter 3.0x.

This is the documentation link: http://davidsosavaldes.github.io/Attire/

If you get an base_url error then it means you need to load the url_helper

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

load url helper first

$this->load->helper('url');

I always autoload the url_helper only because it is used a lot.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Hello sir,
I have use the guide you explained, but the problem is with glyphicon it dosent show glyphicon I dont know what to do?

Hello sir,
I have use the guide you explained, but the problem is with glyphicon it dosent show glyphicon I dont know what to do?

There is a working CI/Bootstrap framework on github with some other features.

https://github.com/aralsoft/CI-Bootstrap

Thank you very helpful!