Question

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).

An example of what my form looks like now is:

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.

The relevant section of the html looks like:

<form>
   <div class="row">
        <div class="span6">
        <div class="nonboxy-widget">
            <div class="widget-head">
                <h5>Details</h5>
            </div>
            <div class="widget-content">
                 <div class="widget-box">
                    <div class = 'form-horizontal well'>
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label">Sale Type</label>
                                <div class="controls">

When I attempt to add a legend tag to either the fieldset or the div with class form-horizontal well it renders like a heading inside the box, not like a normal html legend. It renders like:

with the code

<div class = 'form-horizontal well'>
  <fieldset>
    <legend>Details</legend>
    <div class="control-group">

Can anyone recommend a way to get this to render like a normal legend, on the border of the box?

EDIT: Thanks to the code from Simbirsk, I now have:

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:

legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}

but that resulted in this:

How can I ensure that the border on the well “breaks” (is not displayed behind the text) like a normal fieldset legend?

EDIT 2: Following the edit to the first answer, I applied the code to my css and ended up with:

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).

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?

Any further suggestions?

Thanks!

Answer 1

Put the .well on the fieldset and override Bootstrap’s legend and fieldset styles.
HTML

<form>
    <fieldset class="well the-fieldset">
        <legend class="the-legend">Your legend</legend>
        ... your inputs ...
    </fieldset>
</form>

CSS

.the-legend {
    border-style: none;
    border-width: 0;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
}
.the-fieldset {
    border: 2px groove threedface #444;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

NOTE: I’ve ommited Bootstrap classes like rows, spans, controls, etc. Use them to fit your layout.
EDIT: Changed code to include fieldset styles “reset”.