1

I'm trying to have it so that text goes in the border of an element. I'm currently using Bootstrap 5 and jQuery. I've tried to use fieldset and legend elements however that does not seem to acheive this.

This is the result I'm trying to get where AAA is the title:

Example of what I'm aiming to do

HJP
  • 47
  • 4
  • no need for bootstrap. Easiest way to do it is to use `
    ` and `` in any other case the title must be absolutely positioned to the relative parent. This required custom css as bootstrap itself does not have an accurate absolute placement through their classes.
     – tacoshy Nov 05 '21 at 16:38
  • @tacoshy apologies, the way the post was formatted it left out the fieldset and legend elements. – HJP Nov 05 '21 at 16:39

1 Answers1

0

This should work!

<fieldset class="border rounded-3 p-3">
   <legend class="float-none w-auto px-3">
      Your Title
   </legend>
   <p>Your content</p>
</fieldset>
Code GuruDev
  • 348
  • 3
  • 11