Formatting text and images in CSS

Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this?

https://i.sstatic.net/fuPgl.png

Thank you,

Carolin

#content_row{
    margin-top:150px;
    margin-left:10px;
    margin-right:10px;

}

#content_col{
    -webkit-transform: scale(0.8);
     transform: scale(0.8);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     padding-bottom: 30px;



}
#content_col:hover{
    -webkit-transform: scale(1);
 transform: scale(1);
     -moz-box-shadow:    0 0 50px black;
     -webkit-box-shadow: 0 0 50px black;
     box-shadow:         0 0 50px black;
}

.tile-img{
    max-width: 100%;
    margin-left: auto;
    margin-right:auto;
    vertical-align: bottom;

}
<div class="row" id="content_row">
<div class="col-sm-4" id="content_col"><h3>Test</h3>
     <p>Lorem ipsum dolor sit amet...</p>
        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
</div>
  <div class="col-sm-4" id="content_col"><h3>Test2</h3>
      <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
</div>
  <div class="col-sm-4" id="content_col"><h3>Test3</h3>
      <p>Lorem ipsum dolor sit amet...</p>
        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
    </div>
</div>

htmlcssbootstrap-4

Answer №1

Give this a try:

/* Custom CSS to be applied after bootstrap.css */

#content_row {
  margin-top: 150px;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;           /* Include the following styles for flex */
  flex-direction: row;
}

#content_row>.col-sm-4 {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  padding-bottom: 30px;
  flex-grow: 1;                       /* Add this to ensure column grows to row height */
  display: flex;
  flex-direction: column;
}

#content_row>.col-sm-4>p {
  flex-grow: 1;               /* Make the p element take up remaining space */
}

View example on Bootply

Note that the unique ids from your columns have been removed, as ids should be unique.

Answer №2

Achieving this layout is possible by utilizing the flex-box feature. Simply assign the property of display: flex; to each column and specify its direction with flex-direction: column. Enclose the text within an additional div and apply the rule flex-grow: 1 to it. In summary:

HTML

<div class="row">

  <div class="col col-md-4">…</div>     

  <div class="col col-md-4">
    <div class="text">
     <p>Text …</p>
    </div>
    <img src="path/to/img">
  </div>

  <div class="col col-md-4">…</div>     

</div>

CSS

.row {
  display: flex;
  flex-direction: column;
}

.text {
  flex-grow: 1;
}

Answer №3

To determine the height of the p tag, consider the maximum character count in any column.

For small display sizes, utilize col-xs-* instead of col-sm-*.

#content_row{
    margin-top:150px;
    margin-left:10px;
    margin-right:10px;

}

#content_col{
    -webkit-transform: scale(0.8);
     transform: scale(0.8);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     padding-bottom: 30px;
}
#content_col:hover{
    -webkit-transform: scale(1);
 transform: scale(1);
     -moz-box-shadow:    0 0 50px black;
     -webkit-box-shadow: 0 0 50px black;
     box-shadow:         0 0 50px black;
}

.tile-img{
    max-width: 100%;
    margin-left: auto;
    margin-right:auto;
    float: top;

}
.p-text{
     height:500px; /* Adjust as needed */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="row" id="content_row">
<div class="col-xs-4" id="content_col"><h3>Test</h3>
     <p class="p-text">Lorem ipsum dolor sit amet...</p>
        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
</div>
  <div class="col-xs-4" id="content_col"><h3>Test2</h3>
      <p class="p-text">At vero eos et accusam...</p>
        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
</div>
  <div class="col-xs-4" id="content_col"><h3>Test3</h3>
      <p class="p-text">Lorem ipsum dolor sit amet...</p>
        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
    </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

After clicking the submit button, how can I eliminate the following: "config.php?username=++psw&Text=psw&submit=send?" and remain on the same page?

Whenever I hit the submit button on my form, PHP completes its task but instead of staying on the page (or simply reloading it), I am redirected to the same URL with '/config.php?username=technologies.%0D%0A++&submit = Send ". Is there a way ...

phphtml

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

javascriptjqueryhtmljquery-selectorsradio-button

Could Safari 7.1 be causing issues with outline-color and overflow?

After upgrading to Safari 7.1, I noticed that a couple of my css lines have stopped working. These lines were functioning fine with Safari 7.0.x and are still working in browsers like Chrome. overflow: hidden; and outline-color: [color]; Specifically, ...

csssafari

CSS styling is not being applied to buttons within Ionic 2

I'm completely new to Ionic and hybrid apps as a whole. I've been experimenting with a test app, but for some reason, none of the CSS seems to be working. Could someone please help me figure out what mistake I might have made? Here are my files: ...

htmlcssangularsassionic2

Adjust the appearance of a specific element

When it comes to styling my HTML tags, I prefer a definitive approach. However, there is one particular tag that I want to exempt from this style choice. Is there a way to achieve this? ...

htmlcss

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

javascripthtmljquerycss

Align the subtext to the right and center it vertically within a Bootstrap dropdown menu item

Is there a way to vertically align small captions on the right side of a dropdown menu, next to each item's text? The issue is that in the example below, the numbers are not properly aligned. https://i.stack.imgur.com/NZigW.png The numbers 123 and 1 ...

htmlcsstwitter-bootstrapcss-floatvertical-alignment

Concealing specific sections of HTML content in a webview on the fly

I've been experimenting with a proof of concept feature to implement the ability to conceal certain parts of a web page loaded in a webview, but I seem to be encountering some issues... Within a UIWebview extension, I have something similar to this c ...

javascriptioscssswift

Exploring the Latest Features: Using Angular 7 with Bootstrap Collapse for Dynamic Aria-Controls

I am currently working on creating my own component to use within an *ngFor loop. I am facing an issue where I need a unique value for my Collapse feature. Right now, when I click on the second main row in the table, the collapse feature only shows the inn ...

htmlangularbootstrap-4

Implementing dynamic content loading using CSS and jQuery upon link/button activation

I'm facing an issue where I am attempting to align content to the left side of my screen to display a feed while also ensuring that the pushed content is responsive. Unfortunately, the feed is not visible and the content remains unresponsive. Is ther ...

jquerycss

"Using the d-flex class with Bootstrap 4 tables does not allow them to expand to

Since the latest version of Bootstrap 4, it has become more challenging to apply classes like col-md-2 directly to the tr or td elements of a table. A possible solution is to use class="d-flex" in the parent element: <tr class="d-flex"> However, w ...

htmlcssbootstrap-4widthcolumn-width

Why is the CSS selector `:first-child:not(.ignore)` not working to exclude the `ignore` class from the selection?

Is there a way to utilize the first-child selector with the not(.ignore) selector to target every element that is the first child of its parent, except when that first child has the class ignore? I've experimented with :first-child:not(.ignore){...}, ...

htmlcsscss-selectors

The functionality of CSS transform appears to be malfunctioning on Firefox browser

My website, located at , features a logo that is centered within a compressed header. I achieved the centering effect using the following CSS command: .html_header_top.html_logo_center .logo { transform: translate(-63%, -2%); } This setup works perfe ...

css

Excess spacing in image on top of CSS background overlay

While playing around with text scrolling over a fixed background image (similar to parallax scrolling but with no movement in the background), I encountered an issue. There seems to be a small margin or padding (around 5-10px) between the bottom of the upp ...

htmlcsspaddingmargins

Implementing validation for multiple email addresses in JavaScript: A step-by-step guide

Currently, I am utilizing Javascript to perform validation on my webpage. Specifically, I have successfully implemented email validation according to standard email format rules. However, I am now seeking assistance in enhancing the validation to allow for ...

javascripthtmlvalidationemail

Issues with aligning div elements centrally

I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this: | | | | | | | | | | | | | | div1 | ...

htmlcss

The intricate dance between JAVA and HTML

Can Java be compatible with HTML and JS? Is it possible for them to cooperate without using JSP? In order to connect the WEKA function, we utilized Java code through a JAR file, but now we also require HTML and JS links for visualization. Is there an alte ...

javascriptjavahtmljsp

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

javascript.nethtmlcssprinting

Having trouble getting $compile to work in an injected cshtml file with Angular

Summary I am currently working on a large application where everything is designed to be very generic for easy expansion. One of the components I am focusing on is the dialog. Before suggesting alternatives like using ngInclude or angular templates, let m ...

javascriptjqueryhtmlangularjsasp.net-mvc

Dealing with CSS specificity issues when incorporating material-ui for React into a WordPress plugin

Struggling to integrate material-ui for react in a wordpress plugin due to conflict with wordpress's styling in forms.css file. Looking for a solution that doesn't require complete restyling of material-ui components to override the default style ...

cssreactjswordpressmaterial-uicss-specificity