Cannot Apply Any Bootstrap Style in Using React-Bootstrap Library

Cannot apply any Bootstrap style in using React-bootstrap library

When you want to use react-bootstrap component you need use the bootstrap-css in your code in order to encorporate the styles.

You can do this by adding the follwowing in your index.html

<link rel="stylesheet" type="text/css" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

From the react-bootstrap docs

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.

DOCS

React bootstrap not styling my react components

The webpack config you use is a little different from the medium article.

In the medium article, the author uses style-loader and css-loader to process css file.

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      ...
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      ...
    ]
  },
};

style-loader will inject the css code to <style/> tag. So that is why the tutorial work

In your webpack config, you use typings-for-css-modules-loader to load css. With this loader, you need to pass the css class variable name to className.

It means you should write the code like (simplify some code):

import * as React from "react";
import * as bs from 'bootstrap/dist/css/bootstrap.css';
import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';

import { Button, Col, Row } from 'react-bootstrap';

import { Spinner } from '../shared/Spinner';

export class SigninForm extends React.Component {
  ...
  render() {
    return (
      <Row>
        <Col md={8}>
          <form className={bt["signin-form"]} onSubmit={this.handleSubmit}>
            <div className={bt["form-group"]}>
              <label htmlFor="email">Email</label>
              <input id="email" name="email" type="email" value={this.state.email} onChange={this.handleChange} />
            </div>
            <Button>Submit</Button>
          </form>
        </Col>
        <Col md={4}>
          Right Side
      </Col>
      </Row>
    );
  }
}

Pass bt[classname] to className.

I think it will work.

btw, I find another medium article using typings-for-css-modules-loader -> link.

How to include bootstrap css and js in reactjs app?

If you are new to React and using create-react-app cli setup, run the npm command below to include the latest version of bootstrap.

npm install --save bootstrap

or

npm install --save bootstrap@latest

Then add the following import statement to index.js file. (https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css)

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

or

import 'bootstrap/dist/css/bootstrap.min.css';

don't forget to use className as attribute on target elements (react uses className as attribute instead of class).

Can't use Bootstrap in React?

AMR,

Looks like you are trying to use components so i believe you are trying to use React-Bootstrap. Here it goes: https://react-bootstrap.github.io/getting-started/introduction

Run following to install it first:

    npm install --save react-bootstrap

then include it in your file:

    import Button from 'react-bootstrap/lib/Button';

EDIT: Adding styles as suggested in comments:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

How to change style from react bootstrap scss file?

You have many options:

• Use style attribute - style={{ color: "white" }}
• Use className attribute. Here you can just directly use a bootstrap class or create your own className="text-white"
• Create a css or scss and target links directly or via class: a svg { color: white; }
• You can also override bootstrap defaults, so ALL your links are white.

It really depends on what you try to achieve. Generally you can just override bootstrap styles with tool of your choice. If it doesn't work, add "!important".

Please look into following code sandbox:
https://codesandbox.io/s/eloquent-haze-764x9l

---

Related Topics