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
Related
I have used css w/ codeigniter plenty of times in the past but I am just not able to configure it on a new server setup. I have looked at almost all the answers on Stack overflow but none of them seem to be working for me. I have created a very basic set of files for testing -
Controller (codeigniter/application/controllers/Pages.php)
<?php
class Pages extends CI_Controller{
public function testthis(){
$this->load->helper('url');
$this->load->view('testcss2');
}
}
?>
View (codeigniter/application/views/testcss2.php)
<html>
<head>
<title>CSS styled page</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?
>testcss.css">
</head>
<body>
<!-- Main content -->
<h1>Testing CSS styled page for codeigniter</h1>
<p>Welcome to my styled page!
<p>CSS Styled page
<address>7th July 2017
</address>
</body>
</html>
Config.php
$config['base_url'] = 'http://localhost/';
autoload.php
$autoload['helper'] = array('url');
The testcss.css file was placed in the root html folder on Ubuntu but I ended up copying it in almost every directory out of frustration of it not getting picked up.
The result -
The page gets displayed successfully but without any styling. If I copy the contents of the css file and paste it in the view file inline using the style tag, the css works ! But not while using external css.
Why is using css with codeigniter so frustrating !!!
For example your project name is "ProjectName",
Add folder assets and place css file inside of it.
Here in config change base_url
$config['base_url'] = 'http://localhost/ProjectName/';
After that in view use this way
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/testcss.css');?>">
I hope it will work for you.
If feel any issue please let me know. Thank you
Controllers/pages.php
<?php
class Pages extends CI_Controller{
function __construct() {
parent::__construct();
$this->load->helper('url');
}
public function index() {
$this->load->view('testcss');
}
}
?>
views/testcss.php
<html>
<head>
<title>Load css and javascript file in codeigniter</title>
<!--Load style.css file, which store in css folder.-->
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
</head>
</html>
Sometimes, you need to give permissions to use css and js from root. Putting them into folder gives you way to manage and include all from same path.
Possibly a duplicate question, but I have searched all over and haven't found a definitive answer. My CSS files aren't being included in my Bootstrap 3 code.
Here is a sample from a header include file that is at the top of each page. The include is done through PHP.
<title>Page Title</title>
<!-- METAs -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel = "stylesheet">
<link href="css/social-buttons.css" rel = "stylesheet">
<link href="css/font-awesome.css" rel = "stylesheet">
<link href="css/styles.css" rel = "stylesheet">
</head>
<body>
<div class = "navbar navbar-default navbar-static-top">
...
All these files are sourced within a CSS file and the file is accessible. I feel like everything is being included properly. Could it be an issue with including the code from a PHP file instead of raw code inline?
The folder structure (for core php project) must be
Main Folder
-- css
--all css files
--index.php / index.html
If your paths are correct, it really shouldn't be a problem.
Let's assume your directory is like so:
/includes
/header.php (calls the below css files)
/css
/style.css
/bootstrap.css
/others.css
/index.php
In your index file, your include would be:
<?php include ('includes/header.php');?>
In your header.php:
<link href="css/style.css" rel="stylesheet"> (etc, your other css files)
I am currently using codeigniter to write out templates for a website. The problem is that I'm trying to achieve absolute paths for attributes such as href and src, but they aren't working. I've checked my results, and the link's and scripts point through the correct directory, so I'm not sure why there is a problem.
This is the code I'm using below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<link rel="stylesheet" href="<?php echo base_url() . "assets/bootstrap/css/bootstrap.css"; ?>">
<link rel="stylesheet" href="<?php echo base_url() . "assets/bootstrap/css/bootstrap-responsive.css"; ?>">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="<?php echo base_url() . "assets/html5shiv/html5shiv.js"; ?>"></script>
<![endif]-->
<!-- Fav and touch icons go here -->
</head>
<body>
<p>This comes from the header view.</p>
<button class="btn btn-primary">Primary</button>
<br />
<a class="btn btn-primary">Secondary</a>
I can tell that this isn't working because I'm trying to use bootstrap to style two buttons, but they aren't working. Can someone please help me figure this out?
Oh, by the way..my base_url is http://localhost/ProjectName/, and I know that I have this working correctly because I have enabled the URL helper and I am able to echo the base_url.
Please make sure that You've loaded URL helper, in your autoload.php, and also make sure that you've added defined base_url in your config.php.
if not then this should help you out.
I think you haven't edited codeigniter files to enable base_url(). you try to assingn it in url_helper.php you also can do the same config/autoload.php file. you can add this code in your autoload.php
$autoload['helper'] = array('url');
There's no need to drop in and out of PHP. You can just do this:
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.css" />
if this doesn't work there's a problem with where your css files are.
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 am using zend and not using AJAX in my site. Therefore I have to include all my CSS and JS files in head section of every phtml page.
<html>
<head>
<link rel="stylesheet" type="text/css" href="mycssfile.css" />
<script type="text/javascript" src="myjsfile1.js"></script>
<script type="text/javascript" src="myjsfile2.js"></script>
.........
</head>
<body>
.........
</body>
</html>
Whenever I add any new CSS/JS file, I have to include it everywhere. Is there a good way that I can include all my CSS and JS file in a file/place and use that reference everywhere. May be there is a good way in zend.
I usually put my static suff in the bootstrap of the application in the _initViewHelpers method :
$this->bootstrap(array('frontcontroller', 'view'));
$frontController = $this->getResource('frontcontroller');
$view = $this->getResource('view');
$view->headLink()->appendStylesheet($view->assetUrl('/css/reset.css'))
->appendStylesheet($view->assetUrl('/css/clearfix.css'))
->appendStylesheet($view->assetUrl('/css/screen.css'));
$view->headScript()->appendFile($view->assetUrl('/js/jquery.1.4.3.min.js', 'text/javascript'))
->appendFile($view->assetUrl('/js/jquery.corner.js', 'text/javascript'));
And then from your layout file you call them through
echo $this->headLink()->setIndent();
echo $this->headStyle()->setIndent();
This site might also help you with bootstrap and application optimization
http://joegornick.com/2009/11/18/zend-framework-best-practices-part-1-getting-started/
In normal PHP, you would just put the common bits in another template and include it:
<?php include 'common/header_assets.php'; ?>
common/header_assets.php:
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="myjsfile1.js"></script>
<script type="text/javascript" src="myjsfile1.js"></script>
With the Zend Framework, you would want to create a layout for all of your templates to share that would have these common bits:
http://zendframework.com/manual/en/learning.quickstart.create-layout.html