Bootstrap 3 Hyperlink does not work cause of grid system
css, html, hyperlink, twitter-bootstrap
Solution
That is because your 2 last `col-xs-12` are positioned above/on top of your link `<a>` due to the fact all cols should add up to 12, and should not exceed this.
If you want a new row of 12 cols, you should place a new `<div class="row">`
<td>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6"><a target="_blank" href="http://stackoverflow.com">col-md-6 - This Hyperlink should work, but it doesn't!</a></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
<div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
<div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-xs-12">col-xs-12</div>
</div>
<div class="row">
<div class="col-xs-12">col-xs-12</div>
</div>
</td>
check this screenshot when col-xs-12 is on top
If your view is smaller, those cols are moving down, screenshot here
Problem
I am using bootstrap 3.0.2 and i am a little bit confused cause of the grid system. I think i understand the grid system, but i'm not sure if this is a bug in bootstrap or if i am using it in the wrong way. Here is my code: ``` <table class="table table-striped"> <tr> <td> <!-- if medium or large, then print this in one line --> <div class="col-xs-12 col-sm-6 col-md-6"><a href="pseudo-link">text</a></div> <div class="col-xs-12 col-sm-6 col-md-3">any text</div> <div class="col-xs-4 col-sm-4 col-md-1">info1</div> <div class="col-xs-4 col-sm-4 col-md-1">info2</div> <div class="col-xs-4 col-sm-4 col-md-1">info3</div> <!-- end of first line if medium or large --> <div class="col-xs-12">text1 whole line</div><!-- Always one line --> <div class="col-xs-12">text2 whole line</div><!-- Always one line --> </td> </tr> ... </table> ``` The problem here is the hyperlink - the browser does not handle it like a hyperlink, when screen width has the size large(col-lg), medium(col-md) or small(col-sm). But the hyperlink works fine, if screen width is extra small(col-xs). I've analyzed this with Firebug and it seems, that the first two lines are put together, like one div (except screen width extra small). With a little trick i can fix this, but it's just a dirty hack. If the screen width is greater than extra small, i don't give the second line the complete space: ``` <div class="col-xs-12 col-sm-11">text1 whole line</div><!-- Always one line --> ``` Now it works as expected but i think it should work without this trick, too. Is my code wrong? For clarification i have written an example: hyperlink_issue