Bootstrap - Adding legend to well

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 w

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

Answer 2

This worked for me in what I was trying to achieve as a groupbox in Bootstrap.

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-legend {
  display: block;
  font-size: 14px;
  width: auto;
  padding: 2px 7px 2px 5px;
  margin-bottom: 20px;
  line-height: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

<form>
  <fieldset class="well">
    <legend class="well-legend">Group Box Legend</legend>
    ... your inputs ...
  </fieldset>
</form>