What is the best method to position an image at the top of a

Here is my HTML code:

 <div class="tab-pane active" id="product1">
       <div class="card">
          <div class="card-img-top d-flex align-items-center">
             <img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
             <div class="card-body">
                <p class="card-text">Hello World</p>
                <p></p>
             </div>
          </div>
       </div>
    </div>

I managed to display the image and text in the same line, but I am facing an issue: the image appears vertically centered on the left, whereas I want it to be at the top. How can I achieve this?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tab-pane active" id="product1">
   <div class="card">
      <div class="card-img-top d-flex align-items-center">
         <img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
         <div class="card-body">
            <p class="card-text">Hello World. Lorem Ipsum is placeholder text used in the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p></p>
         </div>
      </div>
   </div>
</div>

cssbootstrap-4

Answer №1

The positioning of the image is centered vertically due to the parent element having the class align-items-center. To move the image to the top, simply add the class align-self-start to the image.

It's important to review your code as the card-body element is nested inside card-img-top, which may not be the intended structure. Take a look at the documentation provided in this LINK to better understand the correct usage of these Bootstrap components.

Additionally, it's worth noting that the latest stable version of Bootstrap is 4.2.1.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tab-pane active" id="product1">
   <div class="card">
      <div class="card-img-top d-flex align-items-center">
         <img class="img-fluid align-self-start" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
         <div class="card-body">
            <p class="card-text">Hello World. Lorem Ipsum is a placeholder text used in the typography and printing industry. Lorem Ipsum has been the industry's standard dummy text ever since the 16th century, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p></p>
         </div>
      </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

Customizing Eclipse Outline View for Cascading Style Sheets (CSS) Files

Is there a way to modify Eclipse's Outline view for CSS files? Specifically, how can I make the outline display comments and create collapsible ranges for groups of CSS rules? Include comments in the outline Create collapsible ranges for groups of ...

csseclipseeclipse-wtpoutline-view

The checkbox system is designed so that if all child checkboxes are chosen, the parent checkbox will automatically become selected as well

view image description hereLet's create a checkbox structure with some specific conditions: When the parent checkbox is selected, all child checkboxes should automatically get selected. If all child checkboxes are unselected, then the parent checkbo ...

javascriptjqueryhtmlcssbootstrap-4

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

javascriptjqueryhtmlcssplugins

I need to convert the current webpage into a canvas using Javascript in order to manipulate its elements

Is it possible to transform an HTML page into a canvas for graphical manipulation? I am interested in creating a 3D effect that makes the page appear to wrap around the user's head. Do you have any suggestions on how to achieve this? ...

javascripthtmlcsshtml5-canvas

The Div element seems to have a mind of its own, refusing

Check out my code on this link: http://jsfiddle.net/Pd7nm/ I'm trying to make the sidebar stop scrolling with the page once it reaches a certain point, but it just won't cooperate. I've attempted various solutions, but none seem to be effec ...

javascriptjqueryhtmlcss

Transfer the background-image from one div to another

I have several div elements that act as buttons, each with a different background image set in the CSS file: #button1 { background-image: url('../images/abc.png) } #button2 { background-image: url('../images/def.png) } #button3 { background-imag ...

jquerycss

Emphasize a specific word within a table row using Reactjs

There is a row object called 'user' that contains key-value pairs of columns and their values. My goal is to highlight all occurrences of a specific word in that row and then return the updated row within a ReactJS table. I attempted the followi ...

javascripthtmlcssreactjs

What is the best way to create rounded thumbnails with the paperclip gem?

I noticed that the latest version of Basecamp is implementing this feature, you can check it out in this link. I am curious about how to replicate this in my Rails 3 application. ...

cssruby-on-rails-3paperclipthumbnails

Inconsistency in css asset URLs across various pages discovered while working with Rails

When using assets stylesheet to load a CSS file, I noticed that it only loads on the index page. Upon inspecting with F12, the console shows the URL for other pages as well, which appends "/cloths" to the asset path. I am currently utilizing the default la ...

htmlcssruby-on-rails-4sass

The CSS property "overflow: scroll" does not seem to be working properly to display a scroll bar in Internet Explorer 11

When viewed in IE 11, the UI does not show a scroll bar In Chrome, the UI displays a scroll bar The CSS code is as follows: .r-listbox { overflow:scroll; width: 200px; display: table-cell; min-height: 1 ...

cssinternet-explorer

automatically generate a Panel-Body with content

Hey there, I'm facing a problem. Here's the picture: https://i.sstatic.net/1o1ld.jpg Any ideas on how to make the size fit the text? Here's the code: <div class="panel panel-default"> <div class="panel-heading"> <strong>A ...

phphtmlcss

Troubleshooting puppeteer PDF: Unable to set table height using CSS for tr:last-child { height: 100%; }

My Node.js code snippet is as follows: await page.setContent(html, {waitUntil: 'networkidle2'}); const pdf = await page.pdf({ format: 'A4', printBackground: true, margin: { top: '14mm', // default is 0, units: mm, c ...

htmlcssnode.jspuppeteer

I'm curious why my divs are stacking vertically instead of aligning horizontally. Can anyone shed some light on this

Here is my code: click this link to view the complete code I am attempting to create a horizontal array table. The data in the div elements is sourced from my Google spreadsheet, and I have inserted that data into the div with `id="schedule"`. Each time a ...

javascripthtmlcss

Styling with CSS to accentuate the currently active tabs

Struggling with writing CSS to meet the following requirements after creating a tab and calling a function on click: 1. The active tab should display a blue underline color. 2. When clicking on a tab, the blue line should appear under the active tab (sim ...

htmlcssbootstrap-4tabsangular7

Developing a dynamic table using data retrieved from an API within a JS React Bootstrap framework

I'm new to JavaScript and struggling with a problem. I am trying to create a dynamic table displaying information about cars using data from an API provided by a friend (full JSON shown at the end of the post). While I can successfully fetch and displ ...

javascriptreactjsbootstrap-4fetchreact-bootstrap

The JQuery mmenu breaks free from its constraints within a Bootstrap 4 design

Whenever I zoom in on my page or view it in responsinator.com, particularly in landscape view, the menu fails to collapse into the mobile version. I have implemented the jquery mmenu plugin alongside bootstrap 4 justified nav. After attempting to remove ...

jqueryhtmlcssbootstrap-4mmenu

Enhance image with Fancybox on mouse click

I need to display several images in the content area of a page, and when a user clicks on an image, it should enlarge using fancybox. If an image is large, the user should be able to click on it to view an enlarged version in a fancy box. Both the thumbn ...

javascriptjquerycssfancyboxfancybox-2

Enhance the bubble charts in Kendo UI Graph by adding dimension and depth to the bubbles for a more visually

Is there a way to create a relief effect on the bubbles in Kendo UI Bubble charts? Currently, all bubbles appear flat with the 15 provided themes. You can see an example here: It would be great to have a 3D-style option similar to the pie chart (Uniform s ...

csskendo-uitelerikstylesbubble-chart

Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

One issue I encountered was that the buttons weren't scrolling me to the top of the anchor, instead scrolling too far into the section due to the fixed navbar overlapping. I tried solving it with margins and paddings but believe there must be a simpl ...

javascripthtmljquerycssanchor

Styling HTML elements with CSS to create a full width underline effect

Is there a way to make the underlines/borders full width for each line in a paragraph without adding line breaks? I'm seeking suggestions on how to achieve this. Two potential solutions I've considered are using the tag or creating an image, ...

javascripthtmlcss