How do i make entire bootstrap panel as hyperlink

Question

am using twitter bootstrap's panel component. i have below code

<div class="panel panel-info">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-6">
                        <i class="fa fa-comments fa-5x"></i>
                    </div>
                    <div class="col-xs-6 text-right">
                        <p class="announcement-text">My queue</p>
                    </div>
                </div>
            </div>
        </div>

how do i make the entire panel as hyperlink. like i should be able to click on any part of the panel and it should navigate to a different page.

Online examples show making the footer as hyperlink, but i thought it would be better if i can make the entire panel a hyperlink.

i don't want to use metro.js.

Thanks.

Answer 1

Just wrap the whole panel in an anchor tag.

 <a href="link.com">    
  <div class="panel panel-info">
    <div class="panel-heading">
      <div class="row">
        <div class="col-xs-6">
          <i class="fa fa-comments fa-5x"></i>
        </div>
        <div class="col-xs-6 text-right">
          <p class="announcement-text">My queue</p>
        </div>
      </div>
    </div>
  </div>
</a>