I have developed website using CodeIgniter that uses MySQL to populate a results page. I would now like to improve all the pages appearances and most places recommend using Bootstrap. I have tried to add Bootstrap to my CodeIgniter project but with no success.
Does anyone know of an up-to-date guide I could follow to complete this?
Thanks
A simple way would be to use Bootstrap CDN. For CSS, simply include this line in the <head> section of every webpage (somewhere in your view files, depending on how you have structured them):
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
Bootstrap's plugins depend on jQuery, so you'll need to include jQuery before Bootstrap's JavaScript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Simple example page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your great site!</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>Alternatively you could host the files on your web server. Upload the relevant files to a publicly accessible directory. I'm going to assume that they are in an assets folder, in your web root, like this:
+-- public_html
| +-- index.php
| +-- assets
| | +-- css
| | | +-- boostrap.css
| | +-- js
| | | +-- bootstrap.js
| | | +-- jquery.js
| (other files/directories...)
To include them in your view files, you can link them like this:
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
You'll need to have loaded the URL Helper to use the base_url() function.
First time using PHP CodeIgniter , Bootstrap and Bitnami mampstack. ( All develope code in local notebook)
1. To extract the file CodeIgniter 3.x and Boostrap 3.x(Twitter) Here my directory :
/Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstra
/Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstrap/application
/Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstrap/assets
2.Modification (Add)
a. application/controller/Welcome.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller
{
public function __construct() {
parent::__construct();
$this->load->helper('url');
public function index(){
$this->load->view('welcome_message');
}
}
b.application/views/welcome_message.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery.min.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
</head>
Open the config.php in /CodeIgniter/application/config directory,
And edit it as:
$config['base_url'] = 'http://localhost/your_folder/';
If you tried to remove the 'index.php' from url like in the official example then you should try this
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [NC,L,QSA]
</IfModule>
