Flex container has images stretched, but align-self-center cannot be utilized

Looking for a solution to resolve an issue with the following Bootstrap 4 markup:

<div class="col-3 d-flex flex-column">
    <img class="align-self-center" src="#"/>
</div>

The problem arises when using align-self-center in a flex container, as it centers the image and causes stretching. Instead of centering, I would like the image to be align-self-left (left aligned), but this also results in stretching.

Any suggestions on how to achieve the desired alignment without causing stretching?

htmlcssbootstrap-4flexbox

Answer №1

Here is the solution for you!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-3 d-flex flex-column">
    <img class="align-self-start" src="https://dummyimage.com/600x400/000/fff"/>
</div>

Answer №2

The correct term to use would be align-self-start in Bootstrap flex, instead of using the term left.

Answer №3

To resolve the alignment issue, try replacing 

<img class="align-self-center" src="#"/>
with 
<img class="align-self-start" src="#"/>
. This adjustment will ensure that your image is aligned to the start of the column.

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

Streaming Ogg audio from a PHP file is not possible to seek in Chrome

As I work on creating a basic audio player using the HTML5 audio element, the files being served are in .ogg format coming from another system as a binary string through an API. They are then processed by a simple PHP handler that includes some security ch ...

phphtmlgoogle-chromeaudiohttp-headers

What is the best way to incorporate a dynamic background image into a panel heading using Twitter Bootstrap 3 for a responsive design?

Hey everyone! I'm having trouble adding an image as a background to my panel heading and also including an h3 inside it. Below is the code I am using: <div class="row col-wrap"> <div class="col-lg-4 col"> < ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Enclose each set of objects, such as text, within a separate div, except for div elements

Is there a way to wrap each immediate group of objects that are not contained in a div with a wrap class? Input: var $code = 'Lorem Ipsum <p>Foo Bar</p> <div class="myclass"></div> <p>Foo Bar</p> <div clas ...

javascriptjqueryhtmlchildren

Angular Material - Data Table Kit

Struggling with setting custom styling for a mat-table in Angular Material. I want to adjust the border radius of the table and change the spacing inside to "space-between". The design I'm aiming for is shown here: Design Any tips or suggestions woul ...

htmlcssangularangular-material

"Applying CSS to Fill the Remaining Portion of the Webpage with a Dark

Trying to maintain sharpness and focus on a background image in my webpage, but struggling with consistent sizing. The challenge lies in keeping the image at a fixed size while filling in any additional space with black to accommodate different screen siz ...

cssbackground-image

Display the variable value in an HTML format following the submission of a request to an API using NODE JS, express, and jquery

Seeking assistance with completing a straightforward task: Creating an HTML AJAX link that triggers a Node.js API call to retrieve a value, wait for the response, and then display the value in HTML, JS, or PHP. After clicking on the "Get My Value" link be ...

htmljquerynode.jsajaxexpress

Unresponsive alignment of Button and Paragraph in close proximity

On my website, I have a checkbox button and a paragraph displayed side-by-side. It looks great with inline-block styling: https://i.sstatic.net/ZuyIk.jpg However, when I switch to a responsive view, the elements drop down to separate lines like this: http ...

htmlcss

Tips for concealing an entire menu on WP, with the exception of items labeled as current-menu-ancestor

On my Wordpress site, I am faced with a simple problem to solve. I have a primary menu at the top and a secondary menu on the left side. While the top menu only contains level 1 items, the left menu has all the items. To customize the left menu, I am utili ...

htmlcsswordpresscss-selectors

Is it possible to create tabs using Ajax without using jQuery?

Exploring the realm of tabs that dynamically load content into a div without redirecting to another page unveils numerous possibilities. Although the existing examples mostly rely on ajax with jQuery or similar libraries, I am inclined towards exploring a ...

javascripthtmlajax

A single list is utilized by multiple HTML5 selects

If I have 10 fields in a form, each requiring a select option from the year 1950 to 2017, can I create one list from that range and have each select reference it? Or do I need to make ten separate lists for each select? Edit: An example could be the birth ...

javascripthtml

CSS: Stretch the text background to match the width of the container

Is there a way to make the background color of a text cell stretch the width of its container div, rather than just the text itself? https://i.sstatic.net/E3zeL.png Here's the HTML code snippet: <div class='col-md-4'> <span class= ...

htmlcss

QuickSearch displayed at the center with a floating left alignment

I have been trying to center a QuickSearch div with multiple Q & A sections, but I am having no success. The div is floated to the left and has a background image. HTML <div class="l-row"> <div class="QuickSearch"> <div class="loop"& ...

htmlcss

Responsive menu is failing to respond to the click event

I'm facing an issue with my responsive menu on mobile phones. It should display two buttons - one for the navigation bar and the other to toggle the side bar by removing the classes hidden-xs and hidden-sm. However, I am having trouble getting the btn ...

javascriptjqueryhtmlcsstwitter-bootstrap

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling. Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width? https://i.stack.imgur.com/HSKHH.png div { ba ...

htmlcss

Steps for accessing the `<img>` tag within an `<a>` tag to focus on the `<img>` element in Internet Explorer

How can I target the img tag inside an href tag to set focus on the <img> element? For example: <a href="#"><img class="img1" src="abc.png"/></a> The CSS selector a .img1:focus {} does not seem to work. I am unable to access the ...

cssimagehref

Guide on solving the issue of a bootstrap 4 carousel loop within WordPress posts

Is it possible to create a dynamic Bootstrap 4 carousel within Wordpress custom post types? Here is the code snippet: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> < ...

phpwordpresstwitter-bootstrapbootstrap-4

What is the process for converting an <input type="file> into a base64 string?

Currently, I'm attempting to send an image to my express backend by including the image directly in the post request body. var imgValue = document.getElementById("image").value; Within my post request: body : JSON.stringify({ image:imgValue ...

javascripthtmlnode.jsexpressfile

I am having trouble displaying my mysqli table correctly. I could use some help troubleshooting my code as I am unable to locate the error

After implementing Bootstrap, I am facing an issue with the table display on my new page. The code works perfectly fine on the old page, but for some reason, it's not showing correctly on the new one. Upon inspection, I suspect that mysqli_close and a ...

phphtmlmysqlmysqli

Are there any other methods of using HREF in an <asp:Button> besides OnClientClick for invoking an inline div?

I decided to create a concealed <div> on the same page and tried calling it with href="#", which worked perfectly. However, when I attempted to use the same code in ASP.net, I encountered some issues with Javascript or other factors that prevented it ...

javascriptasp.nethtmlcsshref

The functionality of the "#Next" and "#Prev" features in the Tiny carousel are currently not functioning properly within the MVC project

Looking to implement a simple content carousel using jQuery 2.1.3 in my project. Previously used a non-responsive jQuery content carousel and switched to find a responsive option:Tiny Carousel Added Tiny Carousel's .js and .css files to Bundles.confi ...

jquerycssasp.net-mvctwitter-bootstrapcarousel