Salesforce Lightning Custom Components with Bootstrap

AccountController.apxc

public with sharing class AccountController {
  @AuraEnabled
   public static List<Account> findAll() {
             return [SELECT id, Name, AccountNumber, Fax,Industry,Type  FROM Account LIMIT 10];
   }
}

accountListComponent.cmp

<aura:component controller="absi_dev.AccountController" implements="flexipage:availableForAllPageTypes" >
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    	<div class="table table-bordered">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Account Name</th>
                    <th>Account Number</th>
                    <th>Fax</th>
                    <th>Industry</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.accounts}" var="account">
                <tr>
                    <td>{!account.Name}</td>
                    <td>{!account.AccountNumber}</td>
                    <td>{!account.Fax}</td>
                    <td>{!account.Industry}</td>
                    <td>{!account.Type}</td>
                </tr>
                </aura:iteration>
            </tbody>
  		</table>
    </div>
</aura:component>

accountListComponentController.js

({
	 	    doInit : function(component, event, helper) {        
        			var action = component.get("c.findAll");
        			action.setCallback(this, function(a) {
            		component.set("v.accounts", a.getReturnValue());
        				});
       			 $A.enqueueAction(action);
    			 }
	 	    }
})

Application.app

<aura:application >
   <link href='/resource/bootstrap/' rel="stylesheet"/>
	<div class="container">
		<nav role="navigation" class="navbar navbar-inverse">
			<div class="navbar-header">
				<a href="#" class="navbar-brand">Accounts Details</a>
			</div>
			<div id="navbarCollapse" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Messages</a></li>
				</ul>
			</div>
             </nav>
       </div>  
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <absi_dev:accountListComponent/>
            </div>
        </div>
    </div>    
</aura:application>