Bootstrap Snippet Cards horizontal as links using HTML CSS Bootstrap

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="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-sm-3 ">
          <div class="wrimagecard wrimagecard-topimage">
              <a href="#">
              <div class="wrimagecard-topimage_header" style="background-color: rgba(119, 178, 88, 0.1)">
                <center><img src="http://www.serpro.gov.br/++resource++serpro.portalserprotema/img/logo-serpro.png" class="img-responsive"></img> </center>
              </div>
              <div class="wrimagecard-topimage_title">
                <h4>Serpro
                <div class="pull-right badge" id="WrControls"></div></h4>
              </div>
            </a>
          </div>
    </div>
        <div class="col-md-2 col-sm-3">
          <div class="wrimagecard wrimagecard-topimage">
              <a href="#">
              <div class="wrimagecard-topimage_header" style="background-color: rgba(119, 178, 88, 0.1)">
                <center><img src="http://www.correios.com.br/++theme++correios.site.tema/images/logo_correios.png" class="img-responsive"></img> </center>
              </div>
              <div class="wrimagecard-topimage_title">
                <h4>Correios
                <div class="pull-right badge" id="WrControls"></div></h4>
              </div>
            </a>
          </div>
    </div>
        <div class="col-md-2 col-sm-3">
          <div class="wrimagecard wrimagecard-topimage">
              <a href="#">
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
.wrimagecard{   
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: left;
    position: relative;
    background: #fff;
    box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
    border-radius: 4px;
    transition: all 0.3s ease;
}
.wrimagecard .fa{
    position: relative;
    font-size: 70px;
}
.wrimagecard-topimage_header{
padding: 20px;
}
.wrimagecard-topimage_header img {
width: 10rem;
height: 5rem;
}
a.wrimagecard:hover, .wrimagecard-topimage:hover {
    box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
}
.wrimagecard-topimage a {
    width: 100%;
    height: 100%;
    display: block;
}
.wrimagecard-topimage_title {
    padding: 20px 24px;
    height: 80px;
    padding-bottom: 0.75rem;
    position: relative;
}
.wrimagecard-topimage a {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Cards horizontal as links"
Bootstrap 4.0.0 Snippet by olivierlabbe

Related: See More

Questions / Comments:

"Cards horizontal as links" Bootstrap 4.0.0 Snippet by olivierlabbe

Related: See More

Questions / Comments:

"Cards horizontal as links"
Bootstrap 4.0.0 Snippet by olivierlabbe