"Team List"
Bootstrap 3.3.0 Snippet by levimoore

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand" src="https://picsum.photos/30"> <a class="navbar-brand" href="#">Brand</a> </a> </div> </div> </nav><div class="container"> <h1 class="times">Teams</h1> <div class="row center-block"> <div class="col-md-6"> <div class='conference-header'> <img class="conferecne-logo" src='https://picsum.photos/25'/> <h2 class='times'>NFC</h2> </div> <div class='team-box'> <div class="media"> <div class="media-left media-middle"> <img class="media-object" src='https://picsum.photos/81/81/?random'/> </div> <div class="media-body"> <h5 class="media-heading pull-right">Won: 3</h5> <h4 class="media-heading">Carolina Panthers</h4> <div class="team-box-info"> <p>AFC South</p> <p>Record: W0 – L0</p> <p>Pct: .500</p> </div> <div class="team-box-info"> <p> </p> </div> <div class="team-box-info"> <p></p> </div> <div class="team-box-info"> <p>Next Game: Monday August 27th vs. San Francisco </p> </div> </div> </div> </div> <div class='team-box'> <div class="media"> <div class="media-left media-middle"> <img class="media-object" src='https://picsum.photos/81/81/?random'/> </div> <div class="media-body"> <h5 class="media-heading pull-right">Won: 3</h5> <h4 class="media-heading">Carolina Panthers</h4> <div class="team-box-info"> <p>AFC South</p> <p>Record: W0 – L0</p> <p>Pct: .500</p> </div> <div class="team-box-info"> <p> </p> </div> <div class="team-box-info"> <p></p> </div> <div class="team-box-info"> <p>Next Game: Monday August 27th vs. San Francisco </p> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class='conference-header'> <img class="conferecne-logo" src='https://picsum.photos/25'/> <h2 class='times'>AFC</h2> </div> <div class='team-box'> <div class="media"> <div class="media-left media-middle"> <img class="media-object" src='https://picsum.photos/81/81/?random'/> </div> <div class="media-body"> <h5 class="media-heading pull-right">Won: 3</h5> <h4 class="media-heading">Carolina Panthers</h4> <div class="team-box-info"> <p>AFC South</p> <p>Record: W0 – L0</p> <p>Pct: .500</p> </div> <div class="team-box-info"> <p> </p> </div> <div class="team-box-info"> <p></p> </div> <div class="team-box-info"> <p>Next Game: Monday August 27th vs. San Francisco </p> </div> </div> </div> </div> <div class='team-box'> <div class="media"> <div class="media-left media-middle"> <img class="media-object" src='https://picsum.photos/81/81/?random'/> </div> <div class="media-body"> <h5 class="media-heading pull-right">Won: 3</h5> <h4 class="media-heading">Carolina Panthers</h4> <div class="team-box-info"> <p>AFC South</p> <p>Record: W0 – L0</p> <p>Pct: .500</p> </div> <div class="team-box-info"> <p> </p> </div> <div class="team-box-info"> <p></p> </div> <div class="team-box-info"> <p>Next Game: Monday August 27th vs. San Francisco </p> </div> </div> </div> </div> </div>
.times{ font-family: Open Sans; font-weight: 900; color: #034803; } .team-box{ width: 100%; /*height: 150px;*/ background-color: #f1f1f1; border-radius: 5px; margin-bottom: 10px; } /*.team-box .media-heading{*/ /* color: #034803;*/ /*}*/ .team-box img{ /*border-radius: 50%;*/ padding: 15px; } .team-box .media-heading{ padding-top: 15px; } .team-box-info{ width: 350px; display: flex; flex-direction: row; justify-content: space-between; } .team-box-info p{ margin-bottom: 5px; font-family: Trebuchet MS; } .conference-header{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .conferecne-logo{ display: flex; width:10%; height: 10%; margin-right: 20px; }

Related: See More


Questions / Comments: