jquery-ui datepicker theme not shown properly

Question

I tried adding a jquery-ui datepicker to my website. I downloaded the necessary jquery-ui js components and Smoothness theme css. The problem is that when I add the widget to my site, it looks like this:

Broken datepicker

as opposed to this:

What it should look like

I'm using customized twitter bootstrap as the main style for my site, but it doesn't seem to affect the styling of the widget according to Chrome Inspect element.

Any ideas what could be wrong, or how could I investigate this further?

Answer 1

you need to change the size of your font :

.ui-widget {
    font-size: 11px;
}