1

I'm trying to place to place a text underline without using CSS. I've used <p><u>text</u></p> and class="text-decoration-underline">, but neither seem to have an option to offset so that the text sits a few px lower than default.

Only other method I've seen is class="list-group list-group-flush"> but it takes the length of the entire page.

Barak David
  • 45
  • 1
  • 6

1 Answers1

2

You could use the border and padding (pb-1, pb-2, etc...) utility classes...

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

<p class="m-5">
  <span class="border-bottom pb-1">text with underline</span> and other text
</p>

Responsive demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624