Making whole "col-*" a link - html

Question

Here's my HTML:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>">
<p>User Add</p>
</div>
<div class="col-sm-3">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-edit.png'; ?>">
<p>User Edit</p>
</div>
<div class="col-sm-3">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-delete.png'; ?>">
<p>User Delete</p>
</div>
</div>
</div>
I'm looking to make the HTML like this:
<a href="#">
<div class="col-sm-3">
....
</div>
</a>
Where when the whole column is a link and when hovered over it changes opacity and is able to redirect to another page. However when i change my HTML my style sheet gets super messed up, and the alignment goes all haywire. (See second Code Pen)
https://codepen.io/JDSWebService/pen/BZpoaq
This is how I want it to look when all is said in done. Three evenly spaced column's with the correct widths.
Heres the Codepen of the issues i'm running into when i change my HTML code
https://codepen.io/JDSWebService/pen/bRgVVz
Help?

Answer 1

You can add 'onclick' instead of messing around with tag since that will screw up the bootstrap's col settings.
For example, <div class="col-sm-3" onclick="location.href='add.user.php';">
Please check out this Codepen. I was not able to test your links, but please let me know if this is what you are looking for.
https://codepen.io/pkshreeman/pen/awpvGy

Answer 2

You can put the a tag inside the col-3 and put all the rest of the content in it. Display the a tag as block, then move the padding code that is on the col-3 to the a tag. You can also move the background and border radius to be on the a tag as well. The col-3 should just be that, columns.
.row {
display: flex;
justify-content: center;
}
.col-sm-3 {
text-align: center;
margin: 0 2.5%;
}
.col-sm-3:hover {
opacity: 0.9;
}
.col-sm-3 a {
font-size: 1.5em;
color: white;
display:block;
padding: 2.5% 25px;
background: #303030;
border-radius: 25px;
}
.col-sm-3 a:hover {
text-decoration: none;
color: #00bc8c;
}
.img-sm {
width: 100px;
height: 100px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3"><a href="adduser.php">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>">
<p>User Add</p></a>
</div>
<div class="col-sm-3"><a href="edituser.php">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-edit.png'; ?>">
<p>User Edit</p></a>
</div>
<div class="col-sm-3"><a href="deleteuser.php">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-delete.png'; ?>">
<p>User Delete</p></a>
</div>
</div>
</div>

Answer 3

I havn't tried this out but I'm pretty sure that one way is to give your link a class like:
<div class="container">
<div class="row">
<a href="adduser.php" class="link">
<div class="col-sm-3">
<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>">
<p>User Add</p>
</div>
</a>
and then something like:
.link {
height: 100%;
width: 100%
}
of course from there you can give the .link whatever properties you like. Might not be the best solution, but it is one solution I believe.

Answer 4

This can be easily done with jquery
give class name other than col-sm-3 for each div
make firstcol or col-sm-3 for all cursor: pointer;
$(".firstcol").click(function(){
window.location = "URL";
});