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.

Attached Files

Thumbnail(s)
   

That is my style with Codeigniter . Start with simple and ends in deep.

thank you , note : File names must be capitalized. For example: class Boots - class Boots.php

Thank you for appreciating my post and for your advice....

That is my style with Codeigniter . Start with simple and ends in deep.

you should put your code in a [ php ][ /php ] tag

like this example:

PHP Code:

<?php

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

}

?>

You forgot to load jQuery at the bottom of your template. Bootstrap requires jQuery.

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

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Maybe a futile issue, but don't use the html-tag </br>. Although most browsers are very forgiving when they meet old-style tags, it's better to follow the current html conventions. Html-tags that are not a pair, but stand alone, must get the closing slash before the closing angle bracket.
So, <br /> is better than </br>, because </br> presumes that there's also a <br> starting tag.
Same goes for <input [options] />, <hr /> and <link />

The "for" attribute in a label is a reference to an "id" attribute on an input (or other form control), so none of the values used in the "for" attributes of your form's labels are valid.

Also, you have:

PHP Code:

$this->load->view('samplebootstrap'); 


Then you state

Create the view file as samplebootstrap.css

Passing 'samplebootstrap' to $this->load->view() isn't going to load 'samplebootstrap.css', and since servers often only run PHP on files ending in '.php', it's likely that some people would never be able to load a .css file as a view anyway.

Honestly, when writing a tutorial, I would recommend a few key points:

• If you're not going to walk someone through installation, state up front that you're assuming they've already gotten CodeIgniter installed and working (maybe link to the docs), then do nothing in your tutorial which would potentially break their installation (like step 3 in your tutorial) unless you warn them that the step in question might cause issues.
  
• When giving URLs, use http://localhost as the root (or something like http://yourproject, http://example, etc.). Using a subdirectory in your URL may be confusing for some users, and, in some environments, configuring that URL can be painful.
  
• When giving file/directory paths, use relative paths starting with /application and /system (and maybe /public, or in your case /assets, but you may want to give a short explanation of what that means),  and let them figure out the rest. Every path you post in your tutorial requires me to parse out \wamp\www\CodeIgniter\ as your web root (I'm assuming), and even an all-Windows audience isn't going to be an all-WAMP audience. I certainly don't want people to have to parse through /var/www/mysite/ at the beginning of all of my paths.
  
• Start by building the code you're trying to demonstrate in the tutorial, then use that code in the tutorial, and, if possible, find someone who might be willing to follow the tutorial to see whether they have any problems/questions.
  

Finally, and this may not be as important as some of the other points for most users (and it goes for everyone writing code for web servers), take some time to learn how to write HTML properly, rather than just well enough that it works. The HTML standard moves very slowly (CSS and JavaScript a little more quickly, but still at a pace most developers can manage if they don't need to get down to the nitty-gritty details). HTML5 has been a W3C Recommendation for almost a year now, which is as close to an official standard as HTML gets, and was in various draft forms for 6 years before that. HTML 4.01 became a Recommendation on Christmas Eve in 1999, and the </br> tag mentioned by Wouter60 was forbidden in HTML 4.01. The HTML5 spec goes further to point out that the br element should not be used in the fashion used in your example.

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

...
...

Thanks for taking the time out to write a detailed response with constructive criticism.

While OP has the exact "walk-through" I was looking for it is lacking in parts.

I think entry/beginner level tutorials should contain the content you suggested to keep in mind that some of us have only started our programming/development careers.

TLDR: Your insight is appreciated - Interested in me hiring you for a few hours as a PHP tutor? 

TLDR: Your insight is appreciated - Interested in me hiring you for a few hours as a PHP tutor? 

I appreciate the appreciation. You could buy a copy of Practical CodeIgniter 3 for about half of what I'd charge for an hour. I would get a lot less money, but you would get a lot more than I could really help you with in an hour (granted, it still might not be what you're looking for).

One of the reasons I'm willing to help people out on the forums (and work on a book for what is likely to be a lot less than I would normally charge per hour) is that whatever I put out there is likely to help more people than anything I do in private.

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

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: