Reset field style and legend behavior after implementing twitter bootstrap

Question

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

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

This is very simple code, and the result can be seen here: http://jsfiddle.net/zono/ApzWW/

After inserting the bootstrap, I have a very different look at these dom elements. The result can be seen here: http://jsfiddle.net/zono/ApzWW/1/

How can I reset the behavior of a set of fields and a legend?

I would be very grateful for all the ideas and recommendations.

Sincerely.

Answer 1

Bootstrap . - ...

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;
}

:

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

Answer 2

, bootstrap , .

CSS ( @Billy Most) :

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>

:

http://cdpn.io/pJuDB