Place the delete and edit buttons on the right side of the card

I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this:

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

I want it to look like this:

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

.card-content {
  display: flex;
  align-items: center;
  position: relative;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<div class="px-md-5 px-4">
  <a class="anchor-fake" onclick="MovingIn()">
    <div class="block block--light block--cardShadow mb-md-4 mb-2">
      <div class="card-content">
        <div class="mr-3">
          <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
        </div>
        <div class="card-text-20-14-400">
          @premise.PremiseNickname
        </div>
      </div>
      <div class="btn-group">
        <input class="btn btn-secondary btn-lg" type="button" value="Edit">
        <input class="btn btn-danger btn-lg" type="button" value="Delete">
      </div>
    </div>
  </a>
</div>

htmlcssbootstrap-5

Answer №1

To make the necessary adjustments, simply include the d-flex class in the appropriate container. This container should encompass both the buttons container and the remaining content:

<!-- Incorporating Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c100c11">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body Section -->
<div class="px-md-5 px-4">
  <a class="anchor-fake" onclick="MovingIn()">
    <div class="d-flex gap-3 block--light block--cardShadow mb-md-4 mb-2">
      <div class="card-content d-flex align-items-center">
        <div class="mr-3">
          <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
        </div>
        <div class="card-text-20-14-400">
          @premise.PremiseNickname
        </div>
      </div>
      <div class="btn-group">
        <input class="btn btn-secondary btn-lg" type="button" value="Edit">
        <input class="btn btn-danger btn-lg" type="button" value="Delete">
      </div>
    </div>
  </a>
</div>

Answer №2

.card-content {
    display: flex;
    align-items: center;
}
<div class="px-md-5 px-4">
  <a class="anchor-fake" onclick="MovingIn()">
    <div class="block block--light block--cardShadow mb-md-4 mb-2">
      <div class="card-content">
        <div class="mr-3">
          <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
        </div>
        <div class="card-text-20-14-400">
          @premise.PremiseNickname
        </div>
        <div class="btn-group">
          <input class="btn btn-secondary btn-lg" type="button" value="Edit">
          <input class="btn btn-danger btn-lg" type="button" value="Delete">
        </div>
      </div>
    </div>
  </a>
</div>

Answer №3

To fix the issue, use the following CSS code:

.card-content {
  display: flex;
  position: relative;
}

.card-content .btn-group {
  display: flex;
}

.card-content .btn-group > * {
  flex-shrink: 0;
}

.card-text-20-14-400 {
  background: white;
  display: flex;
  align-items: center;
}

.card-content img {
  width: 50px;
}

.btn-secondary.btn-lg {
   border-radius: 0;
}

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

How can I translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

javascriptjqueryhtmlcss

What is the best way to align the bottom of the last child of a flex element?

Current: https://i.sstatic.net/e7V8x.png Desired: https://i.sstatic.net/Xszod.png Is it possible to achieve this using the flex or grid model, or do I need to reconsider the structure with a different approach? Below is the code snippet: .sections { ...

htmlcssflexbox

What is the best way to transfer Django variables to HTML?

Looking to send data from the rs232 port and showcase it in a graph using javascript? Check out this resource: Seeking guidance on importing the views.py variable into my html file. views.py import io from django.http import HttpResponse from django.shor ...

pythonhtmldjangoserial-port

Centering loaders within elements of an unordered list

I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar: https://i.stack.imgur.com/o75Lp.png This is the code for my navbar: <div class="navbar-head ...

htmlcssangularjstwitter-bootstrap-3

Are there any resources available to ensure my jQuery script is compatible with multiple browsers?

After realizing that Internet Explorer does not support certain selectors in jQuery, I began to question how to ensure my code will function properly during the writing process. As a Linux user, my testing options are limited to Chrome and Firefox. Is ther ...

javascriptjquerycssjquery-selectorscross-browser

Position the division at the location of the cursor for particular usemap components

Looking for a way to position a division on top of an image using a usemap. Interested in having the div only appear when the mouse hovers over a particular area, and at the precise location of the cursor. Came across some examples using jQuery, similar ...

javascriptjqueryhtmlpositionimagemap

Multiple card displays not working with Javascript Fetch API

I wrote a script that retrieves data from a URL and then organizes it into tables for display to the user. Initially, the script functioned correctly. However, I decided to enhance its flexibility by introducing two parameters - name and HTML div name wher ...

javascripthtmlcssbootstrap-4

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

I have a task at hand where I need to manipulate text input from a contenteditable division, use regex to identify specific words, and then wrap those words within an angular component. Although I have managed to successfully replace the text with the com ...

javascripthtmlangularstringdom

Rotate CSS elements dynamically using jQuery

I'm trying to figure out how to change the rotation value of an image element in my code. Currently, the rotation is set to 315 degrees, but I want to change it to 0 when a click event occurs. Can anyone help me with this? ...

jquerycssrotation

Easily toggle between different content within the same space using Twitter Bootstrap Tabs feature. Display the tabs

I made a modification to the bootstrab.js file by changing 'click' to 'hover': $(function () { $('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { e.p ...

javascriptjquerycsshovertwitter-bootstrap

Changing the text color of the Vuetify Table header is a simple way to customize the

I am currently working on a Vuetify table with the class condition-table. I have applied the following CSS styling: .condition-table { background-color: #e1f5fe70; } The styling seems to work fine so far. However, when I added this additional CSS: .co ...

cssvue.jsvuejs2vue-componentvuetify.js

Leverage Html5 to open and retrieve data from an Excel document

Is there a method to access excel file data using HTML5 while uploading the file on the client side? I have come across the use of reader in JavaScript, but unsure how it can be helpful in this scenario. Is there a way to read excel file data seamlessly ...

javascripthtmlmeteor

Verify the tags associated with an element that has multiple tags

For a test I am conducting, I need to examine the tags and styles present in a specific element. The element, displayed on the page as bold, italic, and centered, looks like this: <p style="text-align: center;"> <em> <strong>TE ...

javahtmleclipseseleniumtags

Guide to Embedding an Image in a List in HTML

How do I resize an image according to the size specified in CSS, and ensure that it fits within a list of items where each item consists of both an image and a name? Currently, my code only displays the image in its original size. for(var i =0; i< o ...

javascripthtmlcss

Adjust the appearance of an element that is being inserted using .before() by utilizing a variable

Using the jQuery function .before(), I am creating an element in this format: d.children().first().before("<div class='test-div'><span class='test-span'>" + text + "</span></div>") I want to style the span dyna ...

jqueryhtmlcss

Choosing a root element in a hierarchy without affecting the chosen style of a child

I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its ...

javascriptcssnext.jsmaterial-uitreeview

Incorporating RFID reader functionality into a website

I am currently facing an issue with integrating an RFID card reader into a web page. After some research, it seems that the solution involves creating an ActiveX component and using JavaScript. My question is, how can we go about building an ActiveX compo ...

javascriptactivexhtmlsmartcardrfid

Page elements subtly move when reloading in Chrome

I am experiencing an issue with a div that has left and top offsets randomly selected from an array of values upon page load. Most of the time, it works fine. However, occasionally, upon refreshing the page, the window scrolls down slightly, revealing the ...

javascripthtmlcss

Top-rated program for creating user guides using HTML code

I am currently working on a project that involves creating end-user documentation for a software application. However, the software will be retired next year, so I do not want to spend too much time on producing a professional-grade manual. The documentati ...

phphtmlmultimediaend-useruser-manual

Is there a way for my box to avoid reaching the bottom of the page?

Is there a way to prevent my box from reaching the bottom of the page? I am currently using Bootstrap 4 and have tried the spacing utilities, but they don't seem to be effective. https://i.sstatic.net/YRqb4.png Attached is a picture showing that the ...

htmlcsstwitter-bootstrapbootstrap-4