Align the text to the left on the same line as the content

I'm trying to align text and an image on the same line, but there's some empty space at the top of the text. Is there a way to align them?

<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">
         <label>Checkbox:</label>
         <input type="checkbox" />
         <div class="card-body">
            <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
            <p></p>
         </div>
      </div>
   </div>
</div>

https://i.sstatic.net/iTfKR.jpg

The checkbox is not aligned at the bottom of the image as well.

cssbootstrap-4

Answer №1

I have made some revisions to your HTML code:

1. I moved the image inside the card-body.
2. I used a grid system for alignment purposes.

I hope this meets your requirements.


<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-body">
      <div class="row">
        <div class="col-3 text-center">
          <img src="http://via.placeholder.com/150x150/1f1a38 ffffff?text=Image" class="img-fluid align-self-start">
              <label for="checkbox">Checkbox:</label>
              <input id="checkbox" type="checkbox">
              
        </div>
        <div class="col-9">
          <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>

Answer №2

Make sure to include padding-top: 0px; in the style of your card-body as shown below:

<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">
      <img class="img-fluid align-self-start" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
      <label>Checkbox:</label>
      <input type="checkbox" style="margin-top: 7px;"/>
      <div class="card-body" style="padding-top: 0px;">
        <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>

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

Contrasting box-shadow behavior observed in Chrome versus Firefox

I'm working on a project and aiming to achieve this design: https://i.stack.imgur.com/YflaU.png To test it out, I created a sample page with the following code: p { display: inline; background-color: yellow; box-shadow: 10px 0px 0px red, -1 ...

css

issue occurring when customizing bootstrap in django

For the past couple of hours, I've been grappling with a puzzling issue while attempting to override Bootstrap in Django. Initially, without any custom CSS files, the outcome looked like this: https://i.sstatic.net/GLndf.png Subsequently, I crafted ...

cssdjango

Issues with arranging DIV elements using CSS

I have organized a few DIVs within a parent DIV. I am trying to make them align horizontally, but despite my efforts, they remain stacked vertically. Here is the code snippet: <style> #entrycontainer { height: 100px; width: 500px; } #entry ...

csshtml

Height of border not being displayed accurately

I have been searching for a solution to my unique issue with inserting borders in HTML and CSS. When I try to add a border to three images, the height does not display correctly. This is all part of my learning process to improve my skills in coding. Belo ...

htmlcss

What is the best method for incorporating CSS into an Angular application's embedded PowerBI report, which is displayed

Is there a way to incorporate external CSS or another method to apply styles to a PowerBI report embedded in an Angular application as an iframe? Specifically, I want to remove the scrollbar to ensure that the report seamlessly fits within the angular page ...

cssangularpowerbiexternal

Utilizing Jquery for independently blinking text counters

Whenever the user presses a button, a message is created and blinks 5 times. However, each time the button is pressed, all previous messages also blink along with the new one. The goal is to make only the new message blink individually 5 times upon each bu ...

javascriptjqueryhtmlcss

Incorporate new functions through the css class name "javafx"

On my dashboard, I have 10 labels that share the same CSS class for mouse over events. Now, I want to change the button style after it is pressed and remove the mouse over effect. How can I achieve this? ...

javacssjavafxfxmldashboard

Issue with Edge browser: child element exceeds parent's defined width

We need to meet a specific requirement that involves displaying a prefix inside a textbox that cannot be edited. Check out the HTML/CSS code on JSFiddle. The issue arises when we resize the window. HTML: <div class="customNameContainer" dir="ltr"> ...

htmlcssmicrosoft-edge

What is the best way to make a CSS element embrace another element positioned either above or below it?

I've been attempting to arrange multiple CSS shapes to hug each other, but I'm facing some difficulties. After researching online, the only solution I came across was using inline-block. However, I'm struggling to achieve the desired outcome ...

htmlcss

Transform CSS into React.js styling techniques

My current setup involves using Elementor as a REST Api, which is providing me with a collection of strings in React that are formatted like this: selector a { width: 189px; line-height: 29px; } Is there a tool or library available that can conver ...

javascriptcssreactjselementor

Adjusting the width of the header in Wordpress themes like Genesis and Foodie Pro

Struggling with the header appearance on my website. I want the blue section to be full width while keeping the logo and navigation the same width as the content area (1040px). I'm new to Wordpress and unsure how to make this adjustment. Someone sugg ...

csswordpress

Update: Explored 0 web pages (at a rate of 0 pages per minute) and obtained information from 0 elements (at a rate of

I'm a beginner in Python and Scrapy, currently working on my first project to crawl web security information from a website. However, when I try to run it using cmd, I encounter the message "Crawled 0 pages (at 0 pages/min), scraped 0 items (at 0 item ...

pythoncssscrapyweb-crawler

An innovative approach for converting CSS animations to flutter projects

During a recent collaboration with fellow designers, they shared some CSS animation examples from CodePen that needed to be integrated into our current project. The animations ranged from simple to complex, like the following: * { margin: 0; padding ...

cssflutterflutter-animationcodepen

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

jqueryhtmlcssnavbarnav

Using ng-bootstrap with Bootstrap 4 beta as an npm dependency

After updating my npm dependencies in package.json to Bootstrap 4 beta and ng-bootstrap to 1.0.0-beta.5, I encountered an "UNMET PEER DEPENDENCY" for popper.js when running npm install due to its new addition as a dependency in Bootstrap 4 beta. Despite th ...

angularnpmbootstrap-4ng-bootstrap

Is it possible to display multiple slideshows in separate tabs on a single page simultaneously?

I am trying to create multiple slideshows, each in a different tab on the same page. Although I am not an expert, I am attempting to figure out how to have the slideshow repeat with buttons controlling each one separately. When adding the complete script ...

htmlcssslideshow

Add a fading transition feature to images that are loaded at a later time

I used a clever technique to create a blur effect by loading a small, lightweight image first. Once the main background image is loaded, it swaps out the 'data-src' with the actual image. However, I am facing an issue with the abrupt transition, ...

javascripthtmlcssimagedeferred

Div element failing to scroll with excessive content

I'm currently working on a modal using Mui Modal and I've encountered an issue. Everything seems to be functioning correctly until I add more items to the cart. When the minHeight exceeds 500, it stops at 100vh and only displays 5 items, even if ...

cssreactjsmaterial-ui

Issues with hidden overflow and height attributes not functioning correctly in Internet Explorer 9 when using the DOCTYPE HTML standards mode

I have a <div> with overflow:hidden and height:100% that adjusts the div contents to fit the window's height on Chrome and Safari. However, in IE9, the div does not respect the styles of overflow:hidden and height:100%, causing it to expand to ...

htmlcssinternet-explorer-9

Two separate pieces of text converge within a single span

I am facing a challenge with alignment in a bootstrap <span> element. Specifically, I want to align the word "amount" to the left, and the "$" to the right, within the same label. I attempted to nest a <span> inside another <span> and app ...

htmlcsstwitter-bootstrap