htmlcssreactjsbootstrap-5react-button

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

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:

  1. when I have the opening tag, <div className="container">, the button is pretty far on left side

  2. 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

  3. The button here is positioned on the right, but a little too far for me. (https://i.sstatic.net/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?

Solution

  • 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>