Organizing pictures within bootstrap columns

Having an issue with CSS while using Bootstrap. I am attempting to align the columns in a way that the bottom line of the images inside each column match, not the top line. Despite trying everything I can think of, I have not been successful. Is there anyone who can assist me in properly aligning the images so that their bottoms are all in line?

<div class="container marketing">
  <!-- Sponsors logos-->
  <div class="row featurette lastNew">
    <div class="col-lg-4">
      <img class="img-responsive midjasponsora" alt="1496x613" src="images/logos/Platinum/image1.png">
    </div>
    <div class="col-lg-4">
      <img class="img-responsive" alt="180x52" src="images/logos/Platinum/image2.png">
    </div>
    <div class="col-lg-4">
      <img class="img-responsive"  alt="283x66" src="images/logos/Platinum/image3.png">
    </div>
  </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

The solution has been discovered. By adding this specific class to the columns, everything fell into place.

.vcenter {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

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

Guide to setting the ng-selected value within AngularJS

I am currently working on a project where I have a select element in my AngularJS application. I am populating the options using JSON values with ng-repeat, and I want to display the first value from the JSON as selected by default. I have tried two diffe ...

htmlangularjs

What is the appropriate method for passing parameters in PHP and how can you handle returned empty values

I'm looking to pass parameters in the action method because I am unable to do so via the header. <form name="mailinglist1" method="post" action="report1.php" > In this form, I'm using a download button to connect my report (HTML). ...

phphtmlcodeigniter

`Heart-shaped loading bar in Reactjs`

Looking for help in creating a heart-shaped progress loader for a React project. I attempted using CSS but encountered issues with the progress not filling the entire heart design. Below is the code snippet I used. The progress should start from the bottom ...

javascriptcssreactjsmaterial-ui

Floating Elements Centralized

I have a relatively straightforward HTML layout with a heading div at the top, followed by a Main div that contains a NavBar on the left side and a ContentDiv on the right. The issue I'm facing is that I can't seem to get my NavBar and ContentDi ...

javascripthtmlcss

Hover effects using CSS3 transitions for the content before

Greetings everyone, I apologize for any language barriers. The title may not be clear at first glance, so let me explain what I am attempting to achieve. I have a navigation menu structured like this: <nav> <ul> <li>& ...

csscss-transitions

Exploring ways to display all filtered chips in Angular

As a new developer working on an existing codebase, my current task involves displaying all the chips inside a card when a specific chip is selected from the Chip List. However, I'm struggling to modify the code to achieve this functionality. Any help ...

htmlangulartypescriptmultidimensional-arrayangular-material

Tips for showing an image in a pop-up window using Window.open

I'm attempting to show an image in a popup window using the following JavaScript code: function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=no,t ...

phphtmlwindow.open

Issues with flex grow and flex shrink not being effective arise when an adjacent flex element contains lengthy text

How can I ensure that the color swatch fills the designated space in the CSS (width: 40px) while allowing the label to shrink? The issue arises when the label is a long word such as "Corn flower blue", causing the color swatch to shrink instead of maintain ...

csstwitter-bootstrapbootstrap-4flexbox

Automatically expand a child node in the tree menu

Hey there! I've got a tree menu that I'm working with. I'm looking to have a specific node in the tree menu automatically open by default. Essentially, I want a particular node to be open when the page is refreshed. For instance, in this e ...

htmlcssmenu

I'm looking for a way to have an element shift in a particular direction only when two keys are pressed simultaneously

Having trouble moving a square diagonally when two keys are pressed simultaneously. Trying to create an if statement that detects both key presses at the same time and triggers the movement. However, all attempts have failed so far, leaving uncertainty abo ...

javascriptcss

Strangely shaped border appears when interacting with editable div block

I am attempting to build a textarea that has the capability to display multiple colors. To achieve this, I created a div and used the following JavaScript code: element.unselectable = 'off'; element.contentEditable = true; Now, the div can be e ...

javascriptcsscontenteditable

Error: Unexpected end of argument list in file c:/.../list.ejs during ejs compilation

Hello, I am a beginner in programming and I have been working hard to learn. Unfortunately, I encountered a SyntaxError: missing) after argument list in c://.../list.ejs while compiling ejs error and I am struggling to find the solution. I am reaching out ...

htmlnode.jsejs

The try and catch block in JavaScript is failing to correctly capture the HTTP status

I have a function that successfully posts JSON to an API endpoint. Here is the code I am using: function sendValuesPageLoad(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { try { if (xhr.readyState === ...

javascripthtmljsonxmlhttprequest

How can you get the selected option from a drop-down menu using JavaScript without using JQuery?

UPDATE: JSFiddle Link I'm facing some challenges with this task. I'm trying to keep my code clean without overusing unnecessary IDs or classes. The issue lies with a drop-down menu that offers speed options for displaying words in real-time on ...

javascripthtmlmenuelementintervals

Sorting across several lists leads back to the initial list

I currently have multiple lists, with each list and item sharing the same class. For example: <ul class="cat_1"> <li class="cat_1">Item1</li> <li class="cat_1">Item2</li> <li class="cat_1">Item2</li> ...

jqueryhtmllistjquery-ui

Looking to retrieve the <td> element using the class name?

When a specific condition is met in the class name, I want to apply styles to an entire row. The table structure I am working with is as follows: <table> <tbody> <tr> <td><div><span class='level2'></span&g ...

htmlhtml-table

Add a color gradient to text as it animates without displaying any code tags (HTML, CSS, JS)

I have a unique text animation that loads when the page loads. The characters will be gradually written to the screen with some words having a gradient effect. While I've managed to successfully apply the gradient, there seems to be a pause when it re ...

javascripthtmlcssanimationgradient

The positioning of divs shifts when adjusting the width of the screen

I'm having trouble creating a design similar to the one in this image. When I adjust the browser width, two divs don't remain aligned properly. If I use float: left for both divs, they stack vertically, but the layout breaks when I resize the scr ...

htmlcss

What are some tips for improving the smoothness and efficiency of my CSS @keyframes animation on SVG elements specifically in Firefox?

I noticed that this particular animation is causing high CPU usage on all browsers, although it runs more smoothly in Chromium. Is there a way to optimize its performance? Here's the SCSS code which is relatively simple: @keyframes laptop { from { ...

csssvgcss-animations

Customize Bootstrap: Change the background color

Let me show you my updated file structure: │ styles.scss ├───scss │ _bootstrap-overrides.scss │ _global.scss │ _mixins.scss │ _nav.scss │ _resume-item.scss │ _variables.scss The main file remain ...

twitter-bootstrapbootstrap-4