Question

I’m not the best when it comes to CSS to here goes.

I’m trying to format fields in twitter bootstrap by strictly using CSS / javascript (or jQuery)

Here is my HTML:

<div class="span12">
    <div id="DOB_picker" class="DOB_picker">
        <fieldset class="birthday-picker">
            <label for="birth[month]">Month</label>
            <select class="birth-month" name="birth[month]"></select>

            <label for="birth[day]">Day</label>
            <select class="birth-day" name="birth[day]">

            <label for="birth[year]">Year</label>
            <select class="birth-year" name="birth[year]"></select>         
        </fieldset>
    </div>
</div>

I can not change the HTML as it is auto generated and therefore the only way for me to style it is CSS or javascript.

This is what it looks like right now

EDIT: After trying reagan’s Solution

var html = $('.birthday-picker').html();
$('.birthday-picker').html('<row>' + html + '</row>');

I used the following code to try to implement reagan’s solution but had no luck 🙁

Answer 1

As you requested a CSS / JS only solution..

You will need to wrap your label & select elements with a element (.control-group)

$("#DOB_picker").find("label").each(function(){

     $(this).nextUntil("label").andSelf().wrapAll("<div class='control-group'></div>");
});

​

Your .control-group will need the following css, or similar

   #DOB_picker .control-group {
    display: inline-block;
    zoom:1;
    float: left;
    }

    #DOB_picker .control-group label {
    text-align:left;
    }

You really want to put this CSS under custom, semantic classes so it doesn’t trash the rest of your site.

---

Working Example

http://jsfiddle.net/blowsie/nJm2C/