I have a hopefully simple request but I feel like I'm missing something (could be that I'm missing something because I'm doing it at 2AM). I have a UI:inputcheckbox that I would like to wrap with some slds styling. I can't seam to modify the styling for that element. Ideally I'm looking for styling similar to the following page: https://www.lightningdesignsystem.com/components/forms/#flavor-checkbox-add-button (span class="slds-checkbox">)


Lightning Component:

<aura:component controller="TSTWRP_DisplayPosition" implements="force:appHostable,
                                                                flexipage:availableForAllPageTypes,
                                                                flexipage:availableForRecordHome,
                                                                force:hasRecordId,forceCommunity:availableForAllPageTypes" 
                access="global" >
    <!--  <ltng:require styles="/resource/bootstrap/css/bootstrap.min.css" 
      scripts="/resource/bootstrap/js/jquery-2.js,/resource/bootstrap/js/bootstrap.min.js" /> -->
    <aura:attribute name="lstAccounts" 
                    type="TSTWRP_CommonWrapperClass.DisplayAccountRecords[]" />    
    
    
    <!--- on initialization of component init event will fire and doInit action will execute-->
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    
    <div class="container">
        <h2>Account List</h2>
        <br></br>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Account</th>
                </tr>
            </thead>
            <tbody>
                
                <aura:iteration var="Account" items="{!v.lstAccounts}" >
                    <tr>
                        <td><ui:inputCheckbox value="{!Account.isSelected}"/></td>
                        <td><ui:outputText value="{!Account.AccountName}"/></td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
        <br></br>

        <!-- Test Bed -->
        
        
        <ui:button class="btn btn-default" press="{!c.doSomething}">Perform Action</ui:button>
        
    </div>
 </aura:component>