Trying to shift my React button based on numerical values (##px) doesn't work?

Question

So I'm trying to display my button more to the right. However, no matter what I try, I can't get it to move it beyond only a few positions. To generalize the million things I've been attempting and the outputs, the button displayed is always either:

when I have the opening tag, <div className="container">, the button is pretty far on left side
Or if I try as my opening tag as just <div> or <div className="btn-top-right">, the button is completely on the left side
The button here is positioned on the right, but a little too far for me. (https://i.stack.imgur.com/7dvJb.png)

Here's my current javascript/html + CSS:

<div className="container">
  <button className="btn btn-primary btn-top-right float-end">CPU</button>
</div>

where I also tried <div> and <div className="btn-top-right> for the opening tag in the above^ code snippet.

.btn-top-right {
    position: absolute;
    top: 20px;
    right: 50px;
  }

.btn-top-right {
  position: absolute;
  top: 20px;
  right: 50px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<div class="container">
  <button class="btn btn-primary btn-top-right float-end">CPU</button>
</div>

As you can see above, right is set to 50px, but no matter what value I try, it won't move. Any thoughts?

which version of bootstrap? you might want to add this to your tags — Ron, Jul 11 '23 at 08:57
@Ron Should be bootstrap version 5+ (latest one), but how do I check (sorry for the dumb question-I can't find it package.json or anywhere else in my project directory even though I have `import 'bootstrap/dist/css/bootstrap.min.css'; // Import the Bootstrap CSS file` in my App.js and no errors are being generated from there. — Yajax, Jul 11 '23 at 09:09
to check, you can open the CSS file you include, and at the very top there should be a version. Try to add class: `float-end` to the button — Ron, Jul 11 '23 at 09:12
Does this answer your question? [How to set an button align-right with Bootstrap?](https://stackoverflow.com/questions/20462043/how-to-set-an-button-align-right-with-bootstrap) — Ron, Jul 11 '23 at 09:13
@Ron That moves it to the right, yes, BUT I would still like to adjust the button numerically. `float-end` just keeps it in that specific position on the right without accounting for any ##xx I put in. You can also reference the edit I just made (where the blue CPU button is all the way to the right) — Yajax, Jul 11 '23 at 09:29
Well you did not have that clarification in your initial question. We can play back-and-forth this way all day, so please have a clear vision of your end-result in your question, add as much details as possible, before asking for help.. Add a reproducible example where we can see the actual issue, not screenshots.. and specify where and how EXACTLY you try to set your button to the right... We cannot work with or edit screenshots, in order to help you — Ron, Jul 11 '23 at 09:34
@Ron Apologies. I edited the question to better my reflect my specific issue and end goal (whatever value I assign to `right: ##px` doesn't move the button at all, whereas syntax/code bits like `float-end` does move the button but not based on any numerical values) — Yajax, Jul 11 '23 at 17:02

score 0 · Answer 1 · answered Jul 11 '23 at 17:09

0

Use position:relative; in the parent element for the absolute property to work you need to have the parent element in relative position or alternatively you can use fixed position on the button

try this:

<div className="container">
    <button className="btn btn-primary btn-top-right float-end">CPU</button>
</div>

.btn-top-right {
    position: absolute;
    top: 20px;
    right: 50px;
  }

.container{
   position:relative;
}

answered Jul 11 '23 at 17:09

Nimish G j

1
2

Tried it, but no matter what value I put in right: ##px in btn-top-right, https://i.stack.imgur.com/7dvJb.png the button always stays in this^ position :( – Yajax Jul 11 '23 at 17:18

score 0 · Answer 2 · answered Jul 11 '23 at 17:25

0

It is working perfectly. Please put any value and check. You can move it anywhere you want.

.btn-top-right {
    position: absolute;
    top: 20px;
    left: 50px;
    /* put any value and it will move wherever you want */
}

  <!-- Bootstrap CSS v5.2.1 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
 
    
  <div class="container">
      <button class="btn btn-primary btn-top-right float-end">CPU</button>
  </div>

answered Jul 11 '23 at 17:25

Md. Rakibul Islam

2,140
1
7
14

How'd you get this to work on stackoveflow? The button shifts properly on this webpage, but it doesn't work locally still?? – Yajax Jul 11 '23 at 17:36
Use ```class=``` instead of ```className=``` as this one is for React App (I guess). It will not work in html/CSS. – Md. Rakibul Islam Jul 11 '23 at 17:39
Locally, it says "Warning: Invalid DOM property `class`. Did you mean `className`?" – Yajax Jul 11 '23 at 17:46
If you are using React in your local environment then you should use ```className=``` and it should work like this. – Md. Rakibul Islam Jul 11 '23 at 17:51
I tried it on React as well and it works with ```className=``` – Md. Rakibul Islam Jul 11 '23 at 18:11
hmmmm still doesn't work-after some inspecting element, I noticed btn-top-right is nowhere to be found on the button? – Yajax Jul 11 '23 at 18:15
Here is the link of React playground: https://codepen.io/rakibul2010islam/pen/abQEBpx – Md. Rakibul Islam Jul 11 '23 at 18:27

score 0 · Answer 3 · answered Jul 11 '23 at 17:55

You might have to account for built-in bootstrap styles on the container.

Here are two examples of two different container types and how I used the padding on the container-fluid for example to put the padding to 0 using ps-0 then put a margin on the button to move it from the left. Might need some specifics but as the first example shows be careful of the position since it might get outside of the container which may not be the desired behavior.

.custom-button {
  border: solid pink 1px;
  box-sizing: border-box;
  background-color: #00FF0011;
}

.custom-button .btn-custom {
  position: relative;
  left: 50px;
  top: 20px;
  border: solid blue 2px;
}

.custom-button-two {
  border: solid orange 1px;
  box-sizing: border-box;
  background-color: #0000FF11;
}

.custom-button-two .btn-custom {
  margin-left: 20px;
  margin-top: 20px;
  border: solid blue 2px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>

<body>
  <div class="container custom-button">
    <button class="btn btn-primary btn-custom">CPU</button>
  </div>
  <div class="mt-5 ps-0 container-fluid custom-button-two">
    <button class="btn btn-secondary btn-custom">CPU</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
</body>

</html>

Please note `class=` vs `className=` since you indicated only plain HTML here but depends on the render part - the CSS applies to the former which is the rendered HTML — Mark Schultheiss, Jul 11 '23 at 18:40

Trying to shift my React button based on numerical values (##px) doesn't work?

3 Answers3

Linked