Question 184656 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Purple Button in Bootstrap

thanks for reading. I’m new to React but I’m building a web app with React.js and ASP.NET Core. I’m using the following code:

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';

export class Counter extends Component {
static displayName = Counter.name;

constructor(props) {
super(props);
this.state = { currentCount: 0 };
}

render() {
return (
  <div>
     <h1>Patient Survey</h1>
     <p>Please click the button below to get started</p>
     <ul>
         <button type="button" color="primary" class="btn btn-success btn-lg">Go to Survey</button>
     </ul>
  </div>
);
}
}

to render a page that looks like the included photo.
image

Is there anyway I can make the button purple instead of green? I downloaded bootstrap to my project through npm, but I can’t find anywhere on the website how to change the buttons from their standard colors like "danger" and "success" to something individual like purple.

Let me know if I can include any more code to help figure this out! Thanks!

Tags:

3

Answers


  1. 0

    Add a style attribute to the button.

    <button 
    type="button" 
    color="primary" 
    class="btn btn-success btn-lg" 
    style={{ backgroundColor: 'purple' }}
>
    Login or Signup to reply.
  2. 0

    You should be able to access to your class in the CSS file by adding the corresponding class in css.

    For example : className="btn btn-success btn-lg btn-purple"

    Login or Signup to reply.
  3. 0

    I believe you can set the color a few different ways. A simple approach would be to add a style attribute to the button tag.

    <Button type="button" color="primary" style={{ backgroundColor: 'purple' }} className="btn btn-success btn-lg">Go to Survey</Button>

    The style tag allows you to pass an object with several different css style. In this example we are changing the background color to ‘purple’.

    Colors can be represented many different ways hex, rgb, names, etc. A good reference for colors is MDN Colors

    Bootstrap might provide a predefined class for purple backgrounds, this I am not sure of.

    You can always define your own css class as well.

    .purple-button {
  background-color: 'purple';
}

    <Button type="button" color="primary" className="btn btn-success btn-lg purple-button">Go to Survey</Button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search