Can I use Bootstrap in my React Js App? if yes, then how do i use? I would be great if you can help me out with some example.
Yes, you can install bootstrap by npm i bootstrap and import the css in App.js file like this import 'bootstrap/dist/css/bootstrap.cssbut you can also use react-bootstrap for the pre-created bootstrap component:
npm i react-bootstrap
Yes you can use bootstrap in react
npm install react-bootstrap bootstrap
or yarn add react-bootstrap bootstrap
import this in app.js
import 'bootstrap/dist/css/bootstrap.min.css';
I have installed react-bootstrap with:
npm install react-bootstrap bootstrap
command, and successfully imported it:
import Carousel from 'react-bootstrap/Carousel'
<Carousel>
...
</Carousel>
but it's styles didn't applied!
What I need to do to use it correctly?
React-Bootstrap doesn't come with bootstrap CSS automatically - it only produces the corresponding div elements with classes.
If you're using css modules, import the bootstrap css in index.js:
import "bootstrap/dist/css/bootstrap.min.css";
If you're using normal HTML, include bootstrap.min.css in your html file somehow.
Can someone please explain how to add bootstrap to react app and how to use them inside react components since we can not add CDN links and "class" attribute inside a react app. Would you kindly please explain how to use bootstrap components inside react app. This will really helpful for me since i'm a very beginner to react developer..
Read this
https://react-bootstrap.github.io/getting-started/introduction
1. install react-bootstrap
npm install react-bootstrap bootstrap
2. import css file in your index.js or app.js
import 'bootstrap/dist/css/bootstrap.min.css';
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
3. import components like
import { Button } from 'react-bootstrap';
You can use normal bootstrap classes like className="row"
You can't use bootstrap directly in react application instead you can use reactstrap which contains the bootstrap components.
Example of using reactstrap inside react
import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
return (
<Button color="danger">Danger!</Button>
);
};
If you want standard Bootstrap
install
npm i bootstrap
import in App.js
import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap"; // <-- JS File
I'm attempting to using react-fontawesome and implementing it in what seems to me to be exactly the same as the readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md
import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
render() {
return (
<div>
<div>
<span>
<FontAwesome
className='super-crazy-colors'
name='rocket'
size='2x'
spin
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
SOME TEXT
</span>
</div>
...
</div>
)
}
}
But I'm not seeing an icon in the DOM. Although I do see in the Chrome Dev Tools:
<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>
which I feel like should be a <i> tag. I tried changing the <span>...</span> to an <i>...</i> in "edit as HTML" in the dev tools and the icon still didn't show.
I have add-module-exports in my plugins and stage-2 in my presets in my webpack.config.
Can anyone tell me if I'm missing something? Do I need some other package other than react-fontawesome to make this work? Do I need to import the standard font-awesome.css or load a font-awesome CDN? Any help would be greatly appreciated, thanks!
I had the same problem. Read their Readme.md, and you see that there is this note:
Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.
So the most simple way is to link to the fontawesome cdn in your html.
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
Run npm install font-awesome --save
In your index.js or App.js or YourComponent.js, import the minified CSS file.
import 'font-awesome/css/font-awesome.min.css';
As the other answers mention, you need to include the icons in your page somehow. Check out the react-fontawesome example here:
https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html
You can see that the developer has included the font-awesome CSS on line #5.
On a separate note, Font Awesome v5 has been released, and you should consider moving to it. Read relevant docs here:
https://www.npmjs.com/package/#fortawesome/react-fontawesome
To use v5:
Install dependencies:
$ npm i --save #fortawesome/fontawesome
$ npm i --save #fortawesome/react-fontawesome
$ npm i --save #fortawesome/fontawesome-free-solid
Your component can then use icons like so:
import ReactDOM from 'react-dom';
import FontAwesomeIcon from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/fontawesome-free-solid'
const element = (
<FontAwesomeIcon icon={faCoffee} />
)
ReactDOM.render(element, document.body);
You can also build a library of commonly used icons in your app, for easy reference. Check out working code here: https://codesandbox.io/s/8y251kv448
More details about the library function available here:
https://www.npmjs.com/package/#fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
The only example I got working that actually seems up-to-date and didn't throw "can't resolve 'react' errors:
https://scotch.io/tutorials/using-font-awesome-5-with-react
import React from "react";
import { render } from "react-dom";
// get our fontawesome imports
import { faHome } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// create our App
const App = () => (
<div>
<FontAwesomeIcon icon={faHome} />
</div>
);
// render to #root
render(<App />, document.getElementById("root"));
Font Awesome now has an official React component that’s available to use their icons in your React applications.
Step 1 :
you must install 3 important packages in your project using a package manager like npm:
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
Step 2 :
if you're planning on styling the icons you must download these two extra packages :
npm install --save #fortawesome/free-brands-svg-icons
npm install --save #fortawesome/free-regular-svg-icons
Step 3:
Once you’ve installed all the packages you need for your project, now you can use the icons.
Import this packages in your component like this:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
After that you can import an icon into your component like this (example
using an icon with the class as "fas fa-atom")
import { faAtom } from '#fortawesome/free-solid-svg-icons'
P.S : you can import multiple icons in one import with adding a coma between
each one.
Step 4 :
use the imported icons
const element = <FontAwesomeIcon icon={faAtom} />
SOURCE : https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
This seems to work perfectly for React
Installation:
$ yarn add #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome
Usage:
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)
Font Awesome 5 React
As #Alee pointed out Fontaweome fonts aren't included in the package. You will have to import it yourself.
Install npm font-awesome package. If you use npm run npm install font-awesome --save or if you use yarn then run yarn add font-awesome
Now you just have to import font-awesome.less under less directory by writing import 'font-awesome/less/font-awesome.less'
Now you should see your icons working :)
import fontawesome styles from the package itself without loading any external css:
import "#fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
See article to get more info
copy and paste in your html ...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
NEXT JS - Import styles this way if you are using NEXT jS
import '../node_modules/#fortawesome/fontawesome-svg-core/styles.css'
I suspect that you have not yet imported the CSS that FontAwesome needs - download the minified CSS file from FontAwesome's Web site and import it into your app.scss file or wherever else you're importing other stylesheets.
The react-fontawesome library is helping you create elements with class names like 'up-arrow', but without the stylesheet, your project will not know that there are icons corresponding to those classes.
Better to install everything all at once and then only import the icon you want,
npm i --save #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome #fortawesome/free-brands-svg-icons #fortawesome/free-regular-svg-icons
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faSpinner } from '#fortawesome/free-solid-svg-icons';
make sure to import the icon from the exact pack, you can use ctrl + space to use the power of suggections to fiding icons and for changing pack when your importing icon.
Make sure that you have installed the Font Awesome package correctly
using a package manager like npm or yarn. You can install it by
running the following command in your project directory:
npm install --save #fortawesome/fontawesome-free
Check if you have imported the required font awesome files in your
project. Make sure to import the necessary stylesheets and the icons
library in your project files. You can do this by adding the
following code to your main index.js file:
import '#fortawesome/fontawesome-free/css/all.css';
import { library }from '#fortawesome/fontawesome-svg-core';
import { fab } from '#fortawesome/free-brands-svg-icons';
import { fas } from'#fortawesome/free-solid-svg-icons';
Ensure that the icon name and style properties are set correctly.
You can use the FontAwesomeIcon component from the
#fortawesome/react-fontawesome package to display icons in your
project. For example, you can display a faUser icon with a solid
style using the following code:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faUser } from '#fortawesome/free-solid-svg-icons';
<FontAwesomeIcon icon={faUser} style={{color: 'black'}} />
If the above steps do not work, try clearing your browser cache and
restarting your development server.
If the issue persists, you may want to check the Font Awesome
documentation and GitHub repository for additional help and support
.
Try adding
<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>
to your main index.html within your react project.
I'm trying to get my hands on writing my first component using bootstrap 4.
import React,{Component} from 'react';
import {Button} from 'react-bootstrap-4';
class TextField extends Component {
constructor(props){
super(props);
}
render() {
return (
<Button bsStyle="primary" bsSize="large">Default</Button>
);
}
}
export default TextField;
In my index.js I call it as follows:
import React, {Component} from 'react';
import ReactDOM from "react-dom";
import TextField from './components/custom/text_field';
class App extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>
Helo World1
<br/>
<TextField id="test" />
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector('.container'));
When I run the app I don't get any errors but the button is not looking like its suppose to
Am I missing something?
You're responsible for including Bootstrap's CSS yourself with react-bootstrap, which react-bootstrap-4 is a (temporary) fork of.
As per its Getting Started guide:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
For more advanced use cases you can also use a bundler like Webpack or Browserify to include the css files for you as part of your build process but that is beyond the scope of this guide.
You would need to do the equivalent for Bootstrap 4.
by including Bootstrap 4 via CDN as above you only get css and any JS dependent component will not work. I've been facing this problems with React on Meteor.js.
What I did was to npm install:
"bootstrap": "^4.0.0-alpha.6",
"tether": "^1.4.0" // Tether is required by bootstrap.js
Import the css through the main js file:
import 'bootstrap/dist/css/bootstrap.css'
The only way I got full Bootstrap with JS was to grab a copy of bootstrap.js into my libs folder (any front end folder), modify it to import Tether at the top:
import tether from 'tether'
global.Tether = tether
For some reasons I couldn't find another way to resolve the Tether dependency.
Meteor does its own minification so I was not really bothered with the .min.js, however, you cannot import tether into a minified bootstrap.js.
Like many others I am waiting for a more "final" release of bootstrap 4 and possibly a simple npm i bootstrap --save procedure.