How do I add bootstrap classes to my jsx in codepen? I was trying to add container-fluid, row, and col-* to my divs in jsx but they're not working, anyone knows how?
Install bootstrap :
npm install bootstrap
Then add the following import statement to index.js file
import 'bootstrap/dist/css/bootstrap.css';
instead of writing <div class="container-fluid"></div> you write
<div className="container-fluid"></div>
Related
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 am creating React web page using Material UI. For using any element I need to import that element.
So I want know how to import whole Material UI library.
As we import required components in particular component so same we have to follow when we import material-ui. Hence in individual component we have to add import statement with particular components as::
import { Button } from '#material-ui/core';
or if multiple components then we can use comma separated import as
import { Button, Text } from '#material-ui/core';
Try this
import { Button, TextField } from '#material-ui/core';
in this article, https://material-ui.com/guides/minimizing-bundle-size/
To import material ui library as a whole with every single feature, you need to install multiple dependencies and import all of them.
First Import
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core
The font cdn link used by material UI is
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
The icons of the material UI cdn link is
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
The svg icons in material UI
// with npm
npm install #material-ui/icons
// with yarn
yarn add #material-ui/icons
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 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.