Style apex select option in Bootstrap theme

Question

Please help me to style custom picklist in bootstrap theme.

So I have a controller with code:

public List<selectOption> getSettings() {
        List<SelectOption> options = new List<selectOption>();
        options.add(new SelectOption('Market/OTC','Market/OTC'));
        options.add(new SelectOption('Margin Lending','Margin Lending'));
        options.add(new SelectOption('Other Services','Other Services'));
        return options;
    } 

And also the vf page with row:

        <div class="form-group">
            <label for="Setting">Setting</label>
            <apex:selectOption value="{!SelectedSetting}" id="Setting" >
                <apex:selectOption value="{!Settings}" />
            </apex:selectOption>
        </div> 

I want to get something like this:

<div class="form-group">
  <label for="Setting">Setting</label>
  <select class="form-control" id="Setting">
    <option>{!Settings}</option>
  </select>
</div>

How to do that?

Answer 1

you can write the bootstrap class in apex selectList. Use styleClass for write classes of bootstrap

    <div class="form-group">
        <label for="Setting">Setting</label>
        <apex:selectList value="{!SelectedSetting}" id="Setting2" styleClass="form-control" size="1"> <apex:selectOptions value="{!Settings}" /> </apex:selectList>
    </div>