CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
B. Dionys
B. Dionys

Reputation: 916

Aligning money numbers to the left bootstrap

Hi im having trouble with some money number alignment. I want my data do be aligned to the left side of the columns BUT the numbers of the money have to look relative to each other like in the screenshot.

This screenshot is what I have atm:

enter image description here

This is what I want to do:

enter image description here

Here is my structure: 

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

And the only css atm that I use for positioning is setting the widht of every of those td's to 30%

At first I thought I could position them simply by putting a <p> in there that would align the content to the right and give the rest its relative widht, however that way would be possible but then I get a ball of js or jquery that I prefer not to have.

I have bootstrap installed but as of now I havent really touched it in this project except for the column grid positioning.

Does anyone have some kind of way to achieve what I am trying, or can someone push me in the right direction? Thanks in advance.

ADDITION: Semi complete code sample: Codepen

The above code is the whole section the table is located in but I copied all css relative to the issue and not every single css class my problem is reconstructed there exactly even the random <p> tag I tried is in there.

Upvotes: 0

Views: 1811

Answers (1)

Ignacio Ara
Ignacio Ara

Reputation: 2582

You should use two columns:

<div class="row">
  <div class="col-lg-6">List of money values</div>
  <div class="col-lg-6">[Empty]</div>
</div>

And align text to right in the first one:

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

Upvotes: 1

Related Questions