Issue with Bootstrap 5 justify-content causing misalignment and inability to vertically center content

I've encountered a coding challenge while working with Bootstrap 5:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<br><br>

<div class="list-group-item d-flex flex-row">
    <div class="flex-column">
      <h4>A Test Recipe</h4>
      <p>This is simply a test</p>
    </div>

    <div class="flex-row align-self-center justify-content-end">
      <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
           alt="A Test Recipe"
           style="max-height: 50px !important">
    </div>
</div>

I'm struggling to position the image at the end of the list-group-item div. I have attempted using justify-content-end, but it doesn't seem to work. I also tried align-self-end, but it didn't move the image to the right side.

Additionally, for the div with the flex-column class, I want to vertically center its content. However, my attempts have been unsuccessful so far. The goal is to have it centered just like the image is. While I managed to vertically center the image using the align-self-center class, applying this class to the div with the flex-column class doesn't yield the desired result.

What could be causing these issues?

htmlcssbootstrap-4flexbox

Answer №1

؟

<linkhref="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae4fae6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
    <div class="card m-3 border-0" style="max-width: 250px;">
        <div class="row g-0">
            <div class="col-5">
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     class="img-fluid rounded-5"
                     alt="A Test Recipe">
            </div>
            <div class="col-7">
                <div class="card-body">
                    <h5 class="card-title">A Test Recipe </h5>
                    <p class="card-text">This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bfa1bd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<br><br>

<div class="list-group-item d-flex flex-row justify-content-between">
    <div class="flex-column align-self-center">
      <h4>A Sample Recipe</h4>
      <p>This is just a sample</p>
    </div>

    <div class="flex-column align-self-center">
      <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
           alt="A Test Recipe"
           style="max-height: 50px !important">
    </div>
</div>

Keep in mind that the justify-content-between class should be used on the containing row. Also, remember that the align-* classes are for vertical alignment while the justify-content-* classes are for horizontal justification.

Answer №3

give this a shot.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3edf3ef">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>

<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
    <div class="card m-3 border-0" style="max-width: 350px;">
        <div class="row g-0">
            <div class="col-5">
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     class="img-fluid rounded-3"
                     alt="A Test Recipe">
            </div>
            <div class="col-7">
                <div class="card-body">
                    <h5 class="card-title">A Test Recipe </h5>
                    <p class="card-text">This is simply a test.</p>
                </div>
            </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

Using Vue to display a Div inside a TD element of a table does not result in a reactive behavior

I am encountering an issue with a table where the last column contains a div with three options (View, Edit, and Delete). This submenu is initially hidden, but when clicking on the options button in the last column of the table, the array used to control i ...

javascripthtmlvue.jsvuejs2vue-component

Transferring data from local storage to a PHP server using AJAX

My attempt to transfer data from local storage to PHP using AJAX resulted in an error mentioning 'undefined index data'. chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="t ...

javascriptphpjqueryajaxhtml

bootstrap - proceed to the following column

My goal is for the website to have a specific layout when it reaches the -lg- size: Desired result: https://i.sstatic.net/8tBiR.png However, the actual result is different: Actual result: https://i.sstatic.net/jA9rP.png <div class="container"> ...

twitter-bootstraptwitter-bootstrap-4bootstrap-4

Imagine a webpage with a width of 1000 pixels. Can you determine the precise horizontal position (from the left) of the div element with the unique id of "inner_div"?

Hello everyone, I hope you're doing well. I recently took a test and unfortunately got this question wrong. Imagine a web page with a width of 1000px. What is the exact horizontal (from the left) position of the div element with id "inner_div"? < ...

htmlcss

Clearing text fields in jQuery by cloning them

I am attempting to duplicate the friend fields (name + email) when the "add another friend" button is clicked. However, the cloned fields end up including the text inside them, which is not desired! Does anyone have any suggestions or solutions? Here is t ...

jqueryhtmlformsclone

File remains visible after deletion upon refreshing the page, but disappears after using the Ctrl + F5

After deleting a file on the server, I noticed that it still appeared when I refreshed the page. However, when I tried to do a hard refresh by pressing ctrl+F5, it resulted in a 404 error. This behavior is puzzling to me - shouldn't a simple refresh s ...

phphtml

Switch between different content sections using a button in a Bootstrap tab-pane

Here is the code snippet I am currently working with: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-s ...

htmlcsstwitter-bootstrapmenu

Black and white emoji display on Windows 7 using Chrome and Edge browsers

To enhance the visual appeal of my website, I incorporate emojis using Emoji Unicode from https://www.w3schools.com/charsets/ref_emoji.asp. It has come to my notice that on Android, Mac, and iPhone devices, users see colored emoticons while those on Window ...

phphtmlemojiemoticons

WebMatrix does not support PHP tags in .html files

I'm currently delving into the world of web development and I've encountered a bit of an issue. The book I've been using to study utilizes PHP tags within HTML files, but for some reason they're not functioning as expected in my header ...

phphtmlfiletagswebmatrix

Utilization of z-index with float: left within an image gallery in CSS

Currently, I am working on an image gallery that has content generated randomly. In terms of CSS, the images are positioned using the following code: .item { width: 200px; margin: 10px; float: left; } To add some functionality, I have implemented ...

jqueryhtmlcsscss-floatz-index

Float over a specific line in a drawing

I am looking to develop a unique rating system using css, html, and potentially js : https://i.sstatic.net/pQP79.png My goal is for the user to hover over a specific section of a circular stroke and have it fill with a particular color, all while maintai ...

javascripthtmlcss

How can I annotate the overall count of occurrences of a keyword across multiple models following filtration in Django?

I have a situation where my 'Keyword' model stores keywords for 4 other models, each with a 'key_list' field that is a ManyToManyField pointing back to the 'Keyword' model. The models have multiple keywords, and I am successfu ...

pythoncssdjangopython-3.x

Tips for customizing a bootstrap CSS file or incorporating it into your project

Embarking on a new journey into web development, I found myself diving deep into the realms of the internet to edit a template for a forum website. It's certainly a challenge, given my limited experience in this field. The template utilizes a bootstr ...

htmlcssbootstrap-4frontendbootstrap-5

Crafting a Cubic Masterpiece with Pure CSS Gradient Magic

Experimenting with various techniques involving linear gradients, I have achieved layers of multiple stripes but have encountered a block when it comes to the top face. My goal is to use gradients, whether linear or radial, to create a series of repeatin ...

htmlcssgraphics3d

What is the process for updating the h1 header with text entered into an input field?

I'm working on an assignment that requires me to change the h1 heading to reflect whatever is entered into the input field. To accomplish this, I need to create a function using getElementByID. Here's what I've done so far: <!DOCTYPE htm ...

javascripthtmlinputgetelementbyid

The session name has not been properly defined

Sorry for any errors in translation. I'm facing an issue where the session name I insert is coming up as undefined. However, when I manually enter the username, everything works fine. View Image <? php session_start (); echo var_dump ($ _SESSION ...

phphtmlajax

Difficulty with button click functionality in Selenium IDE

Hi there, I am trying to use the clickAndWait xpath=//button[contains(.,'Next')] command in Selenium IDE, but despite showing up in the test, it is not clicking on the button labeled 'Next'. The button I am referring to has an id of pmc ...

htmlseleniumselenium-ide

What is the best way to restrict a link to only a specific div element and not a Bootstrap

My HTML conundrum involves a div styled with the class .win_box: This particular div is nested within a Bootstrap column, and the link associated with it extends throughout the entirety of said column. However, I want to restrict user access to this link ...

htmlhyperlink

What is the correct method for asynchronously loading CSS files in web development?

On a mission to enhance my website's performance, I set out to achieve the perfect score on PageSpeed Insights. Everything was going smoothly until I encountered an issue with CSS delivery. I initially achieved a flawless result by utilizing the prel ...

javascripthtmlcss

Changing the color of a tooltip for a specific element using Bootstrap 4

Is there a way to customize the tooltip background-color for icons with the classes "alert-danger" to red and "alert-success" to green using the following CSS commands: .alert-danger + .tooltip > .tooltip-inner { background-color: red !important; } ...

javascriptjqueryhtmlcsstooltip