Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

I am facing an issue with aligning two links (one text and one image) to the right and ensuring that the bottom of each is vertically aligned. Currently, they appear like this:

(vertically aligned with each others' tops)

Here's the relevant HTML code:

<div class="col-md-7">
    <div class="thumbnail">
        <div class="caption clearfix">
            <h2>Heading</h2>
            <p class="thin">Donut jelly beans muffin cupcake. Oat cake caramels gingerbread cotton candy.</p>
            <p class="thin">Chupa chips biscuit jelly chocolate bar danish caramels sugar plum cupcake.</p>
            <a href="#" class="pull-right"><img src="http://placehold.it/100x70"></a>
            <a href="#" class="pull-right">See example</a>
        </div>
    </div>
</div>

Would appreciate any advice on how to achieve vertical alignment at the bottom of each element.

htmlcsstwitter-bootstrapcss-floatvertical-alignment

Answer №1

To achieve this layout, you can group both A elements within a div container and then align that div to the right using float property. After that, set the A elements to display as inline-block with vertical alignment set to bottom. Below is a functional example: http://jsfiddle.net/q42d8nm7/1/

<div class="col-md-7">
<div class="thumbnail">
    <div class="caption clearfix">
        <h2>Title</h2>
        <p class="thin">Cupcake pastry lemon drops tart gummi bears jujubes gingerbread.</p>
        <p class="thin">Dessert cheesecake pie bear claw macaroon sweet roll gummies marshmallow.</p>
        <div class="pull-right">
            <a href="#">View demo</a><a href="#"><img src="http://placehold.it/100x70"></a></div>
    </div>
    </div>
</div>

Here is the corresponding CSS:

.pull-right
{
    float: right;

}
    .pull-right a
{
    display: inline-block;
    vertical-align: bottom;    
}

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

What is the best way to combine two pieces of information from a constantly changing table?

Could really use some help with jQuery! I'm trying to calculate the cumulative value from columns A and B, then add those values together. Check out this image for the expected output. <script src="http://code.jquery.com/jquery-1.11.2.min.js"> ...

jqueryhtmlasp.net

The Gusser Game does not refresh the page upon reaching Game Over

Hi there, I am a beginner in the world of JavaScript and currently working on developing a small guessing game app. However, I have encountered an issue where the page is not reloading after the game is over and the 'Play Again' button appears to ...

javascripthtmlcss

Present information from a list in a table format

My webpage contains a single table where I want to showcase an image in row1 along with its details. As each image is displayed, its corresponding details are added to a list. There are a total of 27 images spread across 9 rows in the table. Once all the ...

c#asp.nethtmlasp.net-mvc

Is it possible to align a clip-path starting from the right edge?

On my webpage, I have a unique hamburger icon that is positioned 2rem away from the right and top edges. I am looking for a convenient way to create a clip path that grows from its center point. Calculating the center point is not difficult but unfortunate ...

cssclip-path

Is it possible to implement a universal margin for the homepage design?

I'm working on a landing page where each section needs the same padding on the left and right but with different background colors. Is there a way to apply this consistent padding to the entire page without affecting the individual section colors? Any ...

cssflexboxfrontendtailwind-cssweb-frontend

Troubleshooting Guide: Issues with Bootstrap 3 Modal Window Implementation

This question is so simple that it's embarrassing. I attempted to copy the code from http://getbootstrap.com/javascript/#modals directly into a basic page setup, but it's not functioning. It seems like I'm making a very silly mistake. Here i ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal

What is the process for right-aligning components in BootStrap 5.0?

Currently, I am enrolled in an online course where the instructor utilizes Bootstrap 4. However, I decided to challenge myself by using Bootstrap 5.1 instead. I have been struggling with configuring my navigation bar elements to look like the ordered list ...

htmlcsstwitter-bootstrap

Click once to reveal, click twice to conceal the slider

I currently have a web page set up so that a single click on the text displays a slider for selecting a range of values. Now, I want to incorporate a feature where a double click will remove the slider. Below is the HTML code: <!DOCTYPE html> < ...

javascriptjqueryhtml

Remove a row from a table using the hyperlink reference

I am facing an issue where I want to delete a row in the table along with the corresponding database entry by clicking on a href link, but it doesn't work as expected: <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"& ...

phpjavascripthtmlsymfony

Issue encountered: Compilation error occurred following the update from Angular 11 to Angular 15, stemming from the module build failure within the sass-loader directory

I recently attempted to update angular from version 11 to 15, but encountered an error as shown in the screenshot below ./src/assets/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "(". ...

cssangularsassbuildmodule

Bespoke email solution for Woocommerce on the Wordpress platform

I have developed a unique HTML template with inline styles for the 'customer processing order' email notification in Woocommerce. I stored the template in my themes folder at woocommerce/templates/emails/customer-processing-order.php. However, I ...

phphtmlwordpressemailwoocommerce

Explore and target elements using browser inspection

Is it possible to create a new CSS class using browser inspection that contains new hover/focus styles? For example: .CanIDo { /*some css rules (ex.)*/ width: 100; } /*my question (USING BROWSER INSPECTOR, not directly typing in the CSS file)*/ .CanI ...

htmlcss

Styling a rectangle in p5.js: Tips and tricks

In my p5.js code, I created a rectangle using rect(): rect(10, 10, 10, 10); Now, I want to add some style to it with a box-shadow effect: box-shadow: 20px 20px 50px #00d2c6, -30px -30px 60px #00ffff; However, when I tried to apply the style using the doc ...

javascriptcssp5.js

What is the best way to choose all the options in a drop-down menu using Selenium Webdriver?

Currently, I am working with Selenium WebDriver and utilizing Java. In my application, there is a dropdown menu named Product containing multiple values (for example: 60). When running the code, I first deselect all options and then select the specific opt ...

javahtmlseleniumselenium-webdriver

Executing a function every time a prop is updated within the component

I have a prop named transcript in one of my components. Whenever I speak a voice intent, it gets updated. I want to execute a function every time the transcript changes and pass the transcript as an argument. In this code snippet, I attempted to use an On ...

javascripthtmlreactjsonchangereact-props

Colored stripe on a horizontal menu

I am attempting to design a page header with a menu that resembles the image provided below. https://i.sstatic.net/623eH.png As I construct the navigation, each link area (highlighted in blue) is represented by an <li>. However, I am encountering a ...

csshtmltwitter-bootstrap-3

How can I ensure the footer stays at the bottom of the page using a table layout?

For quite some time now, I've been working on achieving a table layout with a sticky footer. My specific requirement is for the footer to remain fixed at the bottom even when zooming in or out. However, whenever I try to adjust the zoom level of the w ...

css

Having trouble aligning page in the center with flexbox and styled components

Hey there, I'm having some trouble figuring out how to center my page using flexbox within styled components in a Next.js app. Any suggestions or tips? Let me share with you my Blog Component import ReactMarkdown from 'react-markdown' impor ...

htmlcssreactjsnext.jsstyled-components

What is the method to deactivate multiple links using jQuery?

Below is the HTML code: <a title="Login" data-href="/MyAccount/Access/Login" data-title="Admin" data-entity="n/a" id="loginLink" class="nav-button dialogLink"><b>Login</b></a> <a title="Register" data-href="/MyAccou ...

javascriptjquerycss

Curved Edges Ensure Non-Interactive Elements

element, there is a query about utilizing a color wheel from a repository on GitHub. The goal is to disable any actions when clicking outside of the canvas border radius in this color wheel. Various steps need to be taken to prevent unwanted outcomes: - S ...

javascriptjqueryhtmlcss