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

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

Here is an example:

My result for now

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 >

    <h1 >Signalétique de SOLVAY BE (Euronext Brussels)</h1>
    <button type="button" (click)="goBack()" >Retour</button>
    <hr  style="width: 97%">
  </div>
</body>
</html>

CodePudding user response：

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 >
  <div >
    <div >
        <h2 >Signalétique de SOLVAY BE (Euronext Brussels)</h2>
    </div>
    <div >
        <button type="button" (click)="goBack()" >Retour</button>
    </div>
    <hr  style="width: 97%">
</div>

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

CodePudding user response：

You could use position:absolute or float:right to make it in the right corner:

button{
position: absolute;
right:20px;
top:90px;
}

<!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 >

    <h1 >Signalétique de SOLVAY BE (Euronext Brussels)</h1>
    <button type="button" (click)="goBack()" >Retour</button>
    <hr  style="width: 97%">
  </div>
</body>
</html>

or use float:right:

button{
float: 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 >

    <h1 >Signalétique de SOLVAY BE (Euronext Brussels)</h1>
    <button type="button" (click)="goBack()" >Retour</button>
    <hr  style="width: 97%">
  </div>
</body>
</html>