Layouts

Material Pro provides multiple layouts to customize the selected template. We have made total 5 layout variation. The layout you select will be placed in the body tag.

In order to select a layout, use the Blade @section directive to specify which layout the view should have.

Fix Header

FixHeader

<!-- Stored in resources/views/demo-apps/material/fix-header.blade.php -->

@extends('templates.material.main')

{{--Attributes for Layout are added here --}}
@section('body-classes','fix-header')

@section('content')

    @include('demo-content.fix-header')

@endsection

Fix Sidebar

FixSidebar

<!-- Stored in resources/views/demo-apps/material/fix-sidebar.blade.php -->

@extends('templates.material.main')

{{--Attributes for Layout are added here --}}
@section('body-classes','fix-sidebar')

@section('content')

    @include('demo-content.fix-sidebar')

@endsection

{tip} You can use Fix Header and Fix Sidebar with other layouts. Example: @section('body-classes','fix-sidebar boxed')

Boxed

HomeBoxed

<!-- Stored in resources/views/demo-apps/material/home-boxed.blade.php -->

@extends('templates.material.main')

{{--Attributes for Layout are added here --}}
@section('body-classes','boxed')

@section('content')

    @include('demo-content.home-boxed')

@endsection

Logo Center

LogoCenter

<!-- Stored in resources/views/demo-apps/material/home.blade.php -->

@extends('templates.material.main')

{{--Attributes for Layout are added here --}}
@section('body-classes','logo-center')

@section('content')

  @include('demo-content.logo-center')

@endsection

Single Column

SingleColumn

<!-- Stored in resources/views/demo-apps/material/single-column.blade.php -->

@extends('templates.material.main')

{{--Attributes for Layout are added here --}}
@section('body-classes','single-column')

@section('content')

    @include('demo-content.single-column')

@endsection