How to Place Button on Right Side in Reactjs

align button right reactjs

You need to add display flex to the parent element of your Button.

See sandbox here for example: https://codesandbox.io/s/testproviderconsumer-klcsr

class App extends React.Component {
  render() {
    return (
      <div style={{ display: "flex" }}>
        <button
          style={{ marginLeft: "auto" }}
        >
          Click
        </button>
      </div>
    );
  }
}

{{display: 'flex', justifyContent: 'flex-end'}} are defined in the parent element to align items in the child element.

how to give button a button right alignment in bootstrap?

Add class: ml-auto (= margin-left:auto !important) into:

<div className="btn-group ml-auto">

As this div is in a div.row that has the property display:flex; applied, it should push it to the right automaticly

How to position this button to the right in this Navbar

Well, there are some approaches to solve your current problem or even make your code structure much better. As @pat said earlier it's better to control your item positioning with grid tools, like flexbox and its relevant properties.

But if you just intend to move your toggle to the right side and you just defined two Col element (Columns), you can simply move it around its container with text-align property (In your particular case: text-align: right;). So if you want to do it with react-bootstrap built-in classes you can use text-right on the toggle container like this:

<Navbar expand="false" bg="dark" variant="dark" fixed="top" collapseOnSelect className={`navbar`}>
  /* navbar brand */
  <Col>
      /* first col items */
  </Col>
  <Col className="text-right">
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  </Col>
</Navbar>

Also, there is no need to add margin-left property to the form-inline class, because it will only move the left column to the right.

Update

As I said earlier for managing your blocks it's better to use grid tools. So I just create a sandbox for that that you can see here:

I the above sandbox I just removed the Col items and add d-flex (This is the equivalent of display: flex;, you can read more about flexbox here) to the parent, which is the navbar itself. Then just add the justify-content-between which make sure there is always space between items in the same row whenever there is extra space available and finally to align them vertically I just used align-items-center. To make sure the form elements are always in the same line just added the flex-nowrap to the form element itself. Well, the elements in the smaller viewport will stack on top of each other, which the normal behaviour of flexbox but you can modify it however you want.

How to make a button float right in React?

If you set the margin to auto on a flex item, it will grow to the maximum available space. So the following will do the trick:

.serverNav {
  display: flex;
}

.serverNavButtonWrapper {
  margin-left: auto;
}

Or, if you don't need the wrapper anymore:

.serverNav {
  display: flex;
}

.serverNavButton {
  margin-left: auto;
}

Cannot align button properly below text in react native

Try this out...

<View style={{ padding: 20 }}>
    <Text>{props.description}</Text>
    <TouchableOpacity
      style={{
        marginTop: 20,
        backgroundColor: "cornflowerblue",
        height: 45,
        width: 100,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style={{ fontSize: 17, color: "white" }}>Delete</Text>
    </TouchableOpacity>
  </View>

Edit as per your requirement ...

How to align a Button to the far right in MUI AppBar?

Toolbar is a flexbox, so you can add a div on the left side and set justify-content to space-between to push the Button to the right:

<Toolbar sx={{ justifyContent: "space-between" }}>
  <div />
  <SignUpForm />
</Toolbar>

How to add a Button on the right of the TextField?

Use InputProps, and provide endAdornment to it. simple example:

 <TextField
    id="standard-name"
    label="Name"
    value="hello"
    InputProps={{endAdornment: <YOUR_COPY_ICON_BUTTON />}}
  />

---

Related Topics