JSF not working with twitter-bootstrap

JSF not working with twitter-bootstrap

So I've recently asked quite a few questions regarding twitter-bootstrap.
I'm using JSF in my app, and have noticed that it doesn't play well with
twitter-bootstrap.
For example: trying to use the bootstrap's typeahead functionality doesn't
work with JSF, because this:
<h:inputText data-provide="typeahead" data-items="4"
data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;]"
id="departureAirport" value="#{searchFlightsBean.departureAirport}"
styleClass="input-block-level blue-highlight airportSearch"
placeholder="Enter departure city" required="true">
<f:validateLength minimum="3" maximum="20" />
</h:inputText>
is rendered like this:
<input placeholder="Enter departure city" id="j_id_m:departureAirport"
name="j_id_m:departureAirport" type="text" value="CPT"
class="input-block-level blue-highlight airportSearch">
Note that the data-provide, data-items and data-source attributes have all
been discarded. Using those attributes with a normal input field works
fine, and provides the desired results.
Has anyone else been having these problems? If so, how did you work around
it?
Should I abandon the use of JSF altogether in order to use
twitter-bootstrap effectively?