Quiz App Tutorial – Episode 5

In this tutorial, we will be installing Bootstrap and integrating it with our Laravel, Inertia Js, and Vue js quiz app.

Installing Bootstrap

First, let’s start by installing Bootstrap. Open your terminal and navigate to your Laravel project directory. Then, run the following command to install Bootstrap using npm:

npm install bootstrap

Next, we need to import Bootstrap’s styles and JavaScript into our app. Open the resources/js/app.js file and add the following lines:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Save the file and run the following command to compile the assets:

npm run dev

Integrating Bootstrap with Inertia Js and Vue js

Now, let’s integrate Bootstrap with our Inertia Js and Vue js components. Open your main layout file, typically located at resources/js/Layouts/AppLayout.vue, and add the following line within the head tag to include Bootstrap’s styles:

Save the file and run the app to see Bootstrap’s styles being applied to your components.

Conclusion

With these simple steps, you have successfully installed and integrated Bootstrap with your Laravel, Inertia Js, and Vue js quiz app. You can now start styling your components using Bootstrap’s classes and utilities to create a polished and professional look for your app.

Stay tuned for the next episode where we will be adding more features to our quiz app.