Organize elements with precision using html and css properties

I am struggling to get the buttons on the card to align properly. I have set a minimum height to ensure they are consistent in size regardless of content, but the alignment of the buttons is off. Take a look at the photo attached for reference - I want them to be vertically aligned.

Here is the code snippet:

  <div class="col" v-for="o in services" :key="o.id">
      <div class="card d-flex" style="width: 25rem; min-height: 38rem;" >
          <img :src=o.foto class="card-img-top"  style="max-height: 15rem;" alt="...">
          <div class="card-body">
            <h5 class="card-title fs-3">{{o.nombre}}</h5>
               <p class="card-text fs-6">{{o.descripcion}}</p>
               <a href="#" class="btn btn-primary d-flex justify-content-center mt-3">IR</a>
            </div>
          </div>
      </div>

Click here for the image

Please assist me in achieving proper button alignment. Thank you.

htmlcssbootstrap-5

Answer №1

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc2dfc0">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394c574a5748">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col d-flex" v-for="o in services" :key="o.id">
  <div class="card d-flex" style="width: 25rem; min-height: 38rem;">
    <img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
    <div class="card-body d-flex flex-column">
      <h5 class="card-title fs-3">Test</h5>
      <p class="card-text fs-6">Testing</p>
        <a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
    </div>
  </div>
  
  <div class="card d-flex" style="width: 25rem; min-height: 38rem;">
    <img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
    <div class="card-body d-flex flex-column">
      <h5 class="card-title fs-3">Test</h5>
      <p class="card-text fs-6">Testing</p>
        <a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
    </div>
  </div>
  
  <div class="card d-flex" style="width: 25rem; min-height: 38rem;">
    <img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
    <div class="card-body d-flex flex-column">
      <h5 class="card-title fs-3">Test</h5>
      <p class="card-text fs-6">Testing</p>
        <a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
    </div>
  </div>
</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

When implementing the "box-sizing: border-box" reset, the layout may become distorted if the image height is specified in percentage

I am facing an issue with my header containing a logo when I apply the box-sizing: border-box reset. Here is the functional header: .header-container { height: 60px; width: 100%; background-color: #333333; color: white; display: flex; justif ...

htmlcss

Animating range tick movements as the range thumb moves

My custom range input includes a span that displays the range's value and a div with multiple p elements acting as ticks. To create these ticks, I had to use a custom div because using "appearance: none" on the range hides the ticks by default. The ti ...

javascripthtmlcssanimationrangeslider

Explore the styling options for SVG using CSS to manipulate different properties of the

After saving my SVG image in Illustrator, the code appears like this: <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBo ...

htmlcsssvg

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Recently, I took on the task of creating an eBay template for someone. With some assistance and a bit of trial and error, I managed to get it working, albeit with what I like to call "not-so-great" code. However, there is one issue that arises when viewing ...

androidjquerycsshtml

How to centrally align tabs in Material-UI AppBar using ReactJS

I'm developing a React Application using Material-UI and facing difficulty in centering the 3 tabs within the blue AppBar. Currently, they are aligned to the left like this: (unable to embed images at the moment, apologies) This is the code snippet ...

cssreactjsmaterial-uiappbarcenter-align

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run ...

javascripthtmlcssreactjs

A useful tip for jQuery users: learn how to prevent the context menu from appearing when a text box is

Is there a way to prevent the context menu from appearing in jQuery when the text box is disabled? The right-click disable functionality works well in all browsers except for Firefox. Please note that the right-click disable functionality works when the t ...

javascriptjqueryhtmlcss

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

htmlcss

CSS problem with padding and width

Currently, I'm working on a conditional rendering issue where I want to give a div full width but due to padding applied to its parent, it's not expanding to the container's full width. Here is the snippet of the code: import Image from &qu ...

cssreactjsnext.jstailwind-css

Create a website that can expand in size without relying on percentage values

At the moment, I am in the process of building a responsive website. The issue I am currently facing is that the layout for the responsive design (which was created by someone else and not me) has a fixed width of 745px. Obviously, this width does not acco ...

htmlcssresponsive-designtablet

Is there a way to dynamically adjust the overflow-y property based on the height?

Trying to make the overflow-y-visible property visible if the height is too small, otherwise using overflow-y-hidden with tailwind CSS and React. Struggling to achieve this as I can't use sm, md, etc. for height like I can for width. Could someone pl ...

cssreactjstailwind-css

Accessing a specific segment of HTML using Java

Attempting to navigate through a bunch of HTML, I'm aiming to isolate specific sections. I'm specifically looking to retrieve 'THISISTHEBITIWANT' from the following HTML code. <li class="aClass"> <a href="example/THISISTHEB ...

javahtmlstringreplace

The show-word-limit feature is malfunctioning on the element.eleme.io platform

After attempting to utilize the show-word-limit attribute of the input element, unfortunately the character count did not display. Below is the code snippet that was used: <el-input type="textarea" placeholder="Please input" ...

javascripthtmlvue.jsinputelement

Selenium mistakenly chooses the incorrect element by selecting the first sibling element instead of searching within the element itself

I've been trying to loop through a list of elements and display the text, but I've encountered a strange issue with Selenium. When I select an element inside another element, Selenium returns the element inside the first sibling element instead o ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Is it possible to trigger an AJAX validation only after the jQuery validation plugin has successfully validated the input?

I utilized the jQuery validation plugin for form field validation. The goal now is to send an ajax request only when the fields are deemed valid by the jQuery validation plugin. JavaScript: $(function(){ $("#form").validate({ errorPlacement: ...

javascriptphpjqueryhtml

Ways to adjust the color of a cell in a table

I am working on customizing a table in my website where I need to change the color of a single cell in each row, similar to the example shown in this image: https://i.sstatic.net/1wtit.jpg Here is the HTML code that I have implemented so far: < ...

javascripthtmlhtml-table

MS Edge modifies the attribute's empty value to 1

I have written a JavaScript code to extract values from a list, but in the Windows Edge browser, it returns a value of 1 even when the actual value of the <li> tag is blank. For example: HTML Code <ul> <li value="">Test 1</li&g ...

javascriptjqueryhtmlmicrosoft-edge

Align three divs with three columns in the horizontal center

I am facing a challenge where I need to perfectly center 3 col3 divs in a row. Despite the calculation showing 1.5, I am unsure of the proper method to overcome this hurdle. <div class="row"> <div class="col-md-offset-2 col-md-3" style="height: ...

htmlcsstwitter-bootstrap

Enabling and disabling links in a Bootstrap dropdown menu with dynamic functionality on click

One interesting feature of bootstrap is that it allows users to disable links within its dropdown menu component by simply adding a class="disabled" into the corresponding <li> tag. I am looking to create some Javascript code so that when a user sel ...

javascriptjqueryhtmlcsstwitter-bootstrap

The CSS elements are positioned beneath the top border when applying a scale transformation within columns

I have a layout with 4 columns of images that I want to scale on mouse hover using the 'column-count' property. The first column works correctly, but the next three end up positioned under the upper border during the transformation. I've e ...

htmlcss