Bootstrap is a widely used responsive html framework. It is based on grid layout and is easier to understand and easier to implement. Bootstrap is an awesome framework to use in web projects. You can read more here
twitter bootstrap.
Download the latest version of Bootstrap and extract it. There will be three folders namely
css, fonts and js. css folder contains the minified and uncompressed .css files, fonts folder contains icon files and js folder contains the minified and uncompressed .js files.
Now create a folder called
assets in the codeIgniter root folder in the server. It will be like:
C:/Program files/wamp/www/codeIgniter/assets/. Copy the three folders css, js and fonts that we downloaded into the assets folder. If you are working in ubuntu, you might want to change permission of the newly created assets folder and its subfolders like this
chmod 755 -R /var/www/codeIgniter/assets.
Now create a
templates folder in
application/views and create two files
header.php and
footer.php in it. The beauty of this setup is we can include this header and footer in every page and in case any editing is required we need to edit in one file.
Put these in the
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap example</title>
<link href="<?php echo base_url("assets/css/bootstrap.min.css"); ?>" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url("assets/css/font-awesome.min.css");?>">
</head>
<body>
<div id="content">
Put these in the footer.php
</div>
<!-- Scripts -->
<script src="<?php echo base_url("assets/js/jquery-1.10.2.min.js");?>"></script>
<script src="<?php echo base_url("assets/js/bootstrap.min.js");?>"></script>
</body>
</html>
It is important to use the function
base_url() to output the location of files. It ensures cross-platform compatibility.
Now create a folder called
pages in
application/views folder and create a file
page_one.php and put the code in it. You can have your own bootstrap code in it.
page_one.php
<div class="container-fluid text-center">
<h1>Hello, world!</h1>
<h3><p class="text-center">This was a simple tutorial to show how bootstrap framework can be used
alongside codeIgniter framework. hope you guys enjoyed it and learned something new! Cheers..</p>
</h3>
<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
<hr>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Article contents goes here. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Article contents goes here </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Article contents goes here</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
Now create and write the controller code in
pages.php in
application/controllers folder
pages.php
<?php
class Pages extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper('url_helper');
}
public function load($page)
{
$this->load->view('templates/header');
$this->load->view('pages/'.$page);
$this->load->view('templates/footer');
}
}
Now if you point the browser to your webroot followed by
index.php/load/page_one then you will see a simple, clean html page developed using bootstrap framework.
In my case the address is
localhost/codeIgniter/index.php/load/page_one.
Okay so this is how you can use bootstrap in codeIgniter. Happy bootstrapping.. :)
