CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Michael Ziluck
Michael Ziluck

Reputation: 665

Align multiple Bootstrap buttons with the longest of several lines

-Hello, World!-

I am working on a project using Bootstrap 4 and I have run into a snag.

Below is the bit of markup with which I am working. Right now the buttons are right up next to the edge of the text. How I'd like it to work is make them align right, but only take up as much room as the longest block of text.

Here is an example of what I have in mind:

Buttons Left Aligned

My thought would be to wrap them in a div with a class that does not have a static size, and then right-align them within that. I just am not sure what class to use, since the col-x classes don't scale up dynamically with the length of the line. That wouldn't work because those lines of text are able to be very long.

Does anyone have any idea on how to fix this or can give me a push in the right direction?

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<dl class="row">
  <dt class="col-2">Key</dt>
  <dd class="col-10">Value</dd>


  <dt class="col-2">Active</dt>
  <dd class="col-10">
    <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
  </dd>


  <dt class="col-2">Values</dt>
  <dd class="col-10">
    <div class="row">
      <div class="col-12">Test <a aria-label="Delete" class="float-right btn-danger btn btn-sm float-none" href="#"><i class="fa-trash fa"></i> </a>
      </div>
      <div class="col-12">Longer Test <a aria-label="Delete" class="float-right btn-danger btn btn-sm float-none" href="#"><i class="fa-trash fa"></i> </a>
      </div>
      <div class="col-12">An Even Longer Test <a aria-label="Delete" class="float-right btn-danger btn btn-sm float-none" href="#"><i class="fa-trash fa"></i> </a>
      </div>
    </div>
  </dd>
</dl>

Upvotes: 2

Views: 209

Answers (1)

Chiller
Chiller

Reputation: 9738

What you are looking for is d-inline-flex and flex-column

Check out the code sample:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<dl class="row">
  <dt class="col-2">Key</dt>
  <dd class="col-10">Value</dd>
  <dt class="col-2">Active</dt>
  <dd class="col-10">
    <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
  </dd>

  <dt class="col-2">Values</dt>
  <dd class="col-10">
    <div class="row ">
      <div class="d-inline-flex flex-column">
        <div class="">
          Test
          <a aria-label="Delete" class="float-right btn-danger btn btn-sm " href="#">
            <i class="fa-trash fa"></i>
          </a>
        </div>
        <div class="">
          Longer Test
          <a aria-label="Delete" class="float-right btn-danger btn btn-sm " href="#">
            <i class="fa-trash fa"></i>
          </a>
        </div>
        <div class="">
          An Even Longer Test
          <a aria-label="Delete" class="float-right btn-danger btn btn-sm " href="#">
            <i class="fa-trash fa"></i>
          </a>
        </div>
      </div>
    </div>
  </dd>
</dl>

Upvotes: 3

Related Questions