Bootstrap Snippet Swipe boxes using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="boxes">
  <a href="" class="box">
    <div class="indicator-t"></div>
    <div class="indicator-r"></div>
    <div class="indicator-b"></div>
    <div class="indicator-l"></div>
    <figure class="single">
      <img src="https://github.com/tochman/agileventures-profile/blob/master/small_avatar.png?raw=true" alt="" />
      <figcaption class="caption">
        <h3>Simple</h3>
      </figcaption>
    </figure>
  </a>
  
   <a href="" class="box">
    <div class="indicator-t"></div>
    <div class="indicator-r"></div>
    <div class="indicator-b"></div>
    <div class="indicator-l"></div>
    <figure class="single">
      <img src="https://github.com/tochman/agileventures-profile/blob/master/small_avatar.png?raw=true" alt="" />
      <figcaption class="caption">
        <h3>Avant Garde Gothic</h3>
      </figcaption>
    </figure>
  </a>
  
    <a href="" class="box">
    <div class="indicator-t"></div>
    <div class="indicator-r"></div>
    <div class="indicator-b"></div>
    <div class="indicator-l"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300italic);
*, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
body {
  background:#58585A;
  background: -moz-radial-gradient(center, ellipse cover,  #333333 0%, #0d0d0d 100%);
  background: -webkit-radial-gradient(center, ellipse cover,  #333333 0%,#0d0d0d 100%);
  background: -o-radial-gradient(center, ellipse cover,  #333333 0%,#0d0d0d 100%);
  background: -ms-radial-gradient(center, ellipse cover,  #333333 0%,#0d0d0d 100%);
  background: radial-gradient(ellipse at center,  #333333 0%,#0d0d0d 100%);
  background:radial-gradient(#333, #0d0d0d);
}
html, body {
  width:100%;
  height:100%;
  font-family: 'Merriweather Sans', sans-serif;
  color:#141414;
}
a {color:#141414;text-decoration:none;}
.boxes {
  position:relative;
  width:100%;
  max-width:65rem;
  margin: 2rem auto 0 auto;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-flow: row wrap;
  justify-content: center;
}
.box {
  position:relative;
  float:left;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Swipe boxes"
Bootstrap 3.0.3 Snippet by tochman

Related: See More

Questions / Comments:

"Swipe boxes" Bootstrap 3.0.3 Snippet by tochman

Related: See More

Questions / Comments:

"Swipe boxes"
Bootstrap 3.0.3 Snippet by tochman