Using CSS in Laravel views

Question

I ve just began learning Laravel  and can do the basics of a controller and routing   My OS is Mac OS X Lion  and it s on a MAMP server   My code from routes php   Route  get      function         return View  make  home index         Route  get  businesses   function         return View  make  businesses index         Route  get  testing   function         return View  make  testing index                 Route  get  hello   function         return   lt h3 gt Hello world  lt  H3 gt          That works  the views display perfectly    however   what I want to try and do is include CSS within the views  I tried adding in a link to a stylesheet within the directory but the page displayed it as the default browser font even though the css was in the HTML   This is index php from businesses within the views folder    lt head gt      lt link rel  stylesheet  type  text css  href  mystyle css  gt   lt  head gt    lt p gt Business is a varied term  My content here    I tried using the Blade template engine in my other views folder  testing  to display CSS but again the CSS did not show despite it being in the testing folder   How can I overcome this problem  and get better - as I m slowly learning this framework

User · Answer

For Laravel 5 4 and if you are using mix helper  use       lt link href     mix   css app css       rel  stylesheet  gt       lt script src     mix   js app js       gt  lt  script gt

User · Answer

You can simply put all the files in its specified folder in public like    public css  public js  public images    Then just call the files as in normal html like  lt link href  css file css  rel  stylesheet  type  text css  gt   It works just fine in any version of Laravel

User · Answer

Like Ahmad Sharif mentioned  you can link stylesheet over http   lt link href     asset   css style css       rel  stylesheet  gt     but if you are using https then the request will be blocked and a mixed content error will come  to use it over https use secure asset like   lt link href     secure asset   css style css       rel  stylesheet  gt    https   laravel com docs 5 1 helpers method-secure-asset

User · Answer

Copy the css or js file that you want to include  to public folder or you may want to store those in public css or public js folders   Eg  you are using style css file from css folder in public directory then you can use   lt link rel  stylesheet  href     url       css style css  type  text css   gt   But in Laravel 5 2 you will have to use   lt link rel  stylesheet  href     url          css style css  type  text css   gt    and if you want to include javascript files from public js folder  it s fairly simple too   lt script src     url       js jquery min js  gt  lt  script gt    and in Laravel 5 2 you wll have to use   lt script src     url          js jquery min js  gt  lt  script gt    the function url   is a laravel helper function which will generate fully qualified URL to given path

User · Answer

Put your assets in the public folder  public css public images public fonts public js   And them called it using Laravel      HTML  script  js scrollTo js           HTML  style  css css css

User · Answer

We can do this by the following way    lt link href     asset   css style css       rel  stylesheet  gt      HTML  style  css style css   array  media    gt   print         It will search the style file in the public folder of Laravel and then will render it

User · Answer

your css file belongs into the public folder or a subfolder of it   f e if you put your css in   public css common css   you would use  HTML  style  css common css      In your blade view     Or you could also use the Asset class http   laravel com docs views assets

User · Answer

Put them in public folder and call it in the view with something like  href     asset  public css style css        Note that the public should be included when you call the assets

User · Answer

Use     in new laravel       asset  js app min js         lt script type  text javascript  src      asset  js app min js        gt  lt  script gt

User · Answer

To my opinion the best option to route to css  amp  js use the following code    lt link rel  stylesheet  type  text css  href     URL  to  route to css       gt    So if you have css file called main css inside of css folder in public folder it should be the following    lt link rel  stylesheet  type  text css  href     URL  to  css main css       gt

User · Answer

Update for laravel 5 4 ----  All answers have have used the HTML class for laravel but I guess it has been depreciated now in laravel 5 4  so  Put your css and js files in public- css js  And reference them in your html using   lt link href  css css common css  rel  stylesheet   gt

User · Answer

That is not possible bro  Laravel assumes everything is in public folder   So my suggestion is     Go to the public folder  Create a folder  preferably named css  Create the folder for the respective views to make things organized  Put the respective css inside of those folders  that would be easier for you    Or  If you really insist to put css inside of views folder  you could try creating Symlink  you re mac so it s ok  but for windows  this will only work for Vista  Server 2008 or greater  from your css folder directory to the public folder and you can use   HTML  style  your view folder myStyle css     inside of your view files  here s a code for your convenience  in the code you posted  put these before the return View  make      css file    myStyle css    folder name    your view folder    view path   app path       views      folder name          css file   public css path   public path            folder name  if file exists  public css path   exec  rm -rf      public css path   exec  mkdir      public css path   exec  ln -s      view path         public css path          css file     If you really want to try doing your idea  try this    lt link rel  stylesheet  href   lt  php echo app path      views your view folder myStyle css   gt   type  text css  gt    But it won t work even if the file directory is correct because Laravel won t do that for security purposes  Laravel loves you that much

User · Answer

For those who need to keep js css out of public folder for whatever reasons  in modern Laravel you can use sub-views  Say your views structure is  views     view1 blade php     view1-css blade php     view1-js1 blade php     view1-js2 blade php   in view1 add   include  view1-css    include  view1-js1    include  view1-js2     in views-js blade php files wrap your js code in  lt script gt  tag  in views-css blade php wrap your styles in  lt style gt  tag  That will tell Laravel  and your code editor  that those are in fact js and css files  You can do the same with additional HTML  SVGs and other stuff that is browser-renderable

User · Answer

You can also write a simple link tag as you normaly would and then on the href attr use    lt link rel  stylesheet  href   lt  php echo asset  css common css    gt   type  text css  gt     of course you need to put your css file under public css

User · Answer

Since Laravel 5 the HTML class is not included by default anymore      If you re using Form or HTML helpers  you will see an error stating class  Form  not found or class  Html  not found  The Form and HTML helpers have been deprecated in Laravel 5 0  however  there are community-driven replacements such as those maintained by the Laravel Collective    You can make use of the following line to include your CSS or JS files    lt link href     URL  asset  css base css       rel  stylesheet  gt   lt link href     URL  asset  js project js       rel  script  gt

User · Answer

put your css in public folder  then  add this in you blade file   lt link rel  stylesheet  type  text css  href     asset  mystyle css       gt

User · Answer

put your css File in public folder    public css bootstrap-responsive css  and  lt link href    css bootstrap-responsive css  rel  stylesheet  gt

User · Answer

Put your assets in the public folder  public css public images public fonts public js   And then called it using Laravel     URL  asset  js scrollTo js          Generates the path to public directory public js scrollTo js     URL  asset  css css css            Generates the  path to public directory public css css css    OR      HTML  script  js scrollTo js          Generates the  path to public directory public js scrollTo js     HTML  style  css css css          Generates the path to public directory public css css css

[php] Using CSS in Laravel views?

Examples related to php

Examples related to frameworks

Examples related to laravel