adding bootstrap to codeigniter

For adding bootstrap to your website, you need to add Bootstrap CDN or need to download the bootstrap from the website of bootstrap. If you download the boostrap, then you should place that bootstrap file in a new folder in application.

Here i am using Bootstrap CDN. Now we are going to create two pages header.php and footer.php as follows:

header.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>


footer.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Now let us add these files to the controller :

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Home extends CI_Controller
{
  public function __construct()
  {
    parent::__construct();
  }
  public function index()
  {
    $this->load->view("home");
  }
  public function login()
  {
    $this->load->view("header");
    $this->load->view("login");
    $this->load->view("footer");
  }
}

Now we are all set. You can now use the bootstrap by adding header.php and footer.php to any page.



⇐Prev
Next⇒

Comments

Post a Comment

Popular posts from this blog

Node.js Cheat Sheet

Image
To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterva...
Read more

Codeigniter ! Simple But Powerful

Image
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .  Note : Don't touch the forder named system because it is the soul of the codeigniter Next ⇒
Read more

Bootstrap ? What is it ?

Image
Have you ever thinked about designing a file that can contain different styles which can be ewhile writing every code. Here is the answer. A Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap is a free and open source front enddevelopment framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate the development of responsive, mobile-first sites and apps. The bootstrap file contain many CSS style , JavaScript and HTML which can be called any number of times during the execution of the program. The bootstrap file is a W3C accepted standard file wich can be used to develop a stylish website easly. Here you can download the bootstrap file directly from my website. It is the now available latest version of the bootstrap file. Version : 4.3.1 Click on the link below to download the bootstrap file. Bootstrap version 4.3.1 If you need ...
Read more