- This topic has 0 replies, 1 voice, and was last updated 4 days, 23 hours ago by
.
-
Posts
-
Visual appeal is a very important factor to consider when developing a website. For me, Laravel’s default styling is not just enough. There are many very beautiful Bootstrap templates available, both free and paid, and they can go a long way in spicing up your website’s aesthetics. This article explains how to use Bootstrap in your Laravel project.
Using A CDN To Serve Bootstrap Resources
The easiest way to use Bootstrap with Laravel is to serve Bootstrap resources from a CDN. Head over to Bootstrap’s official website and copy the links to the resources. At the time of writing, the latest stable version of Bootstrap is version 4.4.1. The following are the resources we need to work with Bootstrap. I took out some unnecessary HTML attributes, but my code works just fine without them.
CSS:
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>JS:
123<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>Read up this article on Blade partials in Laravel to learn how to separate page elements into different files. After reading this article, you will be able to apply what you’ve learned from both articles to make Bootstrap’s resources available to all pages on your website. For this article though, we will work with just one page – Laravel’s default home page. Open resurces/views/welcome.blade.php and edit it to look like this:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Laravel</title><!--styles--><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/><!--style--><!-- Fonts --><link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"/></head><body><div class="pos-f-t"><div class="collapse" id="navbarToggleExternalContent"><div class="bg-dark p-4"><h5 class="text-white h4">Collapsed content</h5><span class="text-muted">Toggleable via the navbar brand.</span></div></div><nav class="navbar navbar-dark bg-dark"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button></nav></div><div class="content"><br /><br /><div class="links"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button><!-- Example single danger button --><div class="btn-group"><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button><div class="dropdown-menu"><a class="dropdown-item" href="#" rel="nofollow">Action</a><a class="dropdown-item" href="#" rel="nofollow">Another action</a><a class="dropdown-item" href="#" rel="nofollow">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#" rel="nofollow">Separated link</a></div></div></div></div></body></html>If you refresh your browser, you should get something that looks like the following image. You can see it’s unstlyed.
Now, add the links to the CSS and JavaScript resources and see how the web page changes. Be sure to place the link to the CSS file within the <head>…</head> tag, and the links to the JavaScript files just before the closing body tag. Save and refresh your code, and you should have something like this:
Using A Self-Hosted Bootstrap Template
Using self-hosted Bootsrap files is quite similar to serving them from a content delivery network. However, in this case you will use relative file paths. The following image shows the file structure of the resources for a Bootstrap theme I am using.
Assuming you are using something similar to the image above, navigate to public in your Laravel project and create a folder there. You can name the folder anything you like, but for the sake of this article, name it assets. Paste the JS and CSS folders of your template, along with the folders containing fonts, images and icons here. The next step would be to change the code to work with relative file paths. Change the lines that import the CSS files to look like this:
12<link rel="stylesheet" href="{{asset('assets/css/bootstrap.css')}}"/><!--Links to other CSS file and font files can also be added here-->Then change the lines that handle the JS files to look like the following:
123<script src="{{asset('assets/js/jquery-3.4.1.slim.min.js')}}"></script><script src="{{asset('assets/js/bootstrap.min.js')}}"></script><!--Links to other JavaScript files in your template can go here too-->You can apply the steps above to virtually any Bootstrap template and beautify your Laravel project. they are very easy to implement.
You must be logged in to reply to this topic.
