Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Imgur</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Vue.js CDN -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left">Visit Switzerland</h1>
<div class="row text-center text-lg-left"></div>
<div id="app" class="col-lg-4 col-sm-6">
<a v-for="item in items" v-bind:href="item.url" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" v-bind:src="item.img" alt="">
</a>
</div>
</div>
<!-- /.container -->
<!-- Bootstrap core Javascript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
JavaScript
const app = new Vue({
el: '#app',
data: {
items: []
},
created: function() {
fetch('https://api.jsonbin.io/b/5b02b2bbc83f6d4cc7349a7b')
.then(resp => resp.json())
.then(items => {
this.items = items.reverse()
})
}
});