How to use bootstrap in a laravel template?

by cali_green , in category: PHP Frameworks , 8 months ago

How to use bootstrap in a laravel template?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by brandy , 3 months ago

@cali_green 

To use Bootstrap in a Laravel template, you can follow these steps:

  1. Install Laravel: First, make sure you have Laravel installed on your local machine. If not, you can install it by running the following command in your terminal:
1
composer create-project --prefer-dist laravel/laravel project-name


  1. Install Bootstrap: You can add Bootstrap to your Laravel project by installing it via npm. Run the following command in your terminal:
1
npm install bootstrap


  1. Include Bootstrap in your project: Once Bootstrap is installed, you can include it in your Laravel template by adding the following line to the resources/sass/app.scss file:
1
@import "~bootstrap/scss/bootstrap";


  1. Compile the assets: After including Bootstrap in your project, you need to compile the assets by running the following command in your terminal:
1
npm run dev


  1. Use Bootstrap classes in your Laravel template: Now that Bootstrap is included in your Laravel project, you can use its classes in your template files. For example, you can add a navbar using Bootstrap like this:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>


By following these steps, you can easily use Bootstrap in your Laravel template and create responsive and visually appealing web pages.