title: Bootstrap 4 fieldset legend field at top and bottom
body: <p>Can anyone suggest how to add legend text on bottom border in bootstrap 4 </p>
  
  <p>I tried with <code>position</code> and <code>margin</code> But no use.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
  &lt;fieldset class="border p-2"&gt;
     &lt;legend  class="w-auto"&gt;Head&lt;/legend&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>expected view is</p>
  
  <p><a href="https://i.stack.imgur.com/vtgkk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vtgkk.png" alt="enter image description here"></a></p>
  
  <p>Thanks in advance</p>