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
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 need to use a package that can be resolved by CDN URL pointing mechanism, see Material Icon package installation here, like the following
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
However, when I wanted to use Icons from the above package like the following in my Typescript,
import MenuIcon from '#material-ui/icons/Menu';
It tells me the following error
Module not found: Can't resolve '#material-ui/icons/Menu'
I understand that I can solve the package missing problem by npm install the corresponding package (suggested like this https://github.com/mui-org/material-ui/issues/10571), but I am wondering if the CDN based package management can work for Typescript or not.
If you want to use this to load icons:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Then you can only use icons like this:
import Icon from '#material-ui/core/Icon';
// To use an icon simply wrap the icon name (font ligature) with the Icon component:
<Icon>star</Icon>
Read these instructions: https://material-ui.com/style/icons/#font-icons
This doesn't really have anything to do with Typescript.
If you want to import individual icons (import MenuIcon from '#material-ui/icons/Menu';), then you do indeed need to:
npm install #material-ui/icons
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">
I want to use Materialize CSS library along with Ionic app. Can I use it? Will it have any performance issues?
Is there any other library so that I can give a 'Material Design' feel to my app
You can use either Materializecss or Google Material Design. Either will work fine with Ionic. Both have plenty of documentation. Assuming you're using bower -
For Google MDL
bower install material-design-lite --save
then just include the css and js in your index.html file
<link href="lib/material-design-lite/material.min.css" rel="stylesheet">
<script src="lib/material-design-lite/material.min.js"></script>
For Materializecss
bower install materialize
then include the basic files in your index.html file.
<link href="lib/materialize/dist/css/materialize.min.css" rel="stylesheet">
<script src="lib/materialize/dist/js/materialize.min.js"></script>
You may have to change the directories to the correct path of your bower installs.
Documentation on both for referring to components, css, javascript.
Google MDL = https://getmdl.io/components/index.html
Materializecss = http://materializecss.com/