How to put the cancel button on the bottom right?

Question

I'm using this code for the "cancel" button. How do i make the cancel button to be on the bottom right on the screen.

    <button class = "btn btn-secondary margin-r-10" (click)="close()">
    Cancel
    </button>

check my answer in below if you satisfy then mark this answer.. — Kiran Mistry, May 14 '20 at 05:02

score 1 · Accepted Answer · answered May 14 '20 at 05:14

1

You can add this css to button

button{
  position: absolute;
  right: 10px;
  bottom:  10px;
}

Demo https://stackblitz.com/edit/angular-ivy-rqnqtu

answered May 14 '20 at 05:14

Hien Nguyen

24,551
7
52
62

Alvison Hunter · Answer 2 · 2020-05-14T05:16:41.467

If you are using bootstrap,(which I am assuming you are), Please try the following code:

<html>
    <head>
      <title>Button to the right</title>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body>
<div class="container-fluid">
<button class = "btn btn-secondary float-right my-2" (click)="close()">Cancel</button>
</div>
</body>
</html>

score 0 · Answer 3 · answered May 14 '20 at 05:00

This will work for any resolution,

add more class in button this is the class rightbottom

and use the css

.rightbottom {
  position: absolute;
  right: 10%;
  bottom: 15%;
}

.rightbottom {
  position: absolute;
  right: 10%;
  bottom: 15%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<button class="btn btn-secondary margin-r-10 rightbottom" (click)="close()">
  Cancel
</button>

How to put the cancel button on the bottom right?

3 Answers3