Using Bootstrap 4 to line up divs horizontally at the top edge

I am working on aligning an image and a div inline while ensuring that the tops of both elements are aligned as well. This is my current code snippet:

<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
    <div class="comment-header">
        <span>title</span>
    </div>
    <blockquote>comment</blockquote>
</div>

Although I have tried using the class "d-inline-block", the text does not align properly at the top as desired.

You can view the alignment issue here:http://www.bootply.com/zpj12TL4wI

csstwitter-bootstrapbootstrap-4

Answer №1

If you're looking to align elements in Bootstrap 4, there's a handy utility class available: align-top. With this class, no additional CSS styling is required...

<div>
    <img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
    <div class="comment d-inline-block align-top">
        <div class="comment-header">
            <span>title</span>
        </div>
        <blockquote>comment</blockquote>
    </div>
</div>

http://www.bootply.com/wtAOA1JPn1

Answer №2

To achieve the desired appearance, a simple adjustment to the vertical alignment is required:

.comment {
    vertical-align: top;
}

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

Creating a div that expands to occupy the entire width, even when hidden and requiring a scroll mechanism

I am facing a challenge with my webpage that has two panels. The second panel includes a large table that does not fit within the width of the window, even with wrapped content. To address this issue, I added a horizontal scroll, but the div still does not ...

htmlcsspanel

How can I modify the Twitter Bootstrap carousel's background?

Is there a way to customize the background of Twitter Bootstrap 3 carousel? I am looking for a solution where I can have a plain red background and then overlay each carousel image on top of it. I have tried modifying the CSS of the <body> tag to a ...

csstwitter-bootstrap

Generate a dynamic image using CSS and either a div or a span tag

My image is intricately carved into several slices. You can view it here <!--Force IE6 into quirks mode with this comment tag--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d ...

csshtml

Struggling with aligning images in the center while ensuring they remain responsive on various devices

My website has an image with dimensions of 955x955, which is a square size. I want this image to be responsive on all devices, but the section it's in is not squared. This causes the image to look distorted when viewed on smaller screens. The focus of ...

htmlcss

The text outside of the button is overridden by my CSS styling

I've been working on a simple card matching game and I decided to style the buttons to enhance their appearance. However, I'm facing an issue where the styling code has caused the text to appear outside of the button. Whenever I try to adjust the ...

htmlcssbuttontext

What is needed to enable the functionality of the next and previous buttons? (Carousel Bootstrap)

I'm working on a text-only carousel using Bootstrap, but I'm facing an issue with the slider not functioning properly when I press the "next" and "prev" buttons. Any assistance would be greatly appreciated! <link rel="stylesheet" href="htt ...

htmlcsstwitter-bootstrapcarouselbootstrap-5

Can you explain the distinction between div and span tags?

HTML includes two main tags, div and span. I am curious about the specific functions and roles of each tag. I have experimented with both but haven't been able to identify any significant differences. Can someone provide a detailed explanation on the ...

htmlcssweb-deployment-project

conceal elements created with JQuery within an AJAX function

Is it possible to use jQuery and the $.ajax() method to submit a form, displaying only the result while hiding other elements on the page? I am looking to add a conditional in the Ajax method that will show the result if successful, hiding certain elements ...

phpjqueryhtmlcssajax

handling a click event for an unresponsive ID (or so I assume)

After developing a pop-up button module using Bootstrap for integration into all product pages, I encountered a challenge that I need help with. The problem is outlined below. This is my first time posting here, so I'm open to feedback on the necessi ...

javascriptjqueryformsbuttonbootstrap-4

An error is thrown when using less.js

Every time I attempt to add less.js, I encounter an XmlHttpRequest Exception 101. Including the .less file is done using this method: <link rel="stylesheet/less" type="text/css" href="anything.less" /> This issue only arises when I upload the th ...

javascriptjquerycsslesstumblr

Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

<html> <head> <title> Example </title> <style> img:hover {opacity : 0.3;} img {z-index : 1; height : 33%; width : 33%; } .first { position : absolute; top: 0%; left: 0%;} .second {position : absolute; top: 0%; left: 33%; ...

htmlcss

Including HTML attributes within a PHP script

Currently, I am working on developing a message to be displayed to the user after they have submitted the contact form using PHP. However, I am facing an issue with styling the message as intended, particularly with elements like bold text and line breaks ...

phphtmlcss

Creating white space around the entire page using CSS is a simple yet effective way to

I'm relatively inexperienced with CSS and HTML and I'm attempting to create a website layout with some white space surrounding it, similar to a border. I have come across many solutions on removing white space, but none on how to add it. Current ...

htmlcss

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

cssangular

Inquiring about CSS classes for numerous elements

table.rightlist td { text-align:right; } table.rightlist th { text-align:right; } This code snippet is intended to align both the table cells (td) and headers (th) to the right within a table with the "rightlist" class. However, upon testing the ...

css

Adjusting the width of an image in Safari

I just launched my website, but I encountered an issue with the image size in Safari. In my CSS, I set the width like this: img { width: 450%; } Here is the site: I can't figure out why the images display correctly in Chrome and Mozilla, but ...

csssafarisass

Finding a specific cell in a Django HTML table: tips and tricks

Recently delving into django and its intricacies. Struggling to grasp the concept of accurately pinpointing a specific cell within an html table. Yearning to modify the background color of select cells based on certain conditions derived from the generate ...

pythonhtmlcssdjango

Is it possible for a div to extend beyond the previous div's boundaries using CSS?

When viewing a website like GameFAQs, you may notice that there are two divs positioned next to each other - the main content and an aside (such as a poll). As you resize the window, the aside sometimes moves down below the main content without leaving any ...

htmlcss

Animating path "d" with ReactJS and SVG upon clicking in FireFox

Visit this CodePen for more: https://codepen.io/sadpandas/pen/xxbpKvz const [currentScreen, setCurrentScreen] = React.useState(0); return ( <React.Fragment> <div> <svg className="theSvg" width="156" height="6 ...

javascriptcssreactjssvgonclick

Creating Consistent Height and Alignment for Bootstrap 4 Cards

Aligning Bootstrap 4 cards using d-flex and align-self-stretch for the cards works great. But I'm struggling to make the part with the red border float to the bottom. Any suggestions using only Bootstrap 4 utilities? https://i.sstatic.net/2VUME.png ...

cssbootstrap-4