Question

68

adding css and js file in laravel 5.3

rated 0 times [ 75] [ 7] / answers: 1 / hits: 34716 / 8 Years ago, fri, september 30, 2016, 12:00:00

I want to include a css all css and js in single page and load it in all page.Now If I want to include bootstrap.css and bootstrap.js in welcome page I have included in welcome.blade.php page and if i want to add in another page I have included in second.blade.php page also.I want to include it in master page

<link href={{ asset('css/bootstrap.css') }} rel=stylesheet>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

johnathanhakeems

Add To Favorites

Follow

Total Points: 487

Total Questions: 129

Total Answers: 100

Location: Fiji

Member since Fri, Nov 13, 2020

4 Years ago

answered 8 Years ago collinisaaka · Accepted Answer

Crate header.blade.php

<!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>

    <meta name=csrf-token content={{ csrf_token() }} />

    <meta name=description content=>

    <meta name=author content=>



    <title>dhinchakwale</title>

    <!-- Bootstrap Core CSS -->

    <link href={{ asset('/css/bootstrap.min.css') }} rel=stylesheet>



    <link href={{ asset('/css/datepicker.css') }} rel=stylesheet type=text/css>

    <link href={{ asset('/css/bootstrap-timepicker.min.css') }} rel=stylesheet type=text/css>



    <link href={{ asset('/css/dataTables.bootstrap.css') }} rel=stylesheet>    

    <!-- Custom CSS -->  

    <link href={{ asset('/css/admin.css') }} rel=stylesheet>



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

        <script src=https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js></script>

        <script src=https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js></script>

    <![endif]-->



    <!-- jQuery -->

    <script src={{ asset('/js/jquery.min.js') }}></script>    

  </head>



  <body id=page-top>

    <nav class=navbar navbar-default>

      <div class=container-fluid>

        <!-- Brand and toggle get grouped for better mobile display -->        

        <div class=navbar-header>

          <button type=button class=navbar-toggle collapsed data-toggle=collapse data-target=#bs-example-navbar-collapse-1 aria-expanded=false>

            <span class=sr-only>Toggle navigation</span>

            <span class=icon-bar></span>

            <span class=icon-bar></span>

            <span class=icon-bar></span>

          </button>

          <a class=navbar-brand href=/><img alt=Brand src={{asset('/images/logo.png')}} class=img-brand></a>

        </div>      

      </div>

    </nav>

    <div class=content-div>

      @yield('content')

    </div>

    <div class=clearfix></div>  



    <!-- Bootstrap Core JavaScript -->

    <script src={{ asset('/js/bootstrap.min.js') }}></script> 

    <script src={{ asset('/js/bootstrap-datepicker.js') }}></script>

    <script src={{ asset('/js/bootstrap-timepicker.min.js') }}></script>

  </body>

</html>

And use like this
First extends header
Second Section of your content

@extends('layouts.header')

@section('content')

  <section class=content-header>

    <h1>

      Hello

    </h1>

  </section>

@stop