CODEWITHSUNDEEP
htmlcss
Kárpáti András
Kárpáti András

Reputation: 1239

Left align div, then center align bottom text

enter image description here

Hello! So I'm using bootstrap 4.

I have 2 cols.

In the left one, I'd like to have a text left-aligned Left aligned text, and under it a centered Centered text

Same with the right aligned text.

How can I achieve a left-aligned and a right aligned text with center aligned text under them?

Upvotes: 1

Views: 74

Answers (1)

mbao01
mbao01

Reputation: 191

Since you mentioned Bootstrap 4, this works:

<div class="row">
  <div class="col">
    <div class="d-inline-block float-left">
      <div class="text-left">
        <h4>Left Aligned Text</h4>
        <span class="d-block text-center">center aligned text</span>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="d-inline-block float-right">
      <div class="text-right">
        <h4>Right Aligned Text</h4>
        <span class="d-block text-center">center aligned text</span>
      </div>
    </div>
  </div>
</div>

Here's how that should look:

enter image description here

Upvotes: 1

Related Questions