How to create clickable row in table using Bootstrap?

Why don't you simply attach an onclick event like this:

<table class="table table-striped">
      <tr onclick="window.location.href = 'url';">>
        <td><strong>FirstName</strong></td>
        <td><strong>LastName</strong></td>
        <td><strong>Start</strong></td>
        <td><strong>End</strong></td>
      </tr>
      <tr onclick="window.location.href = 'url';">
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>                            
      </a></tr>
</table>

Note: I would recommend you to use jQuery as bootstrap also uses jQuery.

Don't put anchor in nested tr. It's not a proper use. Instead, use the

onclick="getElementById('edit-1').click()" 

and add

style="cursor: pointer"

<table class="table table-hover">
 <tr>
    <td><strong>FirstName</strong></td>
    <td><strong>LastName</strong></td>
    <td><strong>Start</strong></td>
    <td><strong>End</strong></td>
  </tr>
  <tr onclick="getElementById('edit-1').click()" style="cursor: pointer">
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
    <td><a href="url-here" id="edit-1">dddd</a></td>                            
  </tr>

Also you can add a function all tr same time;

 $("tr").click(function(){
     // your click time codes...
 });

table-hover class only add to rows color change property. not click function definition!

So you want to be able to navigate to another page. If you are planning to go to another page as you said in the comments, you might want to use location.href = url. the first solution will work if you click on any row.

 <table class="table table-hover">
      <tr>
        <td><strong>FirstName</strong></td>
        <td><strong>LastName</strong></td>
        <td><strong>Start</strong></td>
        <td><strong>End</strong></td>
      </tr>
      <tr><a>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>                            
      </a></tr>
</table>

$("row").click(function(){
    //to navigate to another page
    location.href = 'user/student';//the other page's url
 });

Another way to implement this is by using the onclick in the specific row. This solution will work if you click on the specific row that has the onclick.

<table class="table table-hover">
          <tr onclick="location.href='user/student';">
            <td><strong>FirstName</strong></td>
            <td><strong>LastName</strong></td>
            <td><strong>Start</strong></td>
            <td><strong>End</strong></td>
          </tr>
          <tr><a>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td>ddd</td>                            
          </a></tr>
    </table>

Another way is to give an id to the row and use js or jquery to select that id and navigate to the page you want like below:

 <table class="table table-hover">
          <tr id="row1">
            <td><strong>FirstName</strong></td>
            <td><strong>LastName</strong></td>
            <td><strong>Start</strong></td>
            <td><strong>End</strong></td>
          </tr>
          <tr><a>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td>ddd</td>                            
          </a></tr>
    </table>
    //now you can use this to navigate

$('#row1').on('click', function(){
     window.location = "user/student";    
});

I had the same problem.
I solved so:

1 - put ID in your table:

"tbListaFiadores"

2 - configure your table with :

clickToSelect: true,

3 - get click event :

$('#tbListaFiadores').on('click-row.bs.table', function (e, row, $element) {
console.log("onClickRow normal");
});

The cleanest way I see is to use jasny bootstrap component

1. Import the .js file into your project

2. Put on tbody:

    <tbody data-link="row" class="rowlink hand-cursor">
   

3. Put an a element on first td element

    <a href="#path"> path </a> 
   

4. Now the link is already working. To make it rich use this css file and its classes:

CSS

.hand-cursor { 
cursor: pointer; 
cursor: hand; 
}

.table-hoverplus>tbody>tr:hover>td {
 background-color: #eeeeee;
}