'Bootstrap/CSS: get text aligned left center

I need your help. I have a column where there is some text. This must be in the center but aligned as shown below. I tried adding a

display: inline-block; text-align: left

but it does not work.

I should have as shown below:

                              Other Lorem Stuff
                          > Lorem ipsum dolor sit amet
                          > Consectetur adipiscing elit
                          > Aenean laoreet lectus nec risus 
                            malesuada auctor.
                          > Vestibulum pellentesque, ante sit 
                            amet congue tempus

note that when the writings go back, they go under the writing and not under the > symbol

This is code:

.footsmall{
    background-color: #FFF8DC;
    top:-50px;
    right: 100px;
    height: 300px;
    display: inline-block; 
    text-align: left
}
<div class="col-3 position-absolute footsmall text-center p-3">
                <p class="fs-4">Other Lorem Stuff</p>
                <p> > <u>Lorem ipsum dolor sit amet</u></p>
                <p> > <u>Consectetur adipiscing elit</u></p>
                <p> > <u>Aenean laoreet lectus nec risus malesuada auctor.</u></p>
                <p> > <u>Vestibulum pellentesque, ante sit amet congue tempus</u></p>
            </div>

Can anyone help me please?

cssbootstrap-4bootstrap-5


Solution 1:[1]

You could use a flexbox container for each item.

  <div class="d-flex">
    <span>&gt;</span>
    <p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
  </div>

See the working snippet below:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="col-3 p-3 text-center">
      <p class="fs-4">Other Lorem Stuff</p>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Consectetur adipiscing elit</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Aenean laoreet lectus nec risus malesuada auctor.</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Vestibulum pellentesque, ante sit amet congue tempus.</p>
      </div>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Solution 2:[2]

A few things to note, rather than using display and text-align in your CSS you can just add the classes directly to your elements:

<div class="d-inline-block text-start"> </div>

Instead of paragraphs, you could use an unordered list and change the marker style to the chevron you want.

.custom-li {
    list-style-type: '> ';
}
        <div class="col-3 footsmall text-center">
            <p class="fs-4 p-3">Other Lorem Stuff</p>
            <ul class="text-start custom-li">
                <li>
                    <u>Lorem ipsum dolor sit amet</u>
                </li>
                <li>
                    <u>Consectetur adipiscing elit</u>
                </li>
                <li>
                    <u>Aenean laoreet lectus nec risus malesuada auctor.
                </li>
                <li>
                    <u>Vestibulum pellentesque, ante sit amet congue tempus</u>
                </li>
            </ul>
        </div>

Is that what you were after? Having the text not end up below your line markers?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arleigh Hix
Solution 2 Graham Reynolds

Related Questions