CODEWITHSUNDEEP
cssbootstrap-4
dtar
dtar

Reputation: 1669

Bootstrap 4 align text left in equal columns like table

I have the following code for making a list of links:

<h3>Hours</h3>
<div class="hours-display pb-2">
  <div class="mb-0"><span class="mr-2"><strong>Mon</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="0 0930 2300"></div>
  <div class="mb-0"><span class="mr-2"><strong>Tue</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="1 0930 2300"></div>
  <div class="mb-0"><span class="mr-2"><strong>Wed</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="2 0930 2300"></div>
</div>

And the result you can see in the image enter image description here

How to correctly vertically align the columns?

Upvotes: 0

Views: 44

Answers (1)

wouch
wouch

Reputation: 1241

I would restructure and do something like below, where there is an outer flex div that has children that are flex-column so the information will flex vertical instead of default horizontal.

Note that the 2nd div that contains the hours needs to have divs wrapped around the hours and the accompanying spans because there are more than 1 child element. Wrapping them in divs can allow the direct child of the 2nd d-flex div to wrap them correctly

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Hours</h3>
<div class="d-flex hours-display pb-2">
  <div class="d-flex flex-column">
    <span class="mr-2"><strong>Mon</strong></span>
    <span class="mr-2"><strong>Tue</strong></span>
    <span class="mr-2"><strong>Wed</strong></span>
  </div>
  <div class="d-flex flex-column">
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
  </div>
  <div class="d-flex flex-column">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="0 0930 2300">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="1 0930 2300">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="2 0930 2300">
  </div>
</div>

Upvotes: 2

Related Questions