bootstrap 4 center heading and right align button all in one row - css

Question

I'm using Bootstrap 4 with React. I'm trying to center a h4 and right align couple of buttons all in one row. I could get it done but the h4 text is not centered to the entire width. It is centered only to the space that is remaining after buttons are placed.
I would like to center the h4 element to the entire width while placing the buttons to the right all in one row.
May I know how to achieve this?
<div>
<div className="float-right">
<EditButton /> <DeleteButton />
</div>
<h4 style={{ textAlign: "center" }}>Application Name</h4>
</div>

Answer 1

I'm understanding you want something similar to this, you would have to first set a display: inline property to the h4 so the buttons (which are inline by default) follow the heading, and then a text-center class will center everything; but I think you also want the heading itself to be at the center of the screen and the buttons at the right of it, correct?
.buttons {
top: 0px;
right: 0px;
}
h4{
right: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<h4 class="text-center">H4 Title</h4>
<div class="text-center">
<h4 class="d-inline">H4 Title</h4>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<div class="text-center mt-5 position-relative">
<h4 class="w-100 text-center">
H4 Title
</h4>
<div class="position-absolute buttons">
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
</div>

Answer 2

You can center text by using class text-center and right align button by using class text-right
where container-fluid is use for full width and m-0 p-0 is margin: 0; & padding: 0 for remove corner space.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid p-0 m-0">
<div class="text-center">
<h4 class="d-inline">i am H4</h4>
<button class="d-inline float-right btn btn-info">Demo</button>
</div>
</div>