Customizing your Twitter Feed

Customizing your Twitter Feed

by Glynne Turner

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="row">
   <div class="col-md-4"></div>
   <div class="container">
      <div class="col-md-4">
         <div class="panel panel-danger">
            <div class="panel-heading">
               <h3 class="panel-title"><i class="fa fa-twitter-square" aria-hidden="true"></i>
                  Twitter Feed
               </h3>
            </div>
            <div class="panel-body">
               <a class="twitter-timeline" data-width="100%" href="https://twitter.com/soho_staff">Tweets by solodev</a> 
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-4">
   </div>
</div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

CSS

.twitter-timeline {
  max-width: 100%;
  max-height: 1000px;
}
.fa {
  font-size: 25px;
  color: #FFFFFF;
}
.panel-title {
 font-size: 25px; 
 color: #FFFFFF;
 font-family: 'Open Sans', sans-serif;
}
.panel-heading {
 background-color: #1da1f2 !important;
 color: #1da1f2 !important;
}
.panel {
 margin-top: 25px;
}