Bootstrap is not working in laravel react ui

1
votes

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?

2
javascriptphpreactjslaravelbootstrap-4
looks like you might be missing a css component to it. also if you are in react I would pull in bootstrap-react so you can add <Card> components in react-bootstrap.github.io - Ryan H
where do i add the css component? in example.js or in blade file. I am confused because every tutorial or video I've seen they are getting bootstrap styling just after the initial setup. - tontus
import './<pathToStyle>/bootstrap.css';. and don't forget that bootstrap needs jquery for many components to function properly, thought I doubt the card does ... and it would be in example.js - Ryan H
@RyanH Thank you for the help. I solved it by adding the proper path of node module bootstrap scss in app.css, it was before @import '~bootstrap/scss/bootstrap'; i changed it to @import "../../node_modules/bootstrap/scss/bootstrap"; and imported it to my example.js. - tontus

2 Answers

2
votes

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>

1
votes

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();
}