8

I install jetstream+inertia.js into my laravel project and everything is working perfectly but I need to use bootstrap 5 in only welcome. vue component so how can I handle it?

My app.js file;

require('./bootstrap');

// Import modules...
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import 'animate.css';
import Toaster from '@meforma/vue-toaster';
import 'alpinejs';



const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({methods: {route}})
    .use(InertiaPlugin)
    .use(Toaster)
    .mount(el);

My app.css file:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

image

Improve this question
2
  • Does it need to be Bootstrap v5? Or would v4 work? Commented Mar 5, 2021 at 17:15
  • @Andrew bootstrap v5 Commented Mar 5, 2021 at 17:16

4 Answers 4

Reset to default
7
+50

A potential solution for you is to use both css frameworks concurrently.

You can import and use Bootstrap 5 using npm install bootstrap@next (more detail here: https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/).

Then to avoid class name collisions you can setup a prefix for your Tailwind classes; in tailwind.config.js you could add a tw- prefix by setting the prefix option (more detail here: https://tailwindcss.com/docs/configuration#prefix):

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

You will have a bit of work updating the existing Tailwind classes with the prefix but it will work.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The following online tool can apply prefix to Tailwind classes github.vue.tailwind-prefix.cbass.dev . You'll have to copy/paste each file but that's better than adding prefixes manually.
0

There is a package made for this https://github.com/nascent-africa/jetstrap

It allows you to switch between Bootstrap, Tailwind and other UI Kits.

Improve this answer

1 Comment

thanks but I want to use tailwind Css in Jetstream.
-2

You have Boostrap-vue but it is still Bootstrap 4 (they are migrating to B5)

npm i bootstrap-vue

If you really need Bootstrap 5 you can do

npm install bootstrap@next

Or import it via CDN

https://getbootstrap.com/docs/5.0/getting-started/download/

Improve this answer

5 Comments

Read your own question. "bootstrap instead of tailwind CSS". And I did not say to remove tailwindcss. You can use them together.
What problem do you face that you cant use them together now?
tailwind CSS and bootstrap is overlap. I'm using Jetstream, and jetstream for helping application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum so Laravel Jetstream uses tailwind CSS for the front-end and I just wanna use bootstrap in my Welcome.vue component. I hope you understand.
Jetstream was build to use with Tailwind. If u want to remove it you should rebuild all the views to bootstrap. It is not a good idea to combine Tailwind css and bootstrap but it will work.
Let us continue this discussion in chat.
-2

Though Laravel 8 comes with Tailwind by default, we can still use bootstrap or similar CSS framework for our app.

Navigate to the project folder and install the latest version of the laravel/ui package

composer require laravel/ui

Then install Bootstrap:

php artisan ui bootstrap

Execute the below command to install the auth scaffoldings with Bootstrap:

php artisan ui bootstrap --auth

Then install the bootstrap package and its dependencies from npm:

 npm install

 #development
 npm run dev 

 #production
 npm run production

The above command compiles CSS and JavaScript files from resources/js and resources/sass folder to the public folder.

Automate sass and js changes:

 npm run watch

Now we can define the js and css path and use bootstrap in the blade template:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

Hope this works for you!!

Improve this answer

3 Comments

This lays out installing bootstrap nicely but OP mentioned that they require Bootstrap v5 specifically. laravel/ui comes with Bootrap v4. They also want to use both Tailwind and Bootstrap (in different parts of their application - Bootsrap v5 specifically in the welcome.vue component and Tailwind elsewhere), your solution I think is directed at using one, or the other (or there would b overlapping class names).
I'll make amendments for bootstrap 5, thanks for pointing out the problem.
I agree to Andrew, unfortunately this is not a solution,I just wanna use bootstrap in my Welcome.vue component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.