I'm trying to use bootstrap on a codeigniter web but it looks like the bootstrap files are not found
<!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>
<!-- Bootstrap -->
<link href="<?php echo base_url('application/bootstrap/css/bootstrap.min.css');?>" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url('application/bootstrap/js/bootstrap.min.js');?>"></script>
I've checked the paths generated by base_url() and it are correct.
move bootstrap folder on root location, because CI is understanding application folder as controller although application folder is restricted from client request by /application/.htaccess file
|-
|-application
|-bootstrap
//and use path as
<?php echo base_url('bootstrap/css/bootstrap.min.css');?>
Here's the best guide I've found so far:
How to include bootstrap in CI
In short:
Download bootstrap
Put it in an assets folder on same level as application folder
Also put jquery
Include css in header and jquery in footer of your templates:
<html>
<head>
<title>CodeIgniter Tutorial</title>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>" />
</head>
<body>
<h1>H_E_A_D_E_R</h1>
and :
<hr/>
<em>© 2016</em>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-3.1.1.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
</body>
</html>
Don't forget to include the CodeIgniter URL helper in your controller
$this->load->helper('url');
Just sharing over here so that you no need to combine folders manually. I used this package offered from github regularly to commit new projects. Of course you will have to modify the application/config/config.php to get things work !
https://github.com/sjlu/CodeIgniter-Bootstrap
Cheers !
Create a folder(assets) in Codeigniter root directly (Same level to application folder)
Paste your bootstrap files into that folder
add link code in your view file
<link type="text/css" href="<?= base_url(); ?>assets/bootstrap.min.css" rel="stylesheet">
add this line in your controller file application/cotrollers/test.php
<?php
class Test extends CI_Controller {
public function index()
{
$this->load->helper('url'); // Load url links
$this->load->view('index'); //Load view page
}
}
?>
Now you can use bootstrap classes in your view
Download the Bootstrap file from the internet if you want to work offline
Unzip and rename and copy to root folder. If you put it in application folder, .htaccess will not allow it to be accessed.
Add the link like the following line of code:
<link href="<?php echo base_url('assets/css/bootstrap.min.css');?> rel="stylesheet">
If you use the Ci4 , add the folder 'bootstrap' in the default folder 'public'.
Thanks
I am trying to create different style sheet for my pages.
I have a set header file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="/includes/main.css" rel="stylesheet" media="all"/>
</head>
<body>
then I have my main body page, I will have main.html, project.html, contact.html …etc
//php load different pages for my body
<div>….
and a footer page.
<footer>…
My question is how to swap the css file to adapt different pages for my main body page. The header and footer files are the template and I don't want to change the css file every time I load a new page. How do I accomplish this? Thanks a lot!
One simple way of doing it is by using a php function called "basename".
If you have 3 pages main.php, project.php and contact.php, you can load different resources depending upon the name of the page you are viewing.
For example
echo ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<?php if(basename($_SERVER['PHP_SELF']) == 'main.php'){ ?>
<link href="/includes/main.css" rel="stylesheet" media="all"/>
<?php }
elseif(basename($_SERVER['PHP_SELF']) == 'project.php'){
?>
<link href="/includes/project.css" rel="stylesheet" media="all"/>
<?php } ?>
</head>
<body>
Im trying to hide my url for the css and only display the relative path. here is my html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="<?php echo site_url('css/bootstrap.min.css'); ?>" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Then when i view in browser my source code shows this.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="
How do i fix this. The file im using is a php file.
Did you load the url helper?
$this->load->helper('url');
You can also Auto Load the helpers if you want to only load them once
To autoload resources, open the application/config/autoload.php file and add the item you want loaded to the autoload array. You'll find instructions in that file corresponding to each type of item.
CodeIgniter AutoLoad
I could not find the function site_url in the default php library, is PEAR enabled on your server?
if you want the relative path you could use:
<?php echo $SERVER['HTTP_HOST'].'css/bootstrap.min.css'; ?>
or just
../css/bootstrap.min.css
or directly from the root
/css/bootstrap.min.css
I have googled a lot but it seems that I am doing something wrong.
I want to do this:
<?php
include 'header.php';
include'CSS/main.css';
...
?>
However, my page prints the CSS code.
Note: I want to use PHP to include the CSS file, and not use
I also do you want to rename my CSS file to a PHP file as some website mentioned.
Any clues?
Many thanks.
You have to surround the CSS with a <style> tag:
<?php include 'header.php'; ?>
<style>
<?php include 'CSS/main.css'; ?>
</style>
...
PHP include works fine with .css ending too. In this way you can even use PHP in your CSS file. That can be really helpful to organize e.g. colors as variables.
You are including the CSS code as text in your PHP page. Why not just link it in the traditional fashion?
<link rel="stylesheet" href="CSS/main.css" type="text/css">
you can use:
<?php
$css = file_get_contents('CSS/main.css');
echo $css;
?>
and assuming that css file doesn't have it already, wrap the above in:
<style type="text/css">
...
</style>
To use "include" to include CSS, you have to tell PHP you're using CSS code. Add this to your header of your CSS file and make it main.php (or styles.css, or whatever):
header("Content-type: text/css; charset: UTF-8");
This might help with some user's connections, but it theoretically (read: I haven't tested it) adds processor overhead to your server and according to Steve Souder, because your computer can download multiple files at once, using include could be slower. If you have your CSS split into a dozen files, maybe it would be faster?
Steve's blog post: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Source: http://css-tricks.com/css-variables-with-php/
<?php
define('CSSPATH', 'template/css/'); //define css path
$cssItem = 'style.css'; //css item to display
?>
<html>
<head>
<title>Including css</title>
<link rel="stylesheet" href="<?php echo (CSSPATH . "$cssItem"); ?>" type="text/css">
</head>
<body>
...
...
</body>
</html>
YOUR CSS ITEM IS INCLUDED
This is an older post, however as the info is still relevant today an additional option may help others.
Define a constant for the file path per Stefan's answer. The
definition can be placed at the top of the PHP page itself, or within
an included/required external file such as config.php.
(http://php.net/manual/en/function.include.php)
Echo the constant in PHP tags, then add the filename directly after.
That's it!
Works for other linked files such as JavaScript as well.
<?php
define('CSS_PATH', 'template/css/'); //define CSS path
define('JS_PATH', 'template/js/'); //define JavaScript path
?>
<!-- Doctype should be declared, even in PHP file -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>main.css">
<script type="text/javascript" src="<?php echo JS_PATH; ?>main.js"></script>
</head>
<body>
</body>
</html>
If you want to import a CSS file like that, just give the file itself a .php extension and import it anyway. It will work just fine :)
You can also do the following:
Create a php file in includes folder, name it bootstrap_css.php for example
paste the css code files to file created above
<?php
$minCss=' <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">';
$business = '<link href="bootstrap/css/modern-business.css" rel="stylesheet">';
echo $minCss;
echo $business;
?>
in the html header, include the css files as follows
<?php include_once 'includes/bootstrap_css.php'; ?>
You could do this
<?php include("Includes/styles.inc"); ?>
And then in this include file, have a link to the your css file(s).
I don't know why you would need this but to do this, you could edit your css file:-
<style type="text/css">
body{
...;
...;
}
</style>
You have just added here and saved it as main.php. You can continue with main.css but it is better as .php since it does not remain a css file after you do that edit
Then edit your HTML file like this. NOTE: Make the include statement inside the tag
<html>
<head>
<title>Sample</title>
<?php inculde('css/main.css');>
</head>
<body>
...
...
</body>
</html>
I solved a similar problem by enveloping all css instructions in a php echo and then saving it as a php file (ofcourse starting and ending the file with the php tags), and then included the php file.
This was a necessity as a redirect followed (header ("somefilename.php")) and no html code is allowed before a redirect.
Just put
echo "<link rel='stylesheet' type='text/css' href='CSS/main.css'>";
inside the php code, then your style is incuded. Worked for me, I tried.
This is the format of what I have which works:
<head>
<title>Site Title</title>
<?php include 'header.php'; ?>
</head>
Inside my header.php I have:
<!doctype html>
<html class="no-js" lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/images/icon/favicon.ico">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
The file name must be something other than a .CSS index. Write the following:
<link rel="stylesheet" href="style.css" type="text/css" />
The best way to do it is:
Step 1:
Rename your main.css to main.php
Step 2: in your main.php add
<style> ... </style>
Step 3: include it as usual
<?php include 'main.php'; ?>
That is how i did it, and it works smoothly..
_trace its directory, I guess
echo css('lib/datatables_rqs/jquery.dataTables.css');
I was about to use includes for my websites, setting up includes for
the header, footer, nav, etc. In the header I added the DOCTYPE to the end of the </head> tag.
If I do it this way, how would I add a stylesheet just for one specific page if the head of the page is in a include?
well there are alot of various ways to do this one would in the included header php file
add an variable
like so
<?=#$css;?>
and then in the file that includes it define the css variable to whatever you want to be included
$css = 'something';
include(header.php);
if this is your header.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<?=#$css;?>
</head>
and this is your index.php
$css= '<link href="style.css" rel="stylesheet" type="text/css" />';
include('header.php');
You could use php on the header page to detect what page the user is on, and display the relevant stylesheet.
<?php
$page = $_SERVER["REQUEST_URI"];
$clean = array("/", ".php");
$page = str_replace($clean, "", $page);
echo "
<link href=css/$page.css media=screen rel=stylesheet type=text/css />";
?>
If you are on index.php, then this script will include index.css, main.php will include main.css, etc.