Coding Filters & instal bootstrap in laravel code-push-1

How can you install Bootstrap in Laravel?

Instalar Bootstrap en Laravel es un proceso sencillo. Aquí te muestro cómo hacerlo:

Opción 1: Usar npm

  1. 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:

  1. 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.

Author

  • theaamirlatif

    Frontend Web Dev and UI/UX Engineer, cross-browser, responsive design, user interaction, web accessibility, and client-side optimization in React, WP, Apps Dev.

    View all posts

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *