CODEWITHSUNDEEP
csstwitter-bootstrapfieldset
floriank
floriank

Reputation: 25698

Twitter bootstrap: Nested fieldsets?

I need to get something like this done in a way that I can use twitter bootstrap.

<fieldset>
    <legend>Main Section</legend>
    <div class="left-column">
        some stuff here
    </div>
    <div class="right->column">
        <fieldset>
            <legend>A form inside</legend>
            form here
        </fieldset>
    </div>
</fieldset>

Bootstrap is for some reason styling the fieldsets different than usual without a border. If I add a border and some padding I can't work any longer properly with the grid. The result always screwed up for me. I need the fieldset to look like in the mockup with the border, some padding and the label inside the border (well thats easy ;)).

So whats the best way to get this done by using bootstrap and following its principles?

Example

Edit: Better but I dont like the solution for some reason...

        <fieldset class="row fieldset">
            <legend>Main Section</legend>
            <div class="span6">
                some stuff here
            </div>
            <div class="span6">
                <fieldset class="fieldset">
                    <legend>A form inside</legend>
                    form here
                </fieldset>
            </div>
        </fieldset>

.fieldset {
    border: 1px solid #ccc;
    padding: 10px;
}

.fieldset .span6 {
    width: 560px;
}

Upvotes: 2

Views: 16149

Answers (1)

baptme
baptme

Reputation: 10092

<div class='container'>
  <fieldset class="fieldset">
    <legend>Main Section</legend>
    <div class="row-fluid">
      <div class="span6">
        some stuff here
      </div>
      <div class="span6">
        <fieldset class="fieldset">
          <legend>A form inside</legend>
            form here
        </fieldset>
       </div>
  </fieldset>
</div>

.fieldset {
    border: 1px solid #ccc;
    padding: 10px;
}

http://jsfiddle.net/baptme/ppxGG/

Upvotes: 3

Related Questions