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. (https://i.sstatic.net/7dvJb.png)

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

Caution: Exercise caution when utilizing a component sourced from a variable

Attempting to create a login and registration form

How can I keep images from getting cut off when using slick slider with a fixed background?

Ways to showcase the Item's name in the Material-UI Data Grid

Changing an HTML container using jQuery and Ajax to facilitate a login process

Access and retrieve data from a string using XPath with JavaScript

The jQuery AJAX call is successful in Firefox, but unfortunately, it is not working in Internet Explorer

Failure of Outlook 2007, 2010, and 2013 to Recognize Conditional CSS

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

What could be causing jQuery to overlook the content within my div element?

React Grid by DevExtreme

Problem with loading images on an HTML webpage

Enhance User Experience with a Responsive Website Dropdown Menu

What is the best way to align a modal with a layout when it appears far down the components hierarchy?

Display issues with CSS Absolute Positioning in IE11

File index with Node.js server for handling files

Adjust the width of the indicator on Tabs in Material-UI

Serving static files in Django

What is the best way to hand off a component to a helper function?

Why is a div nested inside an overflow: hidden; div not expanding to the full width of its content?