I am importing {Button, ButtonToolbar} from 'react-bootstrap' (it's saved in the dependencies list), however my page still appears bare. What is the reason for this?
Did you include stylessheet of bootstrap in your index.html? react-bootstrap still needs this to work properly. Hope it helps
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
However, I think you should just use normal button bootstrap by adding className of btn btn-primary, it still works fine with reactjs and give you ability to customize
Related
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 have created a React Application and copied navbar from bootstrap component. I also added cdn files at index.html file. Also changed changed class to className but still but when run I get error with failed to compile and cursor is placed on data-toggle="colapse". upon removing this line it moves to next one. but its not working. .
working with bootstrap in react is not simple, it is easier to use React-bootstrap.
https://react-bootstrap.github.io/
you then just download the npm package and import the buttons and other options you want.
If you want to go about doing it this way, then you would need to use <button className="bootstrapclass">hello</button>
or specifically
<button className="btn btn-secondary">hello</button>
outside of that, there is no way to use bootstrap.
it is advisable that you share your code, so people can see what the mistake is.
The error was because of attaching cdn at outside the body. I resolved this by placing cdn of CSS and JS at just before the closing body tag.
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
In the official website , there is a way to import the Module to the project
import { Link } from 'react-router-dom'
import Button from '#material-ui/core/Button';
<Button component={Link} to="/open-collective">
Link
</Button>
However is there anyway to call the object by Browser global(window object)?
You can use a CDN version, include that in your index.html, then you will be able to access it.
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
and the font file.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
Here is an example https://github.com/mui-org/material-ui/tree/master/examples/cdn
It should be noted according to their documentation
You can start using Material-UI with minimal Front-end infrastructure,
which is great for prototyping. We discourage using this approach in
production though - the client has to download the entire library,
regardless of which components are actually used, affecting
performance and bandwidth utilisation.
Are Cards added to React-Bootstrap yet?
Or is there any other undocumented way of adding it?
What I am thinking of right now is -> className = 'bootstrap card class syntax', but I guess, it won't work because it won't recognise it.
Sort of found the answer, but it doesn't go by the name of card
You can use <Thumbnail>, it gives the same feel as that of a card.
Bootstrap classes can be used the same way in react like in any non-react project, even without the use of react-bootstrap. It can be imported as a CDN in your index.html file...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
... or it can also be saved locally and imported that way. Or you can configure webpack to import css files directly into your project.
You'd just have to make sure to use className= instead of class=, but otherwise, it works exactly the same way.
<div className="col-xs-12 well"></div>
react-bootstrap is an add-on that provides components that do the same thing. So, even if it's not in react-bootstrap yet, you can still use the functionality, but just as a straight css class.