Visualforce dashboard using Twitter Bootstrap

BootstrapDashboard.page

<apex:page sidebar="false" docType="html-5.0" controller="VSDashBoard_Con">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script>
        function goToDetailPage(recId){
            if(typeof sforce != 'undefined' && typeof sforce.one != 'undefined'){
                sforce.one.navigateToSObject(recId);
            }
            else{
                window.location.href = '/'+recId;
            }
            return false;
        }
    </script>
        <center>  
           <div class="page-header">
                <h1><span class="glyphicon glyphicon-calendar"></span> User Dashboard <small>{!$User.FirstName} {!$User.LastName}</small></h1>
           </div>  
        </center>
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-primary">
                <div class="panel-heading">Tasks</div>
                    <div class="well" style="text-align:center;">
                         <span class="glyphicon glyphicon-tasks" style="font-size:40px"></span> &nbsp;<span style="font-size:54px">{!Tasks.size}</span>
                         <p class="text-muted">Tasks due for Today</p>
                    </div>
                    <apex:dataTable value="{!Tasks}" var="task" styleClass="table table-condensed table-hover table-bordered" rows="3">
                        <apex:column headerValue="Subject">
                            <apex:outputLink onclick="goToDetailPage('{!task.Id}')">{!task.Subject}</apex:outputLink>
                        </apex:column>
                        <apex:column value="{!task.Status}" headerValue="Status"/>
                        <apex:column value="{!task.ActivityDate}" headerValue="Due Date"/>
                    </apex:dataTable>
                    <apex:outputPanel rendered="{!Tasks.empty}">
                        <div class="alert alert-success" style="text-align:center">
                            <span class="glyphicon glyphicon-ok-sign"></span> No records to display
                        </div>
                    </apex:outputPanel>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                <div class="panel-heading">Cases</div>
                    <div class="well" style="text-align:center;">
                         <span class="glyphicon glyphicon-briefcase" style="font-size:40px"></span>&nbsp;<span style="font-size:54px">{!Cases.size}</span>
                         <p class="text-muted">Assigned Cases</p>
                    </div>
                    <apex:dataTable value="{!Cases}" var="case" styleClass="table table-condensed table-hover table-bordered" rows="3">
                        <apex:column headerValue="Case Number">
                            <apex:outputLink onclick="return goToDetailPage('{!case.Id}')" >{!case.CaseNumber}</apex:outputLink>
                        </apex:column>
                        <apex:column value="{!case.Status}" headerValue="Status"/>
                        <apex:column value="{!case.Priority}" headerValue="Priority"/>
                    </apex:dataTable>
                    <apex:outputPanel rendered="{!Cases.empty}">
                        <div class="alert alert-warning" style="text-align:center">
                            <span class="glyphicon glyphicon-exclamation-sign"></span> No records to display
                        </div>
                    </apex:outputPanel>
                </div>
            </div>
                        <div class="col-md-4">
                <div class="panel panel-primary">
                <div class="panel-heading">Chatter Feed</div>  
                    <div class="well" style="text-align:center;">  
                        <apex:repeat rows="5" value="{!feedItemPage.items}" var="feedItem">
                            <div class="media">
                                <a class="pull-left" href="/{!feedItem.parent.id}">
                                 <img class="media-object" src="{!feedItem.photoUrl}" alt="{!feedItem.actor.name}"/>
                                 </a>
                                 <div class="media-body">
                                    <h4 class="media-heading">{!feedItem.actor.name}</h4><br/>
                                    <apex:repeat value="{!feedItem.body.messageSegments}" var="segment">
                                        <apex:outputPanel layout="none" rendered="{!segment.type == TextSegmentType}">
                                            {!segment.text}
                                        </apex:outputPanel>
                                        <apex:outputPanel layout="none" rendered="{!segment.type == MentionSegmentType}">
                                            <a href="/{!segment['record'].id}">@{!segment['record'].name}</a>
                                        </apex:outputPanel>
                                        <apex:outputPanel layout="none" rendered="{!segment.type == FieldChangeSegmentType}">
                                            {!segment.text}
                                        </apex:outputPanel>
                                        <apex:outputPanel layout="none" rendered="{!segment.type == MoreChangesSegmentType}">
                                            {!segment.text}
                                        </apex:outputPanel>
                                        <apex:outputPanel layout="none" rendered="{!segment.type == LinkSegmentType}">
                                            {!segment.text}
                                        </apex:outputPanel>
                                        <apex:outputPanel layout="none" rendered="{!segment.type == EntityLinkSegmentType}">
                                            <a href="/{!segment['reference'].id}">{!segment.text}</a>
                                        </apex:outputPanel>
                                        <apex:outputPanel layout="none" rendered="{!segment.type == HashtagSegmentType}">
                                            <a href="/_ui/core/chatter/topics/TopicPage?name={!segment['tag']}">{!segment.text}</a>
                                        </apex:outputPanel>
                                    </apex:repeat>
                                    <apex:repeat value="{!feedItem.comments.comments}" var="comment">
                                        <div class="media">
                                            <a class="pull-left" href="/{!comment.parent.id}">
                                             <img class="media-object" src="{!comment.user.photo.smallPhotoUrl}" alt="{!comment.user.firstname}"/>
                                            </a>
                                            <div class="media-body">
                                                <h4 class="media-heading">{!comment.user.firstname} {!comment.user.lastname}</h4><br/>
                                                <apex:repeat value="{!comment.body.messageSegments}" var="segment">
                                                    <apex:outputPanel layout="none" rendered="{!segment.type == TextSegmentType}">
                                                        {!segment.text}
                                                    </apex:outputPanel>
                                                    <apex:outputPanel layout="none" rendered="{!segment.type == MentionSegmentType}">
                                                        <a href="/{!segment['record'].id}">@{!segment['record'].name}</a>
                                                    </apex:outputPanel>
                                                </apex:repeat>
                                            </div>
                                        </div>
                                    </apex:repeat>
                                </div>
                            </div>
                        </apex:repeat> 
                    </div>  
                </div>
            </div>
            <!--<div class="col-md-4">
                <div class="panel panel-primary">
                <div class="panel-heading">Leads</div>
                    <div class="well" style="text-align:center;">
                         <span class="glyphicon glyphicon-user" style="font-size:40px"></span>&nbsp;<span style="font-size:54px">{!Leads.size}</span>
                         <p class="text-muted">Unread Leads</p>
                    </div>
                    <apex:dataTable value="{!Leads}" var="lead" styleClass="table table-condensed table-hover table-bordered" rows="3">
                        <apex:column headerValue="Name">
                            <apex:outputLink onclick="return goToDetailPage('{!lead.Id}')" >{!lead.Name}</apex:outputLink>
                        </apex:column>
                        <apex:column value="{!lead.Status}" headerValue="Status"/>
                        <apex:column value="{!lead.CreatedDate}" headerValue="Created Date"/>
                    </apex:dataTable>
                    <apex:outputPanel rendered="{!Leads.empty}">
                        <div class="alert alert-warning" style="text-align:center">
                            <span class="glyphicon glyphicon-exclamation-sign"></span> No records to display
                        </div>
                    </apex:outputPanel>
                </div>
            </div>-->           
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-primary">
                <div class="panel-heading">Last Viewed Accounts</div>
                    <apex:dataTable value="{!Accounts}" var="acc" styleClass="table table-condensed table-hover table-bordered" >
                        <apex:column headerValue="Name">
                            <apex:outputLink onclick="return goToDetailPage('{!acc.Id}')" >{!acc.Name}</apex:outputLink>
                        </apex:column>
                        <apex:column value="{!acc.Type}" headerValue="Type"/>
                        <apex:column value="{!acc.BillingState}" headerValue="State"/>
                    </apex:dataTable>
                    <apex:outputPanel rendered="{!Accounts.empty}">
                        <div class="alert alert-warning" style="text-align:center">
                            <span class="glyphicon glyphicon-exclamation-sign"></span> No records to display
                        </div>
                    </apex:outputPanel>
                </div>
            </div>
            <!--<div class="col-md-6">
                <div class="panel panel-primary">
                <div class="panel-heading">Last Viewed Contacts</div>
                    <apex:dataTable value="{!Contacts}" var="contact" styleClass="table table-condensed table-hover table-bordered" rows="3">
                        <apex:column headerValue="Name">
                            <apex:outputLink onclick="return goToDetailPage('{!contact.Id}')" >{!contact.Name}</apex:outputLink>
                        </apex:column>
                        <apex:column value="{!contact.Phone}" headerValue="Phone"/>
                        <apex:column value="{!contact.Department}" headerValue="Department"/>
                    </apex:dataTable>
                    <apex:outputPanel rendered="{!Contacts.empty}">
                    <div class="alert alert-warning" style="text-align:center">
                        <span class="glyphicon glyphicon-exclamation-sign"></span> No records to display
                    </div>
                    </apex:outputPanel>
                </div>
            </div>--> 
           <div class="col-md-6">  
             <div class="panel panel-primary">
             <div class="panel-heading">Last Viewed Users</div>  
               <apex:dataTable value="{!Users}" var="user" styleClass="table table-condensed table-hover table-bordered" rows="3">  
                 <apex:column headerValue="Name">  
                   <apex:outputLink value="/{!user.Id}">{!user.Name}</apex:outputLink>  
                 </apex:column>  
                 <apex:column value="{!user.UserRole.Name}" headerValue="Role"/>
                 <apex:column value="{!user.Profile.Name}" headerValue="Profile"/>  
               </apex:dataTable>
               <apex:outputPanel rendered="{!Users.empty}">  
                   <div class="alert alert-warning" style="text-align:center">  
                     <span class="glyphicon glyphicon-exclamation-sign"></span> No records to display  
                   </div>
               </apex:outputPanel>  
             </div>  
           </div>   
        </div>
</apex:page>

VSDashBoard_Con.cls

public without sharing class VSDashBoard_Con {

   public ConnectApi.FeedItemPage feedItemPage{get;set;}
   public Object TextSegmentType{get{
        return ConnectApi.MessageSegmentType.Text;
   }}
   public Object MentionSegmentType{get{
        return ConnectApi.MessageSegmentType.Mention;
   }}
   public Object FieldChangeSegmentType{get{
        return ConnectApi.MessageSegmentType.FieldChange;
    }}  
   public Object MoreChangesSegmentType{get{
        return ConnectApi.MessageSegmentType.MoreChanges;
   }}
   public Object LinkSegmentType{get{
        return ConnectApi.MessageSegmentType.Link;
   }}
   public Object EntityLinkSegmentType{get{
        return ConnectApi.MessageSegmentType.EntityLink;
   }}
   public Object HashtagSegmentType{get{
        return ConnectApi.MessageSegmentType.Hashtag;
   }}
   public VSDashBoard_Con(){
     //code to get chatter newsfeed
     feedItemPage = ConnectApi.ChatterFeeds.getFeedItemsFromFeed(null, ConnectApi.FeedType.News, 'me');
   }
   public List<Task> getTasks(){  
     return [SELECT Id,Subject,Status, ActivityDate FROM Task WHERE ActivityDate = TODAY AND Status != 'Completed' AND Status != 'Deferred'];  
   }  
   public List<Case> getCases(){  
     return [SELECT Id,CaseNumber,Status,Subject, Priority FROM Case WHERE OwnerId=:UserInfo.getUserId() AND isClosed = FALSE];  
   }  
   public List<Lead> getLeads(){  
     return [SELECT Id,Name,Status, CreatedDate FROM Lead WHERE OwnerId=:UserInfo.getUserId() AND IsUnreadByOwner = true];  
   }  
   public List<Account> getAccounts(){  
     return [SELECT Id,Name,BillingState,Type FROM Account ORDER BY LastViewedDate DESC limit 5 ];  
   }  
   public List<Contact> getContacts(){  
     return [SELECT Id,Name,Phone, Department FROM Contact ORDER BY LastViewedDate DESC limit 5 ];  
   }
   public List<User> getUsers(){
     return [SELECT Id,Name,UserRole.Name,Profile.Name FROM User ORDER BY LastViewedDate DESC limit 5];
   }
 }