Bootstrap left aligns money figures in financial statements

Struggling with aligning the numbers for money properly? Want them to appear relative to each other but aligned to the left side of the columns, similar to the example in the screenshot below:

Current Alignment:

https://i.sstatic.net/9EnoS.png

Desired Alignment:

https://i.sstatic.net/9CEwP.png

Here is how my structure looks like: 

<tr> 
  <td style="text-align: left">name</td>
  <td style="text-align: right">money</td>
  <td style="text-align: center">date</td>
</tr>

The only CSS modifications I've made so far is setting the width of each td element to 30%

Initially, I tried using a <p> tag inside each cell to align the content to the right and distribute the rest proportionally, but it resulted in adding unnecessary JS or jQuery. Bootstrap is available as well, but I have not utilized it much beyond basic column grid positioning.

If anyone has suggestions on achieving the desired alignment, or can provide some guidance, it would be greatly appreciated. Thank you.

ADDITION: Here's a partial code sample: Codepen

The code provided includes the section where the table is situated, focusing on the relevant CSS classes linked to the alignment issue rather than every single one used in the project. Even the experimental <p> tag is included there.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To create a visually appealing layout, consider using two columns:

<div class="row">
  <div class="col-lg-6">Display list of money values here</div>
  <div class="col-lg-6">[Placeholder for content]</div>
</div>

In the first column, ensure that the text is aligned to the right:

<p class="text-right">Your text goes here.</p>

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 troubleshoot React JSX/HTML input issue displaying as -$NaN.undefined

https://i.sstatic.net/1xIvb.pnghttps://i.sstatic.net/aeQrS.pngI'm currently facing an issue while trying to implement an input field that subtracts a number from another computed value within an HTML table setup. I've noticed that everything work ...

htmlreactjs

Bootstrap - Progress Bar Display

I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, ...

csstwitter-bootstrap

Drag and drop a Jquery image onto the div with its top left corner

Drop targets: <div id="targetContainer" style="width:100px; height:100px;> <div id="tar_0-0" class="target" style="position: relative; float:left; width:50px; height:50px; background-color: #fff;"></div> <div id="tar_1-0" class="t ...

javascriptjqueryhtmldrag-and-drop

"Utilizing jQuery to select elements for the purpose of preventing default

$('input[name=boxes], .item_add a ').on('click', function(e) { e.preventDefault(); //perform common actions } Is it possible to stop the default scrolling behavior when clicking on a link [.item add a], while still allowing the defa ...

jqueryhtml

Ensure a button is automatically highlighted within an active class script

I have created a set of buttons that allow users to change the font family of the text. I would like the border and text color to update automatically when a specific option is selected. Currently, the JavaScript code works well, but when the page first l ...

javascriptcssonclick

Can you explain the role of app.use(bodyParser.urlencoded({ extended: true })) in Express.js?

##What are the potential consequences of omitting this line from my Express code? app.use(bodyParser.urlencoded({ extended: true })); ...

javascripthtmlnode.jsexpress

JavaScript query-string encoding

Can someone clarify why encodeURI and encodeURIComponent encode spaces as hex values, while other encodings use the plus sign? I must be overlooking something. Appreciate any insights! ...

javascripthtml

Utilize the power of Nuxt and Vue 3 to create sortable columns in a table, with the ability to only change the icons on the sorted column

I am facing a challenge with my sortable table icons. Whenever I click on an icon to sort a column, all the other icons also change direction. I understand that this is happening because I am toggling the visibility of icons based on the currentSortDir sta ...

javascripthtmlvue.jsnuxt.js

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...

htmlcssangulartypescript

Is there a method to prompt CSS and the web browser to utilize the system's designated font if available, or default to font-face otherwise?

Is there a way to instruct the browser to download a font only if it is not already built into the OS of the system? Right now, I am using @font-face to define the font, but this results in the font being automatically downloaded by the browser. I would l ...

htmlcssfontswebfonts

Expandable HTML table row feature

I currently have an HTML table with expandable rows, but my goal is to only allow one row to be expanded at a time. When a user expands a row and then decides to expand another row, I want the previously expanded row to automatically close. Essentially, m ...

jqueryhtml

What is the process of invoking a function in ajax from a web service that includes a PDF attachment?

I know how to download a file in my web services, but I'm unsure of how to call this function using ajax. Within my datatable, there is a button column. When I click on a button within the table, I want to be able to download a PDF file from the SQL ...

c#htmlasp.netajax

I attempted to implement the hover effect on a custom Tailwind CSS class I created, but unfortunately, it does not appear to be functioning as expected

For example: .btn {bg-blue-500 text-2 text-orange-300} .btn2 {bg-orange-500 text-2 text-blue-300} Attempted Solution: Edit: Apologies for the oversight in not including the code I was working with... it was late at night. < button className="btn ...

cssnext.jshovertailwind-css

The Openwave mobile browser is having trouble understanding CSS child selectors and descendant selectors

While testing my website on my LG VX8360 cell phone with Openwave Mobile Browser 6.2.3.2, I encountered a problem with CSS child selectors and descendant selectors. Despite specifying that only the second div should have a yellow background, both divs disp ...

htmlcssmobile

The little DIV strayed beyond the boundaries of its parent DIV

I am facing a challenge with the positioning of nested divs within my parent div. The first two are aligned correctly, but the third one is dropping down outside of the parent div on the y-axis. I have tried various solutions from StackOverflow without suc ...

htmlcss

Creating a Transparent Scrollbar in React for Google Chrome

::-webkit-scrollbar { width: 0.5vw; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: rgb(99, 99, 99); border-radius: 10px; } I wrote this code to style a scrollbar in CSS. The scrollba ...

htmlcssreactjsgoogle-chromescrollbar

Optimize your website by caching static pages and content using Node.js

When it comes to caching static content using nodejs, there seem to be two main methods that can be utilized: The first method involves using nodejs and utilizing the following code: app.use(express.static(path.join(__dirname, 'public'), { max ...

javascripthtmlnode.js

Request financial data from AlphaVantage using PHP

I'm currently working on utilizing the alphavantage API to retrieve currency exchange information. In order to obtain the desired data, I am using the following query URI: https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_cu ...

javascriptphphtmljsonajax

Looking to clear a textfield when focused if it contains zero, and when unfocused if it is empty, then automatically insert zero?

What is the best way to clear a text field when it contains zero on focus, and set it back to zero if it's empty on focus out? How can this be implemented globally for every text field by adding a common class to all text fields? ...

javascriptjqueryhtmlcss

Tips for aligning the dialog box in the center of the screen based on the current scroll position

Is there a way to center the dialog box vertically at the current scroll position of the window when any of the "show dialog" buttons are clicked? For instance, if I click on location 3, I want the dialog box to be centered vertically within the current v ...

javascripthtmlcssmodal-dialogcenter