I am new bee trying out react, react-bootstrap-table, I followed the example code, but unable to render table with style.
in my table class I am importing the bootstrap css
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
inspect element shows head tag renders css, but still my table is not formatted, ,
Created this project in github github project, please advice what is missing.
To run the porject git clone, npm install npm start.
In index.html file.
Add this line for your stylesheet. Works.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
Related
I have this code. The code was generated with create-react-app and build upon. I am totally new to react and have no idea why my react-bootstrap is not registering. Any help would be appreciated. I made the repo public so feel free to pull it and please anyone more clever then I am, if you can please provide answer why the bootstrap is not registering.
Thank you very much !
Link to repo - https://github.com/ghost0124/CthulhuMythosWeb
You have to link bootstrap styling to your react styling.
Paste this import 'bootstrap/dist/css/bootstrap.min.css'; in your index.css or App.css file
Add style link <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> to index.html file in public folder
I can't seem to find a way on how to use bootstrap locally in react without npm or yarn bootstrap installation or even without CDN, every tutorial I find on how to use bootstrap they don't explain using bootstrap locally.
Please I need steps on how I can achieve this thanks
So I don't know this for sure, so please correct me if I am wrong. I am just trying to help you to the best of my knowledge.
There are multiple ways.
The first way is to import the CSS in the app.js (or the start of the React app). For the CSS you should have a file called bootstrap.css that contains all the CSS for Bootstrap. import './bootstrap.css'.
The second way is to import it in the html file. If you add the the <link rel="stylesheet" type="text/css" href="bootstrap.css">.
I don't know if this is the way it should be done!
I made an app using create-react-app and then I ran npm install react-bootstrap and then npm install bootstrap
Then in my main src/index.js file, I imported Bootstrap as : import "bootstrap/dist/css/bootstrap.min.css";
It still wont work on any components? I tried to add the Alert button in my app.js, it imported it successfully but when I added variant="success", it is displaying no colour!
I don't know the cause of this error. i tried running the bootstrap code that didn't work on another react project and it worked fine. i jst fixed this by using the cdn. maybe there was error in the bootstrap node installation
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> on my public html.
I prefer to use the CDN, so I get rid off those problems before having them. What you have to do is the following:
In your HTML file:
Inside your head tag, put this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
And inside your body tag, put this:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
just include import 'bootstrap/dist/css/bootstrap.min.css'; to your App.jsx and all is solved
I have bootstrap dependency inside the "head" tag of html file which references physically added library files that i downloaded.
I also have a bootstrap dependency inside package.json added via npm.
I only need the dependencies in one place right? For example i can remove from "head" tag and keep inside package.json?
Adding dependencies inside your package.json does not means that dependencies are automatically used by your bundle: you have to import stuff inside your JS/SASS to make this happen.
You didn't said what is you bootstrap dependency, but let say is the default Bootstrap package. You have to do:
import "bootstrap/dist/css/bootstrap.css"
To have the Bootstrap CSS bundled in your application.
The same for the JavaScript source... but I don't think you really want to have Bootstrap JS in a React app. Look at react-bootstrap instead.
Creating an app with the angular-cli, if I link the Material theme from my index.html (following instructions from https://getmdl.io/started/):
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-amber.min.css">
The complete code is in a github repo on linked-theme-bad branch where the components are not correctly styled with the theme:
However, if I follow the exact instructions in the angular-cli doc to include Angular Material and import the style in styles.scss:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
The complete code on basic-theme-works branch) where the components appear correctly:
My understanding is that the import merges into a single stylesheet and the link in the HTML page will make a separate request for the style theme. The question is why doesn't the linked style sheet approach work.
By the way, I'm running the app with ng serve but this is an isolated example from another app which also seemed to fail in the same way with files that were built with ng build.
You're importing the CSS file from the wrong source (material-design-lite). (and by the way, you're also looking at the wrong documentation. See the link below for the correct docs)
From material.angular.io:
Alternatively, you can just reference the file directly. This would look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
More Information on using a prebuilt theme