I would like to center these two images side by side, but in small screen the bottom one is very close together of the image from above
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><html><head><!--LatestcompiledandminifiedCSS--><metacharset="utf-8">
<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>
<style>
/*This stylesheet sets the width of all images to 100%: */
img {
width:100%;
}
</style>
</head>
<body>
</br>
</br>
<div align="center" class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"> <p>Moodle</p> <a href="/moodle"> <img src="http://educar.esy.es/img/if_Quiz-Games_190314.png"alt="Moodle" style="width:128px;height:128px;"></a> </div>
<div class="col-md-3"> <p>Relatórios</p> <a href="/moodle"> <img src="http://educar.esy.es/img/if_report_56294.png"alt="Relatórios" style="width:128px;height:128px;"></a> </div>
<div class="col-md-3"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script><scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>