Is it possible to adjust the position of my React button using numerical values (##px) without success?

Question

Is it possible to adjust the position of my React button using numerical values (##px) without success?

I'm facing an issue with positioning my button to the right. Despite my best efforts, I haven't been able to move it more than a few positions. In summary, here are the scenarios I've encountered while trying to solve this problem:

When I use the opening tag
```
<div className="container">
```
, the button appears far on the left side
If I try using just <div> or
```
<div className="btn-top-right">
```
as the opening tag, the button is completely aligned to the left side
The button is positioned on the right side but slightly too far for my liking. ()

Below is the current javascript/html + CSS code I am using:

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

I have also tried using <div> and

<div className="btn-top-right">

as the opening tags 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf7eaf4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819c819f">[email protected]</a>/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>

Despite setting the 'right' property to 50px as shown above, the button remains unmoved. Any suggestions?

html css reactjs bootstrap-5 react-button

Answer 1

Answer №1

Make sure to take into consideration the default Bootstrap styles applied to the container.

For instance, I have provided examples of how you can adjust padding using the container-fluid class and apply specific margins to elements within it. It is essential to pay attention to the positioning of elements to prevent them from spilling outside the container, which may not be desired.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021f021c">[email protected]</a>/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">GPU</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9c908d9abfcdd1ceced1c7">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bca1bf">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
</body>

</html>

Answer 2

Make sure to take into consideration the default Bootstrap styles applied to the container.

For instance, I have provided examples of how you can adjust padding using the container-fluid class and apply specific margins to elements within it. It is essential to pay attention to the positioning of elements to prevent them from spilling outside the container, which may not be desired.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021f021c">[email protected]</a>/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">GPU</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9c908d9abfcdd1ceced1c7">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bca1bf">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
</body>

</html>

Answer 3

Answer №2

To make the absolute property work, ensure that the parent element has position:relative; set. Alternatively, you can also use a fixed position on the button.

Here's an example:

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

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

.wrapper{
    position:relative;
}

Answer 4

To make the absolute property work, ensure that the parent element has position:relative; set. Alternatively, you can also use a fixed position on the button.

Here's an example:

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

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

.wrapper{
    position:relative;
}

Answer 5

Answer №3

Everything is functioning flawlessly. Feel free to input any value and verify it yourself. The element can be relocated to any desired position.

.btn-top-right {
    position: absolute;
    top: 20px;
    left: 50px;
    /* Adjust values here to reposition the element */
}

  <!-- Include 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>

Answer 6

Everything is functioning flawlessly. Feel free to input any value and verify it yourself. The element can be relocated to any desired position.

.btn-top-right {
    position: absolute;
    top: 20px;
    left: 50px;
    /* Adjust values here to reposition the element */
}

  <!-- Include 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>

Is it possible to adjust the position of my React button using numerical values (##px) without success?

Answer №1

Answer №2

Answer №3

Similar questions

Contact the Material UI dialog box

Sending an onclick event to a child class through React and TypeScript

Click to shift the div downwards

What is the method to change lowercase and underscores to capitalize the letters and add spaces in ES6/React?

Building a Search Bar with React utilizing NextJS framework

I'm struggling to figure out why the CSS isn't working properly

Which is more suitable for integrating with smart contracts (ERC721) - frontend or backend development?

The default color is not in harmony with the predefined palette for components within the AppBar

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS

Scrolling through four limited list items automatically

Trouble with jQuery delay in updating the CSS attribute while using fadeIn

css displaying drop-down menu when hovered over

Tips for sending a Python email with attachment and including an HTML body along with an alternative plain text body

The signal property 'ɵunwrapWritableSignal' is not found on the specified type 'typeof import/node_modules/@angular/core/index")'

Error Message: React encountered an issue when trying to access the 'theme' property of an undefined object

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

Tips for implementing dynamic routing in React

Using JSTL tags may result in returning null or empty values when making Javascript calls or populating HTML

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

exploring the seamless transfer of values between Thymeleaf and Spring controllers, and vice versa