<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Submitted to feature Feb 28, 2014 --> <!-- Images Credits: https://www.iconfinder.com/icons/44703/audio_speakers_icon https://www.iconfinder.com/icons/71615/tv_icon --> <div class="container"> <div class="row"> <h2>Mr.M.'s media control buttons</h2> <div class="col-md-6 col-md-offset-3"> <div class="tcenter"> <img src="https://cdn1.iconfinder.com/data/icons/IMPRESSIONS/multimedia/png/128/audio_speakers.png" alt=""> <img src="https://cdn1.iconfinder.com/data/icons/MediaPack_ICON/256/TV.png" alt="">   <img src="https://cdn1.iconfinder.com/data/icons/IMPRESSIONS/multimedia/png/128/audio_speakers.png" alt=""> </div> <!-- /.tcenter --> <div class="tcenter"> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-fast-backward"></i></a> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-backward"></i></a> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-stop"></i></a> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-play"></i></a> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-pause"></i></a> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-forward"></i></a> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-fast-forward"></i></a> </div> <!-- /.tcenter --> <div class="tcenter"> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-volume-down"></i></a> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-volume-up"></i></a> <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-volume-off"></i></a> <hr> <a href="http://validator.w3.org/check?uri=http://bootsnipp.com/iframe/V1WP"> <span class="glyphicon glyphicon-check green"></span> HTML⁵</a> </div> <!-- /.tcenter --> </div> <!-- /.col-mid --> </div> <!-- /.row --> </div> <!-- /.container -->

.tcenter{ padding: 10px; text-align:center; } /* for validator */ a:link { text-decoration:none; } .green, .green a { color: #339900; }