'How can I align a justified button with the divider line below?

I would like to get this:

result

Currently, the button is not aligned like the horizontal bar.

my example

I would like to placed this button correctly and avoid spacing.

enter image description here

I'm interested, if you have a solution in bootstrap 4 or bootstrap 5.

Thanks a lot for your help

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="home-content container pt-5">
    <div class="breadcrumb d-flex justify-content-between">
      <h2 class="ms-2">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
      <button type="button mr-5" (click)="goBack()" class="btn btn-primary">Retour</button>
    </div>
    <div class="separator-breadcrumb border-top ms-2 pt-3" style="width: 97%"></div>

    <div class="row pt-3 container">
      <div class="card" style="width: 100%;">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <table class="table table-hover table-striped" style="width: 150%;">
                <tbody>
                  <tr>
                    <th>Ticker</th>
                    <td>SOLB</td>
                  </tr>
                  <tr>
                    <th>Code SVM</th>
                    <td>347075</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <div class="col">
              <div class="btn-group-vertical float-end" style="width: 45%">
                <button type="button" class="btn btn-primary mb-2">
                    Best Execution
                  </button>
                <button type="button" class="btn btn-primary mb-2">
                    Etat du marché
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

bootstrap-4

Solution 1:^[1]

This does not necessarily have to do with Bootstrap.

You are implying width: 97% to .separator-breadcrumb, so it does not use all the available space.

In order to fix it, replace line:

<div class="separator-breadcrumb border-top ms-2 pt-3" style="width: 97%"></div>

With:

<div class="separator-breadcrumb border-top ms-2 pt-3"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Konstantinos Gallis

'How can I align a justified button with the divider line below?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]