Bootstrap is not working in laravel react ui

Question

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?

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
– Ryan H, Commented Feb 5, 2021 at 17:36
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
– tontus, Commented Feb 5, 2021 at 18:09
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
– Ryan H, Commented Feb 5, 2021 at 18:15
@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
– tontus, Commented Feb 5, 2021 at 18:35

Javar · Accepted Answer · 2021-04-14 08:10:16Z

2

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>

answered Apr 14, 2021 at 8:10

Javar

1313 silver badges4 bronze badges

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

Comments

Jaswinder Singh · Accepted Answer · 2021-02-06 05:03:37Z

1

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

answered Feb 6, 2021 at 5:03

Jaswinder Singh

7315 silver badges20 bronze badges

Collectives™ on Stack Overflow

Bootstrap is not working in laravel react ui

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related