How to Align Bootstrap Buttons in a Row with Varying Text Lengths

-Salutations, Universe!-

I am currently engaged in a Bootstrap 4 project and I have encountered a hurdle.

Here is the snippet of code that has posed a challenge. Currently, the buttons are positioned right up against the text. My aim is to align them to the right, but only occupy as much space as the longest block of text.

For a visual representation of my objective, please refer to this example:

https://i.sstatic.net/65M8D.png

My initial idea was to enclose them in a div with a class that does not have a fixed size, then align them to the right within it. However, I am uncertain of which class would be suitable for this purpose since the col-x classes do not dynamically expand based on the length of the line. This approach would not be effective as the lines of text can vary greatly in length.

If anyone has any suggestions on how to address this issue or could provide some guidance in the right direction, I would greatly appreciate it.

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

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

What you need to use is d-inline-flex and flex-column

Take a look at this code snippet:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Collision detection in Three.js console output

I am attempting to create a collision detection system using Three.js (a WEBGL library). However, I keep encountering an error stating "cannot call method multiplyVector3 of undefined". Is there anyone who can help me identify what I may be doing incorrec ...

htmlwebthree.jswebgl

Other options for positioning background in SVG or using CSS within SVG could include center center alignment settings

I am currently developing a website where I have a div covered by an SVG. When I use this SVG as a background image and apply background-position: center center, it functions as expected. However, my issue arises when I try to add additional CSS in this ma ...

javascripthtmlcsssvg

What are some ways to employ ul and li elements to create columns that are consistently aligned, even when some columns may be empty?

In my HTML document, I have multiple sections with unordered lists of items. In a specific ul section, the list looks like this: <ul> <li>item 1</li> <li>item 2</li> <li>ck-item 2</li> <li ...

htmlcss

The size of my image decreases only when I transfer it to the phone screen

I have an image displayed on my website that I want to shift to the right specifically for mobile devices. @media screen and (max-width: 450px) { .my-img { padding-left: 8em; } } Although the image does shift to the right, it ends up shrinking in ...

htmlcssimagemobilesize

Guide on coding in Node.js to showcase an image on a web browser

Is there a way to set a local image file as the background for my browser page? I am experiencing an issue where the image does not display when I run my app index.js file through the node.js terminal and visit localhost:3000, even though it works fine whe ...

htmlnode.js

Is there a way to ensure uniform display of HTML form error messages across various browsers?

Recently, I completed a login form that consists of username and password fields. For the username, I used a text field with the type email, while for the password, I utilized a text field with the type password which requires validation through a regex pa ...

javascripthtmlangularjsvalidationconstraint-validation-api

Is the ID selector the quickest method in jQuery and CSS?

Which is the optimal choice in jQuery/javascript for speed? $('#myID .myClass') or $('.myClass') What is the preferred option to utilize in CSS? #myID .myClass{} or .myClass{} In hindsight, I realize my explanation was insuffici ...

javascriptjquerycssjquery-selectorscss-selectors

apply white-space:nowrap to a single column in a datatable

I am facing a challenge with my bootstrap datatable where one row (Product) contains a large amount of data and currently expands downwards, taking up a lot of space. https://i.sstatic.net/BryzM.png My goal is to make the Product column expand to the rig ...

javascripthtmlcssbootstrap-4datatable

I need to update the CSS class to "bootstrap-selectpicker" for the data tables select in the code below. Unfortunately, using .css()

I am trying to update the style of the datatables select tag to use the bootstrap-selectpicker class. I attempted to do this with .css() but it was unsuccessful. $(document).ready(function() { $('#dTable').DataTable( { initComplete: functio ...

bootstrap-4datatables

Controlling the visibility of HTML elements in ASP.NET

How can I control the visibility of a span element in my asp.net page without using the runat server attribute? The decision to make this span visible will be determined by the code behind, but I do not want to use runat="server". ...

asp.nethtml

NodeJS instructs open(html) to execute first before any other code is executed

I am evaluating whether nodeJS is a suitable solution for a project I am working on during my internship. To summarize: I need the basicNode.js file to wait until the open('./basic.html') command has completely opened the browser and loaded its c ...

javascripthtmlnode.js

Enabling the autowidth label expands the width of the td element

I am facing an issue where a label inside a table td grows in only one line when its width is greater than the td width. This results in the td expanding and not showing all the text. I would like the label to break into a new line when its width exceeds ...

htmlcssstylesheet

DevExpress popup remains contained within the iframe and does not overflow beyond its boundaries

My dilemma involves incorporating a FilterControl within an iframe popup. My issue arises when using the column selector (or any other DevExpress combobox), as the popup remains confined within the frame without extending beyond its borders. I am seeking a ...

asp.netcssiframedevexpress

How can one locate a particular element/style/class in the dev tools DOM while debugging in MUI v5?

Exploring the DOM and pinpointing the specific component file and style block in MUI v4 is a straightforward process: Locating a particular element/style class in MUI v4 However, in MUI v5, this functionality is no longer available, making it challenging ...

cssreactjsmaterial-uistyling

Encountering a Javascript Error when trying to begin

As a beginner in Javascript, I am venturing into designing a simple website that incorporates Javascript. Currently, my focus is on building a calculator. However, upon loading my website, nothing seems to initiate and there are no error messages displayed ...

javascripthtml

The total height of an HTML element, which takes into account the margin of the element itself

Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...

javascripthtmlcss

How to perfectly align a CSS block

This snippet of css is responsible for positioning a group of third-party images that are dynamically created as part of a JavaScript slider. I am looking to center these images based on the alignment of another image located elsewhere on the page. I hav ...

htmlcss

The search functionality on the navigation bar in Bootstrap is experiencing issues and not functioning as

It appears that the search button is currently positioned below the input field. I would like to align the entire search section to the rightmost corner and have them placed next to each other. [1]: https://i.sstatic.net/kJD2X.png <form className ...

cssbootstrap-4

What is the best method for removing quotation marks from HTML generated by Django?

I need to show a hyperlink in a form based on information retrieved from a database. Since Django doesn't seem to have built-in support for this feature, I am attempting to create the HTML code manually. Within the model form, I am customizing the in ...

htmldjangodjango-formsdjango-templates

Ways of accessing an array within an if statement

I have a dashboard with admin privileges for my application. In this dashboard, the admin can select a user from a dropdown list. Once a user is selected, I make an AJAX call to retrieve the user's data and store it in a variable named $result. Howeve ...

javascriptphphtmlajaxscope