INTEGRATING BOOTSTRAP 4 LAYOUT TO LARAVEL PROJECT

Today we will see how we can integrate the bootstrap template with a laravel project.

Requirements

· Installed Laravel Project on your Local.

· Bootstrap v.4 JS and CSS File.

· Desired Bootstrap Layout, here we are using Album Example for Bootstrap for this demo.

Create a layout file.

We will start by creating proper folders and files here we will keep our structure and layout file. Create a new folder named layout inside our resources -> views folder. In this folder, we will add our main layout and other files that should be included inside the layout file. Now we are creating another folder named partials which will be used for the folder to keep partial files, which will be used inside our layout file.

As we will see the bootstrap example source code, a file has different parts, and we will create a new blade file layout in which we will put all the partials of the layout separately.

Create a file layout.blade.php in our layout folder.

<!DOCTYPE html>

<head>

@include('layout.partials.head')

</head>

<body>

@include('layout.partials.nav')

@include('layout.partials.header')

@yield('content')

@include('layout.partials.footer')

@include('layout.partials.footer-scripts')

</body>

</html>

This file contains all the elements of our HTML page and we had made use of our blade template methods like

· @include

@include is used to include the contents for the specified file at the proper location inside the HTML file

· @yield

@yield is used to the specified content file which will be extending the current layout.

Create partial files.

Now we will create new partial files that we had included in our layout file. Now create a new partials folder inside the layout folder which will contain all the files ie.., header, footer, etc.

Now create a new file named head.blade.php. This file will contain all the contents all the head section of our webpage, which includes all the CSS files, meta tags, etc. bootstrap.min.css and the other album theme-related specific file such as album.css are included in this file.

<title>Album example for Bootstrap</title>

Create a new file named nav.blade.php. This file will contain all the code related to creating all the navigations for our bootstrap page.

<h4 class="text-white">About</h4>

<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>

</div>

<h4 class="text-white">Contact</h4>

<li><a href="#" class="text-white">Follow on Twitter</a></li>

<li><a href="#" class="text-white">Like on Facebook</a></li>

<li><a href="#" class="text-white">Email me</a></li>

</ul>

</div>

<a href="#" class="navbar-brand">Album</a>

</button>

</div>

Now create a new file named header.blade.php, This file will usually contain all our header of the bootstrap page such as our logo, name

<h1 class="jumbotron-heading">Album example</h1>

<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>

<p>

<a href="#" class="btn btn-primary">Main call to action</a>

<a href="#" class="btn btn-secondary">Secondary action</a>

</p>

</div>

</section>

Now create a new file named footer.blade.php, Here we will add our footer part

</p>

<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>

</div>

</footer>

Now create a new file named footer-scripts.blade.php, This file will contain all the Javascript files which will be usually included at the bottom of every page. Bootstrap js and jQuery libraries are included in this file.

<!-- Bootstrap core JavaScript

================================================= -->

After we create all the views files, our views folder should looks something like this.

We now have all our layouts file which is ready and also all the necessary files which are needed to complete our layout are ready in our current partials folder.

Extending layout.

Let us create a new view file that extends our current layout file so that we can now see bootstrap layout integration with the Laravel blade template.

Now create a new file demo.blade.php in our views folder and we will put all the following contents in this file.

@extends('layout.mainlayout')

@section('content')

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas dolor vulputate quam convallis consequat. Quisque eu lorem eget magna lacinia suscipit. Maecenas condimentum vehicula eros. Fusce massa lacus, blandit et leo sed, accumsan commodo sem. Sed eget pulvinar tellus. Praesent ex diam, sodales at consequat id, viverra ut dolor. In eget orci sit amet magna sagittis mattis sit amet sed augue. Vivamus facilisis libero ligula, vel sodales ipsum sollicitudin id. Duis vitae urna rutrum, dignissim arcu ac, elementum augue. Quisque id interdum ligula. Donec tincidunt feugiat massa sed aliquam. Duis eu vehicula turpis.</p>

</div>

@endsection

@extends method from blade template which denotes which layout we want to extends as we can see multiple layouts in our current project. In the @section(‘content’) creates a new section with the name of the content. Now whenever blade engine will hit @yield(‘content’) in our layout file it will be pushed out to the content section

Now we will see the page in the browser and we need to add this to our route action in routes > web.php file.

Route::get('/demo', function () {

return view('demo');

});

Now if we hit this demo URL in our browser then we should see our bootstrap integration in the local server.

HariKrishnan R

Search This Blog

INTEGRATING BOOTSTRAP 4 LAYOUT TO LARAVEL PROJECT

Comments

Post a Comment