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

user_18216840 0
Viewed 56

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/bootstrap@5.1.3/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
2 Answers

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

Mostly you need to go back to the basics and let the Bootstrap layout grid system do its thing. You were trying way too hard to bang things around with margins, etc. It's a mature system that does nearly all the work for you. Regularly review the grid docs so you have a fresh understanding of how it's supposed to work. Notice that you didn't need the nested container.

Get in the habit of inspecting your layout with your browser's developer tools to see what's pushing things around, then either remove or counteract that as needed. That should be a rare thing, though. If spacing looks odd you may have deviated from standard structure, so check the docs.

Don't use inline styling. That's just a pain for everyone involved. If you truly need custom styles (search the Bootstrap docs first), use a custom CSS class in either an inline style element or an external stylesheet. It's much cleaner and easier to work with. Where you can, follow Bootstrap's naming convention for familiarity, as I've done here for width sizing.

Specific widths are usually considered a last resort. It's best to let the content flow naturally. Consider removing the 45% width from your button container to let the table fill all available space. Use a margin class to increase the gap if you like.

Then, you have border classes available, so you don't need extra markup for the divider line.

I've shortened your heading so it fits better in this demo.

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

  <style>
    .w-45 { /* class name follows Bootstrap's convention */
      width: 45%;
    }
  </style>
</head>

<body>
  <div class="home-content container pt-5">
    <div class="breadcrumb d-flex justify-content-between border-bottom pb-4">
      <h2>Signalétique de SOLVAY...</h2>
      <button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
    </div>

    <div class="p-0 pt-3">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <table class="table table-hover table-striped">
                <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 w-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>

user_12648040
Related