Question 205671 in Html Question posted in
Some basic documentation can be found here.

Html – Custom .CSS file/classes not importing to React Bootstrap app?

This is a continuation from Trying to shift my React button based on numerical values (##px) doesn't work?.

I’m trying to move a button my webpage based on whatever value I set right: ##px to, but no matter what value I try, the button doesn’t move at all beyond a few set positions.

After doing some inspect element on the button, it turns out btn-top-right is nowhere in sight. Yet btn, btn-primary, and float-end show up on the button’s styles/inspect element (whatever you’d like to call it).

Any thoughts?
Dash.js:

import 'bootstrap/dist/css/bootstrap.min.css'; // Import the Bootstrap CSS file
import {Container, Row, Col } from 'react-bootstrap';
import init from './Svg'
import axios from 'axios'

import classes from './Dash.module.css'
const Dash = (props) => {
...
  render() {
    return (
      <div className="container">
        <button className="btn btn-primary btn-top-right float-end">CPU</button>
      </div>
    );
  }
...
}

and Dash.Module.css:

.btn-top-right {
    position: absolute;
    top: 2000px;
    right: 50000px;
  }

File/Directory Structure here (Image)

Tags:

2

Answers


  1. 0

    Since the class is absent I would suspect your code is being cached.

    Try performing a hard reload ctrl + shift + R or launching your site in an incognito window.

    Login or Signup to reply.
  2. 0

    The preference given to Bootstrap.min.css is higher than your file. But you can overwrite it by using !important keyword

    .btn-top-right {
    position: absolute !important;
    top: 2000px !important;
    right: 50000px !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search