CODEWITHSUNDEEP
javascriptphpreactjslaravelbootstrap-4
tontus
tontus

Reputation: 179

Bootstrap is not working in laravel react ui

I've set up my new laravel project with react UI using php artisan ui react. Did the npm install and npm run dev. Added the react id and script link to the welcome.blade.php. now the example react component is loading but bootstrap styling isn't present at that page. my codes are below, app.js:

require('./bootstrap');



require('./components/Example');

Example.js:

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

I'm using laravel 8.12. Am I missing something?

Upvotes: 1

Views: 993

Answers (2)

Javar
Javar

Reputation: 131

You need to include styles:

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

to your welcome.blade.php view file, where is located <div id="example"></div>

Upvotes: 2

Jaswinder Singh
Jaswinder Singh

Reputation: 731

I faced issues with Pagination error while using bootstrap ui.

Additionally, I will suggest adding this code to AppServiceProvider.

use Illuminate\Pagination\Paginator;

public function boot()
{
     Paginator::useBootstrap();
}

Upvotes: 1

Related Questions