Reset fieldset and legend behaviour after embeding twitter bootstrap

Question

I have a one confusion with twitter bootstrap. I have legend tag inside fieldset. This is my code:

<form>
    <fieldset>
        <legend>Test legend</legend>
        Some text .. 
    </fieldset>
</form>

It is very simple code and it result can be viewed here: http://jsfiddle.net/zono/ApzWW/

After bootstrap embedding I have very different view of these dom elements. The result can be viewed here: http://jsfiddle.net/zono/ApzWW/1/

How I can reset fieldset and legend element behaviour?

I would be very grateful to all means ideas and recommendations.

Best regards.

Answer 1

You really just need to overwrite the Bootstrap styling in your own style sheet Something like the below should do the trick...

legend {
    display: block;
    width: auto;
    padding: 0 5px;
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
    border: auto;
    border-bottom: none;
}

fieldset {
    border: 2px groove threedface;
    padding: 5px;
}

Here's a fiddle:

http://jsfiddle.net/ApzWW/2/

Answer 2

You might want to consider to use the panel in bootstrap as alternative, since it already have the style embedded. Here is the example

CSS (adopted from @Billy Most answer) with left-aligned:

legend 
{
  width: auto;
  padding: 0 5px;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  border-bottom: none;
  text-align: left;
}

HTML:

<fieldset class="panel panel-default col-md-5">
  <legend>Sort By/Filter</legend>
  Inside the fieldset
</fieldset>

Output:

http://cdpn.io/pJuDB