Instalar Bootstrap en Laravel es un proceso sencillo. Aquí te muestro cómo hacerlo:
Opción 1: Usar npm
- Instala Bootstrap: Abre tu terminal en la raíz de tu proyecto Laravel y ejecuta:
#bash
npm install bootstrap
Importa Bootstrap en tu archivo resources/js/app.js
:
#javascript
import 'bootstrap';
Importa Bootstrap en tu archivo resources/sass/app.scss
:
#scss
@import '~bootstrap/scss/bootstrap';
Compila los activos: Ejecuta el siguiente comando para compilar tus archivos CSS y JS:
#bash
npm run dev
Opción 2: Usar CDN
Si prefieres no usar npm, puedes incluir Bootstrap directamente desde un CDN. Agrega estas líneas en la sección <head>
de tu archivo resources/views/layouts/app.blade.php
o el archivo que estés utilizando como plantilla:
#html
<!-- CSS de Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css">
<!-- JS de Bootstrap y Popper.js -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.min.js"></script>
Opción 3: Usar Laravel Mix
Laravel Mix ya está configurado para manejar CSS y JS. Si usaste la opción de npm:
- Asegúrate de que tu archivo
webpack.mix.js
esté configurado así:
#javascript
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
npm to run:
#bash
npm run dev
How Coding Filters Improve Code Efficiency!
Coding filters enhance the efficiency of code by allowing developers to target and process only relevant data. This reduces the need for unnecessary loops, conditional checks, and repetitive logic, leading to faster execution times and optimized resource usage in your applications.