Bootstrap in Laravel

Voordat we beginnen met designen en code te schrijven in jouw .css file, wil ik jullie eerst introduceren aan een front-end CSS framework: Bootstrap.

Bootstrap is een CSS Framework voor het ontwikkelen van responsive en mobile-first websites.
- Betekenis responsiveness: het design past zich aan op basis van jouw resolutie van het scherm.
- Betekenis mobile-first: de applicatie is gedesigned voor mobiel. Vaak doen developers mobile-first, omdat het tegenwoordig de meest gebruikte device is.
Met bootstrap kan je gemakkelijk een voorgekauwde opmaak toevoegen aan jouw element zonder zelf te gaan stylen in jouw .css file.
Ook kan je met bootstrap jouw content makkelijk indelen. Zie het een beetje hetzelfde als het grid-systeem van CSS.

Je kan snel en gestructureerd jouw pagina's designen zonder iets te schrijven in jouw CSS code.
Bootstrap heeft de meeste belangrijke opmaak kant en klaar voor jouw voorgekauwd.
Een zeer breed assortiment van verschillende CSS componenten. (zie hun documentatie!)

Elke webdeveloper kent boostrap wel. Dus elke webdeveloper kan meteen zien of iets gemaakt is in Bootstrap en kan gezien worden als 'niet origineel'.
Het kan soms conflicten met jouw zelfgemaakte opmaak (als je die hebt).
Om een eigen smaakje van te maken moet je alsnog gaan opmaken met CSS. Dus flexibel is het niet helemaal. (daarvoor kan je dan Tailwind gebruiken)

Om Bootstrap te gebruiken in jouw Laravel project, moet je eerst Bootstrap toevoegen met Node.js (NPM):

Open jouw terminal van jouw editor
Voer deze commando uit: composer require laravel/ui
Nu installeren we bootstrap met: php artisan ui bootstrap
Vervolgens run je jouw CSS, en dus ook jouw bootstrap!: npm install && npm run dev

Gefeliciteerd! Je hebt nu bootstrap in jouw Laravel project!