Making whole "col-*" a link

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><a href="adduser.php">User Add</a></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><a href="edituser.php">User Edit</a></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><a href="deleteuser.php">User Delete</a></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