Arranging the placement of list-group-item buttons

Looking for a way to create a list-group-item with two buttons that are equal in height and aligned to the right? Take a look at this example below:

https://i.sstatic.net/II2nl.png

While I have the basic structure in place, I'm having trouble getting the buttons to position correctly. Any help would be appreciated!

li.group-btn {
  padding: 0;
  border-radius: 0;
}
.form-control,
.btn {
  border-radius: 0 !important;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="col-md-6">
  <ul class="list-group">
    <li class="list-group-item">
      <div class="input-group">
        <span class="pull-right">
        <button class="btn btn-default" type="button">Go!</button>
      </span>

        <span class="pull-right">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
        <span class="left">Cras justo odio</span>
      </div>
      <!-- /input-group -->
    </li>
  </ul>
</div>

htmlcss

Answer №1

You have the option to utilize display: table; or display: table-cell;

li.group-btn {
  padding: 0;
  border-radius: 0;
}
.form-control,
.btn {
  border-radius: 0 !important;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="col-md-6">
  <ul class="list-group">
    <li class="list-group-item">
      <div class="input-group" style="display:table; width:100%;">

        <span style="display: table-cell; border:1px solid #ccc; padding: 0 8px; vertical-align: middle;">Cras justo odio</span>            

        <span style="display: table-cell; width: 40px;">
        <button class="btn btn-default" type="button"><span>ᐅ</span> Go!</button>
      </span>

        <span style="display: table-cell; width: 40px;">
        <button class="btn btn-default" type="button"><span>ᐅ</span>  Go!</button>
      </span>

      </div>
      <!-- /input-group -->
    </li>
  </ul>
</div>

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

Adjusting Google Maps API v3 Autocomplete dropdown width with JavaScript and SASS to match input field dimensions

I am facing an issue where the autocomplete dropdown (div with class "pac-container") is consistently 4 pixels shy of aligning perfectly with the right side of the input field. It looks like this: Below is the HTML code: <input id="autocomplete" size= ...

javascriptcssgoogle-mapsgoogle-maps-api-3sass

How can I effectively make properties accessible in my template to facilitate form validation in Angular?

Scenario: I'm facing a situation in my Angular project where I have a LoginFormComponent. This component has a form with two properties: email and password. My goal is to create properties within this component that can be accessed in the template. Th ...

htmlangularformsangular-forms

Improve the readability of a series of string.replace statements

When dealing with HTML code in Python, special characters need to be replaced using the following lines of code: line = string.replace(line, "&quot;", "\"") line = string.replace(line, "&apos;", "'") line = string.replace(line, "&amp ...

pythonhtmlstring

Creating a custom CSS clip to apply a rounded path on an image

I have been experimenting with applying a "clip path" to an image using a rounded path. While I am aware that SVG clip paths are an option, I found them to be less responsive. As an alternative, I attempted to place the SVG graphic under the image within a ...

htmlcsssvg

Featuring a visual arrangement of categorized images with AngularJS for an interactive display

As I work on developing a web application with Angular, my goal is to create a grid layout that organizes items by category. Each row will represent a different category. Below is an example of the code structure I have in place: <ion-item ng-repeat="i ...

javascripthtmlangularjs

How can I use AngularJS to save selected assets?

<div style="z-index: 1; position: absolute"ng-show="ctrl.company.selected"> <div style="" ng-repeat="Asset in ctrl.company.selected.Assets"> <div class="pd-5"style="width: 300px; background-color: white; border-bottom: gray solid ...

javascripthtmlangularjs

Creating a Mobile-friendly Sidebar: A Guide to Angular 5

I've been seeing a lot of recommendations online about using Angular Material for creating a sidebar, but I'm hesitant to install an entire library just for one component. After following the instructions provided here, I managed to develop a si ...

htmlcssangular

The Bootstrap 5 class "col-md-4" seems to be malfunctioning

My goal is to create a grid layout with 3 columns and 2 rows using Bootstrap cards, but I'm encountering an issue where all the cards are centered and stacked on top of each other. Can someone please assist me in resolving this problem? Service.js co ...

htmlcssreactjsbootstrap-5

Internet Explorer 11 features a fixed "footer" positioned at the bottom of the page. If the content above exceeds the height of the window, the footer will automatically be pushed down to accommodate

I have set up a "footer" to remain at the bottom of the page and adjust its position if the content above extends beyond the window height. While this functions correctly on Chrome, I have encountered an issue with IE11 where the footer does not adjust and ...

htmlcssflexboxcross-browserinternet-explorer-11

Issues with Header and Nav tags functionality in Internet Explorer 11 persist post deployment

When I deployed my HTML elements to the server, I encountered a problem with IE. Upon inspecting the elements in different browsers like Chrome and IE, I noticed that they appeared in the following order: <head> <link rel="stylesheet" ...

htmlinternet-explorer

Swapping out ChildNode data for HTML elements

When attempting to replace a node value with HTML content, I encountered an issue where the HTML tags were being displayed on the HTML page instead of applying the intended style. <style> .YellowSelection { background: yellow; } < ...

javascriptjqueryhtml

Ways to dynamically eliminate focus around text inputs

I have created an HTML page and here is the link to it: https://i.sstatic.net/n8UdU.png My main goal is to remove the black border around the text input on this page. The challenge I am facing is that the 'things to do' list is generated dynamic ...

javascripthtmljquerycssdom

React: The row flex-direction is not being applied as expected

Although I know there are countless identical questions out there, mine lacks context and is as generic as they come. Why isn't the flex-direction row property working? React View return ( <Fragment> <h1>The About us page.</ ...

cssreactjsflexbox

The jQuery offset() function is not functioning correctly due to an improper value

When specifying like this: <div id="Chart1"/> <div id= "Chart2"/> and attempting to get the offset top value ($("#Chart2").offset().top) of the second div, it does not take into account the previous div element. Sample link: However, if I s ...

jqueryhtml

Should CSS properties be applied directly to the html tag?

Surprisingly, I recently discovered that it's possible to set the background-color of the html tag. It seems strange since I always thought the body was responsible for containing the first rendered tag. I used to believe that the html tag was just a ...

htmlcss

Using brackets in a CSS background-image URL will cause it to malfunction and not display the

Try using the brackets editor tool available here. I attempted to add an image to a div with the class "portrait" by linking the style.css file from index.html, but it doesn't seem to be working. Other guides and tutorials have successfully utilized ...

phphtmlcss

Why won't my picture track the movement of the cursor?

I am trying to make my image follow the cursor using a specific code, but it doesn't seem to be working. I'm having trouble figuring out what's wrong with it. Here is the code snippet that I'm currently using: function followIt(e) ...

javascripthtmlcssdom-events

What is the best way to ensure the box div is centered responsively?

Here is the code for my HTML file: body { background-color: rgb(231, 59, 59); font-family: "Alata"; font-size: 20px; margin: 30px; } h1 { margin-top: 100px; color: #202124; text-align: center; } .box { width: 1000px; } input { positi ...

htmlcssweb-deploymentgoogle-web-designer

Add hyphens to separate the words in AngularJS if there is a break in the string

Within a div of set width, a string is being bound to it. This string could be short or long. I would like for the string to break with a hyphen inserted on each line except for the last one. For example: If the string is "misconception" and it breaks at ...

javascriptjqueryhtmlcssangularjs

Creating glitchy dotted lines in an HTML Canvas with the help of translate and scale techniques

I'm working on creating a canvas where users can draw symmetrical lines with their mouse. However, when I use the transform and scale attributes in the draw function to achieve this effect, it creates small gaps in the line and makes it look less smoo ...

javascripthtmlcanvas