Customize the appearance of a react-bootstrap button using CSS styling techniques

As someone new to React and JavaScript, I have been utilizing the Button component from react-bootstrap found at this link. However, I am facing difficulties when trying to style the Button using my CSS file in my React app.

In my Home.js file:

import React from "react";
import '../App.css';

export default function Home() {

  return (
    <div>
      <h2>Home</h2>
      <Button variant="light" className="formButtons">
    </div>
  )
}

And in my App.css file:

.formButtons {
  margin: 10;
  overflow-wrap: break-word;
  color: red;
}

Despite defining the color as red in the CSS file, it seems that the styling is not being applied as the text color remains unchanged.

Any help or advice would be greatly appreciated. Thank you!

Answer №1

To begin, you should import the Button element from react-bootstrap. Use the following code snippet:

import Button from 'react-bootstrap/Button'

Next, you can omit the className attribute as React Bootstrap automatically generates consistent component classNames that you can depend on. Style your button based on the variant attribute like this:

Home.js

import React from "react";
import Button from 'react-bootstrap/Button'
import '../App.css'; // Represents the directory structure

export default function Home() {
  return (
    <div>
      <h2>Home</h2>
      <Button variant="light">TEXT</Button>
    </div>
  )
}

App.css

.btn-light {
   margin: 10;
   overflow-wrap: break-word;
   color: red;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to streamline the restart process in my game and eliminate the extra unnecessary click?

This game requires you to click each image once without clicking one twice. The issue arises when trying to reset the game after all images are clicked. Currently, it requires an extra random click after all 12 images have been clicked in order to render t ...

Tips for sorting on an ANTD table with a JSON array column instead of a string

I am facing an issue with filtering and searching in an antd table. The table has 2 columns, and I want to filter on the first column and search text on the second one. After rendering the application, everything seems fine. However, there is a problem re ...

Tips for aligning the first row of a table with a line of text

I need assistance aligning the first row of a table with a line of text. Specifically, I am trying to achieve ** some text ** |first row of table      |             ...

An error-free blank page in Three.JS with a CSS3DRenderer

After implementing the CSS3DRenderer in my code, I am encountering a blank page without any errors. My main focus is to draw a line using the CSS3DRenderer as the rest of my code relies on its functionality. Here is the HTML code snippet: <!DOCTYPE htm ...

What is the recommended way to set up environment variables in a React JS application running on a Kubernetes cluster?

I'm curious about the best practices for managing environment variables in a React application deployed on K8S, particularly third-party service apiKeys for example. Typically, environment variables are stored in .env files to be used during the buil ...

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

i need to display a list of cards in a component, each card has a description coming from the server. In my component.html, I am using a ngFor like this: <div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img- ...

Customize the background in a blogger template without using the body.background property

I am using a custom Galauness template on my blogger site (http://nethoroskop.blogspot.com), but I want to add my own image as the background. Can anyone guide me on how to do this? The HTML code does not include any reference to body.background. body{ ba ...

Ways to adjust the position of a DIV based on its index value

I'm currently working on a unique project that involves creating a triangular grid using HTML and CSS. The challenge I am facing is offsetting each triangle in the grid to the left by increasing amounts so they fit seamlessly next to one another. Righ ...

Rearranging the grid table in ag-grid by relocating a newly visible column to the bottom

Seeking a solution for organizing newly added columns in a React app using ag-grid version 28.1.1. Currently, the columns are automatically sorted alphabetically upon addition from the Columns toolpanel. Is there a way to move a new column to the end of th ...

Using a JavaScript command, connect a function from one file to another file

I attempted to import a function because I want to click on <il> servies</il> and scroll to the services section on the home page. However, I simply want to click on the li element in the navbar and scroll to the service section on the home pag ...

Examples of how to specify a child class in CSS

Presented here is the following structure: <article class="media media--small 48"> <a href="#"> <img src="" class="media__img" alt=""> <i class="s s--plus"></i></a> <div class="media__body"> < ...

Can the card overlay slide appear solely on top of the image?

I am trying to create a gallery section of cards using Bootstrap 4 where I want the user to hover over each card and have an overlay slide or fade in, covering only the image. Currently, the overlay slides in over the entire card instead. I have been stru ...

What is the proper location to insert CSS within Laravel?

What is the recommended location for storing CSS or JS files in Laravel? More specifically, what are the differences between placing CSS files in /public versus /resources/css? Which directory is preferable for storing my CSS files? ...

What is the method for extracting element.style.marginTop in digits exclusively?

Consider an HTML element with the property margin-top: 30px. function extractValue(margin) { /* to do */ } var element = document.getElementById("element"); alert(extractValue(element.style.marginTop)); #element { margin-top: 30px; } <div id=" ...

Position a modal in the vertical center with scroll functionality for handling extensive content

Looking for ways to tweak a Modal's CSS and HTML? Check out the code snippets below: div.backdrop { background-color: rgba(0, 0, 0, 0.4); height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 2020; } ...

The overflow scroll feature seems to be malfunctioning and not working as intended in the

I'm trying to implement the overflow scroll property in a div to display a scroll bar for the user, but I'm facing issues. I'm unsure what the problem could be. The code I'm working with can be found here : http://fiddle.jshell.net/Gg ...

The contrastText property of the MUI React Theme palette is not functioning properly

I am working with MUI React to design a menu and I have utilized the AppBar component. I would like to customize it in the following way: brown.myBrown = '#544846'; const brownTheme = createTheme({ palette: { primary: { ma ...

In Firefox, resizable child elements in a flex container cannot be resized

Exploring the realm of flexbox has brought me to a bit of a roadblock with a layout like this one: https://jsfiddle.net/5b0pLgkj/ Everything seems to be running smoothly in Chrome and Safari, where children elements can be resized and fill up the availabl ...

Background image color not displaying correctly

I've been attempting to overlay a transparent color on top of a background image. While the background image is displaying correctly, I'm having trouble getting the color to show up. I noticed that this question has been asked before. I tried im ...

Align two span elements to the right using Bootstrap's float-right class

My task is to align two span elements, one with the Bootstrap 4 class 'close' and the other with class 'badge', to the right. However, whenever I try to float the badge to the right, they end up right next to each other. On the other ha ...