What steps can I take to align elements using justify-content-between?

I am trying to arrange two elements, one on the most right and the other on the most left side. I have attempted to use justify-content-between but it doesn't seem to be working and I'm not sure why.

HTML

<div class="post-left d-sm-flex justify-content-between">
    <ul>
        <li>
            <div class="post-author">
                <div class="avatar avatar-online avatar-xs">
                    <a href="doctor-profile.html"><img src="assets/img/doctors/doctor-thumb-01.jpg" class="avatar-img rounded-circle" alt="Post Author">
                        <span>username</span></a>
                </div>
            </div>
        </li>
        <li class="h4 "><i class="fas fa-money-bill-alt money"></i>400 $</li>                                                       
    </ul>
</div>

style

.post-left ul {

    list-style: none;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: inherit;
}

.post-left ul li {
    color: #15558d ;
    margin-bottom: 5px;
    margin-left: 10px;
    
}
htmlcssbootstrap-4html-lists

Answer №1

If you want to align items in the .post-left ul with space between them, you can simply include justify-content: space-between; like this:

.post-left ul {
    .
    .
    .

    justify-content: space-between;
}

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

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

javascriptcssvue.jsnativescriptnativescript-vue

Why isn't the class applying the color to the Angular span element?

My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so: Some text <span class="failResult">that's emphasized</span> and oth ...

htmlcssangular

Implementing a queue with an on-click event

As a self-proclaimed Java nerd diving into the world of jQuery, I'm facing some challenges. My goal is to create 3 interactive boxes that behave in a specific way: when clicked, one box should come forward while the other two dim and stay in the back ...

javascriptjqueryhtmlcss

Tips for utilizing jQuery buttons to submit forms in PHP

I'm struggling to submit the form using PHP from a button in jQuery. I've tried adding an ID for the button, but I can't seem to submit the values. Since I'm new to jQuery, this task is proving to be a bit challenging. Can anyone provid ...

javascriptjquerybootstrap-4

Why won't my HTML/CSS/JavaScript modal pop up in front of everything else?

Attempting to create my own modal in JSFiddle has been an interesting challenge for me. Once I had something that worked, I tried implementing it on my website. Unfortunately, the modal appears behind other elements on the page. What could be causing this ...

javascriptjqueryhtmlcss

Duplication of elements in a Meteor and React environment

When it comes to creating a basic Meteor app with React, this is the structure I have put in place: <head> <title>test</title> </head> <body> <div id="render-target"></div> </body> Here is the start ...

htmlmeteorreactjs

Alignment vertically in a Razor view

Here is a snippet of code I am working with: <p> @Html.LabelFor(m => m.address, new { style="vertical-align: middle;" }) @Html.TextAreaFor(m => m.address, new { @class = "addition ", value = "",rows="4", required = "required" }) </p> A ...

htmlcssrazor

Experience the Firefox nightmare with a fixed background-attachment!

I've been struggling with a puzzling issue all day, and I'm hoping that someone with more expertise can help me solve it. As I work on updating the design of my website, I've encountered what seems to be a bug specific to Firefox. I've ...

htmlcssfirefox

"Top navigation element and anchors now have a permanent fix in place

Having some trouble with the CSS here - anchor links are getting hidden behind the navigation bar. Any ideas on how to fix this? Do you have a suggestion for making sure the anchor link text is visible just below the navigation bar? /* adjust the style a ...

htmlcss

Click on an element using jQuery to apply a specific class to all other similar

I am looking to dynamically add a class to a DIV after clicking on an A element with the same class. Here is an example: <ul> <li><a href="#1" class="test1">1</a></li> <li><a href="#2" class="test2">2</a>< ...

javascriptjqueryhtmlcss

Tips for sending the output of a Python function to the webpage associated with the clicked action button in Python's Bottle framework

Here is a method I have: @post('/home', method='post') def myFunction(): if(len(request.forms.get('Matrix_dimension').strip()) != 0): length = int(request.forms.get('Matrix_dimension').strip()) tableRow = ...

pythonhtmlbottle

Alter the class generated by ng-repeat with a click

I currently have a dynamically generated menu displayed on my website, and I am looking to apply a specific class to the active menu item based on the URL (using ngRoutes). The menu items are generated from a $scope.menu object, so my initial thought was t ...

htmlangularjs

In my Flask Bootstrap website, the navigation bar remains unchanged by the presence of Javascript

I am currently in the process of creating a navigation bar for my Flask website using Bootstrap. However, when I implemented it into my HTML code, it is not displaying correctly which leads me to believe that the JavaScript may not be functioning properly. ...

javascripthtmlcsstwitter-bootstrapflask

Ways to determine the height of a responsive div's background image

I have a container with a background image. Inside this container, there are additional elements like my navigation bar. My goal is to make the container have the same height as the background image. I've attempted the following: .bg { ...

css

Examining the functionality of my PHP codes and forms

I'm currently working with two HTML forms and two PHP scripts. The first form is designed to save a user's email to a .txt file, while the second form is a Stripe payment form that processes payments using PHP code. However, I've encountere ...

phphtmlformstesting

What is a sophisticated method to hide an element from view?

My dilemma involves a dropdown menu and a list of elements that are initially set to hidden using CSS. When an item is selected from the dropdown, it becomes visible. However, I am struggling with finding a way to revert the previously selected element b ...

javascriptjqueryhtmlcssdisplay

Remove a Row from a Table by Clicking a Button with Ajax

I currently have an HTML table with 4 columns: SKU Group, Group_ID, Edit button, and Delete button. My focus at the moment is on implementing the delete functionality. I want it so that when the delete button is clicked, a confirmation box appears. If "OK" ...

javascriptphphtmlajaxsql-delete

Is there an optimal method for transforming HTML to PostScript in Java?

Is there an optimal method in Java to convert HTML with CSS2 support into a PostScript file? ...

javahtmlcsspostscript

What sets the Virtual DOM apart from the Shadow DOM?

During my exploration of Vue.js, I delved into the realm of shadow DOM to grasp the essence of a fundamental Vue.js Component. As I studied shadow DOM and its similarities to virtual DOM, I embarked on a quest for diverse information pertaining to both con ...

htmlreactjsdomvue.js

Leverage htaccess functionality to modify website configurations without altering the URL

I currently have the following htaccess configuration: <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^(.*)$ dl.php?id=/$1 [QSA,L] </IfModule> It works perfectly fine. However, I am facing a problem with my site URLs and images ...

phphtml.htaccessmod-rewrite