index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="animato.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>

<div class="container-fluid"> 

<div class="col-md-3">
<div class="card text-center">
	<img src="index.jpeg" class="animated bounce card-img-top" id="#bounce" >
	<h4 class="card-title" >Bounce</h4>
</div>
</div>

<div class="col-md-3">
<div class="card text-center">
	<img src="index.jpeg" class="animated flash card-img-top">
	<h4 class="card-title" >Flash</h4>
</div>
</div>

<div class="col-md-3">
<div class="card text-center">
	<img src="index.jpeg" class="animated shake card-img-top">
	<h4 class="card-title" >Shake</h4>
</div>
</div>

<div class="col-md-3">
<div class="card text-center">
	<img src="index.jpeg" class="animated swing card-img-top">
	<h4 class="card-title" >Swing</h4>
</div>
</div>

<div class="col-md-3">
<div class="card text-center">
	<img src="index.jpeg" class="animated flip card-img-top">
	<h4 class="card-title" >Swing</h4>
</div>
</div>


</div>
</body>
</html>