0

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)

Yajax
  • 31
  • 6

2 Answers2

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.

Eric Hall
  • 21
  • 3
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;
}
Rajat Raghuvanshi
  • 16
  • 2