Arranging items in a vertical column using CSS based on the content

I am facing an issue with aligning the values in a column under each other without percentages using my own html code, css, and bootstrap classes:

<div class="d-flex">
    <p class="table-string">91.86</p>
    <span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
    <p class="table-string">108.15</p>
    <span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
    <p class="table-string">329.93</p>
    <span class="ml-2">(+593%)</span>
</div>

This is how I want the column to look like:

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

But unfortunately, it currently looks like this:

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

If I want the values to be strictly aligned under each other (hundreds under hundreds, tens under tens, ones under ones) and also have the value and percentage aligned at the end of the field, what changes should I make? Thank you for any assistance.

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

If you're looking for a quick fix, consider using the following method. Simply adjust the width: 50%; property of your <p> and <span> elements.

.table-string {
    width: 50%;
    text-align: end;
}
span.ml-2 {
    width: 50%;
    text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-flex">
    <p class="table-string">91.86</p>
    <span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
    <p class="table-string">108.15</p>
    <span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
    <p class="table-string">329.93</p>
    <span class="ml-2">(+593%)</span>
</div>

Answer №2

To properly format your content, it is important to split your row in half and align the text accordingly.

<div class="row" style="width:10rem">
    <p class="col-6 p-1 text-end">91.86</p>
    <span class="col-6  p-1 text-start">(+61%)</span>
</div>

For a visual example, you can visit this link.

If you require any further assistance, feel free to reach out.

Answer №3

Get rid of d-flex in all Div's and switch it to d-inline for all <p>'s and <span>'s. You can probably get rid of the CSS for .table-string as well.

For example:

<p class="d-inline">91.86</p>
<span class="ml-2 d-inline">(+61%)</span>

Answer №4

It seems like you're working with Bootstrap, and if I'm understanding your query correctly, all you need to do is include two classes in the flex item: flex-column and align-items-end. This will adjust the direction of the flex items and modify the alignment on the cross axis:

<div class="d-flex flex-column align-items-end">
[…]
</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

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

My parent div has a unique feature where clicking on it reveals one of the child divs, and clicking again toggles the visibility of the child div. Inside this child div, there is a switch toggle that functions as a hidden checkbox. The issue I'm facin ...

javascripthtmljquerycss

What is the best way to determine the number of subchildren within a parent div using JavaScript or jQuery?

Can anyone assist me with counting the number of child divs inside a parent div using JavaScript or jQuery? I'm not very experienced in these languages. Below is my code snippet: $(function () { var parent = document.getElementById('parent& ...

javascriptjqueryhtml

Element within an element should be centered

I've been attempting to center a block element, specifically the WordPress caption box with an image, and I'm encountering difficulties. Here is what I have tried: .imagecenter { margin-left: auto; margin-right: auto; display: block; } ...

htmlcsswordpress

Revamp Child Relationship in Ruby on Rails Form

One of the challenges I'm facing is with editing and updating priorities for parent accounts in my application. The "Accounts" model acts as the parent, while the "Priorities" model serves as the child. Creating new priorities for these accounts is s ...

htmlruby-on-railsformsassociationsparent-child

Icon appearing outside the button instead of inside

Here's a button I'm working with: <button class="glyphicon glyphicon-option-horizontal" (click)="myFuncion()"></button> Recently, I updated my bootstrap library from version 3 to 4.2.1 and now the icon is no longer visible. I' ...

htmlangulartwitter-bootstrap

Vibrant Reverberation of Color

When creating a table connected to a MySQL database, I encountered an issue with changing the text color inside the rows. How can I display the text in white within the table? I attempted to use <style = color #34242, but it didn't produce the des ...

phpcss

Can an ID and a "<?php echo ''.$variable.'' ?>" be included in the same input or video tag?

I have a task where I need to insert various Ids into a single video input tag. Specifically, I need to include the player and its row ids from PHP in this format: <video preload controls playsinline id="player[<?php echo ''.$row5['id ...

javascriptphphtml

trouble displaying strength of passwords in AngularJS

Recently, I've delved into the world of angular js and have been working on a new directive to showcase the strength of passwords. If you'd like to see what I've done so far, check out this fiddle - https://jsfiddle.net/user_123/3hruj8ce/12 ...

javascripthtmlangularjs

Ways to obtain jquery object for replaced DOM element

Is there a way to select the new content after using the replaceWith function in my plugin? I want to chain my plugin for the new content. $.fn.customPlugin = function() { this.replaceWith('<div>New Content</div>'); }; So, ideal ...

jqueryhtml

Arrange objects on a grid

I've got an array filled with objects, each containing 3 images, a name, and some details. I'm attempting to display these objects on Bootstrap cards, but currently each card is showing up on its own line. My goal is to arrange the cards in a gri ...

javascriptreactjstwitter-bootstrapbootstrap-4

Using a numeral within a Font Awesome icon symbol to customize a label for a Google Maps marker

I have a Google Maps marker displayed below, applying a Font Awesome icon as the label/icon. However, I am unsure how to a.) change the color of the marker and b.) include a number inside the marker. Referencing this Stack Overflow post This is the code ...

javascripthtmlcssgoogle-mapsgoogle-maps-markers

If the content within a <div> element exceeds the available width, a horizontal scrollbar will be displayed

I have a scenario where I am using an absolute div to overlap another div. The div that overlaps is the absolute one (.content), and if the overlapped div (.left) doesn't fit the screen width, a horizontal scroll bar does not appear. How can I automat ...

htmlcss

Challenges with implementing emotion in Material UI 5

Recently, I upgraded my react app from Material UI 4 to 5 Beta. After consulting the documentation on the docs style library, I learned that the new version allows the use of emotion. However, when I attempted to implement it, I encountered an issue with t ...

cssreactjsmaterial-uiemotion

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

javascriptcss

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Within a single tag, I have a string as shown in the example below. My goal is to display the first 20-25 words on screen, then continue with the next set of words, and so forth. Once 20 words are displayed, the remaining text should be hidden. <p>Lo ...

javascripthtml

The Javascript function I created references a variable that seems to be undefined in the code

Recently, I discovered a function that is triggered with an onclick event using "openNav()" from an HTML element. Below is the code snippet for this function: function openNav() { document.getElementById("nav-drawer").classList.add("nav-drawer-open"); ...

javascripthtmlvariables

Enhancing audio control features using HTML and JavaScript

After utilizing various suggestions, I have successfully created a basic audio slider that starts playing sound (at zero volume) when clicked by the user. They can then adjust the volume as needed. My only challenge is that the volume adjustment only occu ...

javascripthtmlcss

Bootstrap 4 Carousel with Multiple Items

I am looking to create a carousel that can display multiple items or images at once. The carousel should show 4 items initially, and when I click on 'next', the next item should appear, and so forth. Below is an image depicting what I have in min ...

jquerycarouselbootstrap-4

Ways to include margin right for a table

Here is the HTML code I am working with: <table width="100%;> <tr><hr style="width:100%;"></hr></tr> <tr> <span style="float:left">abc</span> <span class="noindex" ...

htmlcss

HTML Techniques: Flipping the Script - Writing Characters from Right to Left

In order to showcase the temperature in degrees Celsius, I have implemented a placement technique using absolute positioning. Consequently, the °C symbol will persist in its designated spot. To achieve the desired presentation, the text should be displaye ...

htmlcss