How to Install Bootstrap in Laravel 8
How to Install Bootstrap in Laravel 8
In this article, we will introduce the Laravel How to install Bootstrap in 8. Bootstrap is a popular CSS framework that provides many ready-made styles and components to help you quickly build beautiful web pages. Laravel is a popular PHP framework that provides many convenient features and tools to make website development easier.
Read more: CSS Tutorial
Step 1: Create a New Laravel Project
First, we need to create a new Laravel project. Open a terminal or command prompt and navigate to the directory where you want to create the project. Then run the following command:
composer create-project --prefer-dist laravel/laravel myproject
This will create a new project based on the latest version of Laravel. Wait a few moments for the installation to complete.
Step 2: Install the Bootstrap Package
Once our Laravel project is created, we can proceed to install the Bootstrap package. Navigate to the project directory in your terminal or command prompt and run the following command:
composer require laravel/ui
This will install the Laravel UI suite, which includes commands and functionality necessary to install Bootstrap.
Step 3: Generate Front-End Assets
Once Laravel UI is installed, we can use it to generate the front-end assets. Run the following command:
php artisan ui bootstrap
This will generate the necessary files and directories to use Bootstrap. Note: Before executing this command, make sure there are no folders named “css” or “js” in your project directory; otherwise, these folders may be overwritten.
Step 4: Compile Front-End Assets
After generating the front-end assets, we need to compile them into the final CSS and JavaScript files. Run the following command:
npm install
npm run dev
This will install all necessary dependencies and compile the front-end assets into production-ready files. If you’re developing locally, you can use the npm run watch command to monitor file changes and automatically recompile.
Step 5: Using Bootstrap
Now that we’ve successfully installed Bootstrap and compiled it into the final CSS and JavaScript files, we can begin using Bootstrap in our Laravel project.
To include Bootstrap’s CSS in your view file, you can use the following code:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
Note that the asset() function here resolves the path to the project’s public directory and generates the correct URL.
To include Bootstrap’s JavaScript in your view file, you can use the following code:
<script src="{{ asset('js/app.js') }}"></script>
This will add links to Bootstrap’s CSS and JavaScript to your view file.
Example: Creating a Simple Navigation Bar with Bootstrap
Let’s walk through an example to illustrate how to use Bootstrap to create a simple navigation bar in a Laravel project.
First, add the following code to the resources/views/layouts/app.blade.php view file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Bootstrap</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
Laravel Bootstrap
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Then, in any view file, such as resources/views/welcome.blade.php, extend the app.blade.php layout file and add your own content in the content area:
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Welcome to Laravel Bootstrap</h1>
<p>This is a simple example of using Bootstrap in a Laravel project.</p>
</div>
@endsection
This way, you can easily create and use a Bootstrap navigation bar in your Laravel project.
Summary
Through this article, we learned how to install and use Bootstrap in Laravel 8. We learned how to create a new Laravel project, install the necessary packages, generate front-end assets, and apply Bootstrap to our project. We also used an example to learn how to create a simple navigation bar using Bootstrap. I hope this article helps you learn more about Laravel and Bootstrap!