10

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">
3
  • 1
    Crate a separate header.blade and include css and js. Then extends in each page Commented Sep 30, 2016 at 9:43
  • can I include one blade.php in another page? Commented Sep 30, 2016 at 9:45
  • Yes.. below I share my code Commented Sep 30, 2016 at 9:55

4 Answers 4

14

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  
Sign up to request clarification or add additional context in comments.

Comments

4

Here is the steps you can follow

  1. Create a master template layout
  2. Extend the master template in all pages and paste your link into header section

To create a master template //master.blade.php

<html lang="en">

      @yield('header')

<body>
      @yield('page-body')
</body>
</html>

Now Extend this layout in second.blade.php

@extend('master.blade')
@section('header')
   <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
@endsection
@section('page-body')
   {{!-- content of body --}}
@endsection

Comments

3

Define a common layout and include all .js and .css file on that layout and than bind your page with this layout.

Layout:

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Where: @yield directive is used to display the contents of a given section.

View:

@extends('layouts.default')
@section('content')
    i am the home page
@endsection

Comments

1

You can define a master layout view file then define your CSS and JS there. Then all of your view file will extend that layout file. See documentation here: https://laravel.com/docs/5.3/blade

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.