How to place a button at the same height as a title to the right?

byMR

February 13, 2022

I would like to put my button at the top right at the same height as the title.

Here is an example:

enter image description here

My result for now

enter image description here

I think I have a problem with my divs? The button does not want to be placed at the top right.

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">

    <h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
    <button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
    <hr class="ms-2 mt-1 mb-5" style="width: 97%">
  </div>
</body>
</html>

>Solution :

You can use rows and columns to keep content aligned in bootstrap. Rows have 12 columns so here I’ve used 10 columns for the heading and 2 columns for the button and aligned the button right.

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
  <div class="row">
    <div class="col-10 my-2">
        <h2 class="text-start">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
    </div>
    <div class="col-2 my-2 text-right">
        <button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
    </div>
    <hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>

</div>
</body>
</html>