JSFiddle - React, Tailwind, and code Playground
by mavent
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<p>Some content here..</p>
<div id="myBox2" class="text-center">
<a href="http://yahoo.com" class="1fillthediv">
<div class="col-md-offset-3 col-md-6 col-xs-12">
<div class="alert alert-success">
<h6><i class="glyphicon glyphicon-home"></i> Click me
</h6>
</div>
</div>
</a>
</div>
<div id="myBox1" class="text-center 1feature">
<div class="col-md-offset-3 col-md-6 col-xs-12">
<div class="alert alert-success">
<h6>
<a href="http://yahoo.com" class="1fillthediv"><i class="glyphicon glyphicon-home"></i> Click me</a>
</h6>
</div>
</div>
</div>
<p>Some other content here..</p>
CSS
.nounderline_imp {
text-decoration: none !important;
}
a.fillthediv {
display:block;
height:100%;
width:100%;
text-decoration: none;
}
div.feature {
position: relative;
}
div.feature div div a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
/* No underlines on the link */
z-index: 10;
/* Places the link above everything else in the div */
background-color: #FFF;
/* Fix to make div clickable in IE */
opacity: 0;
/* Fix to make div clickable in IE */
filter: alpha(opacity=1);
/* Fix to make div clickable in IE */
}