title: Bootstrap - Adding legend to well
body: <p>I am currently using twitter bootstrap, which is working nicely, but I would like to add a legend to the "well" elements that are used in a form (so that I can have multiple wells, denoting sub-sections on a form).</p>
  
  <p>An example of what my form looks like now is:</p>
  
  <p><img src="https://i.stack.imgur.com/zSRUX.png" alt="enter image description here"></p>
  
  <p>I would like to add a legend so that I can have two separate sections beneath the "Details" heading, for example, but be able to denote what they are for. A legend seems the best way to do this.</p>
  
  <p>The relevant section of the html looks like:</p>
  
  <pre><code>&lt;form&gt;
     &lt;div class="row"&gt;
          &lt;div class="span6"&gt;
          &lt;div class="nonboxy-widget"&gt;
              &lt;div class="widget-head"&gt;
                  &lt;h5&gt;Details&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="widget-content"&gt;
                   &lt;div class="widget-box"&gt;
                      &lt;div class = 'form-horizontal well'&gt;
                          &lt;fieldset&gt;
                              &lt;div class="control-group"&gt;
                                  &lt;label class="control-label"&gt;Sale Type&lt;/label&gt;
                                  &lt;div class="controls"&gt;
  </code></pre>
  
  <p>When I attempt to add a legend tag to either the fieldset or the <code>div</code> with class <code>form-horizontal well</code> it renders like a heading inside the box, not like a normal html legend. It renders like:</p>
  
  <p><img src="https://i.stack.imgur.com/GpIPs.png" alt="enter image description here"></p>
  
  <p>with the code</p>
  
  <pre><code>&lt;div class = 'form-horizontal well'&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Details&lt;/legend&gt;
      &lt;div class="control-group"&gt;
  </code></pre>
  
  <p>Can anyone recommend a way to get this to render like a normal legend, on the border of the box?</p>
  
  <p>EDIT: Thanks to the code from Simbirsk, I now have:</p>
  
  <p><img src="https://i.stack.imgur.com/VbyPn.png" alt="enter image description here"></p>
  
  <p>This is pretty close, but what I wanted was to have the legend look like a normal html legend on a fieldset (i.e. for it to sit in the border), so I changed the CSS to:</p>
  
  <pre><code>legend {
  padding: 0;
  margin-left: 10px;
  margin-bottom: -9px;
  border: 0;
  color: #999999;
  background-color: #333333;
  }
  </code></pre>
  
  <p>but that resulted in this:</p>
  
  <p><img src="https://i.stack.imgur.com/gPT5a.png" alt="enter image description here"></p>
  
  <p>How can I ensure that the border on the well "breaks" (is not displayed behind the text) like a normal fieldset legend?</p>
  
  <p>EDIT 2: Following the edit to the first answer, I applied the code to my css and ended up with:</p>
  
  <p><img src="https://i.stack.imgur.com/nKXQ8.png" alt="enter image description here"></p>
  
  <p>You will note this is not quite what I was looking for - I am trying to get the legend on the border of the well div, not on the fieldset itself (because this is a nested form, there could be multiple fieldsets within one well, so I can't put the border on the fieldset itself).</p>
  
  <p>I seemed to have achieved this with the code above, the only problem was putting a break in the border where the legend is - can this be done with some kind of opacity to the background of the legend text, and a bit of padding?</p>
  
  <p>Any further suggestions?</p>
  
  <p>Thanks!</p>