Bootstrap certain buttons are not working - html

Question

When hovering my social buttons the hyperlink appears and the link can be launched by right clicking and choosing an option, but not on a single click. They were built differently in html to help my troubleshooting but I can't get either of them to send me to the respective social pages. They are located in the 4 wide column in the social row. I went a little crazy nesting columns to keep everything centered. Any help is appreciated.
test site can be found here: http://www.tedrmoke.com/cjs
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Sawmill</li>
<li>Purchase</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Jumbotron -->
<div class="row text-center jumbo">
<h1>Hello! We are <br/><span>CJ Sawmill & Lumber</span></h1>
<h3>We specialize in coming to you and cutting your lumber in the central NJ area. We also have a selection of quality cured cuts available for purchase.</h3>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 social">
<div class="col-sm-8">
<div class="collapse-group"> Contact Us.
<form class="collapse" name="contactform" method="post" action="http://www.cjsawmill-lumber.com/send_form_email.php">
<table class"col-lg-12 text-left" >
...
</table>
</form>
</div>
</div> <!-- row -->
<div class="col-sm-4">
<div class="btn btn-default twi_btn"></div>
<a class="btn btn-default fb_btn" href="http://www.facebook.com/cjsawmill"></a>
</div>
</div> <!-- col-6 button row -->
<div class="col-xs-2"></div>
</div> <!-- button row -->
</div>
</div> <!-- container -->
</div> <!-- end jumbotron -->

Answer 1

That's because in your javascript :
// JavaScript Document
$('.row .btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle');
});
, you are preventing the default event whenever an element with class btn is clicked inside an element of class row.
Notice in your HTML, that both your hyperlinks and divs for facebook and twitter respectively are of the class btn due to which, whenever they are clicked, the default event (that is redirecting to their href) is prevented which is why the links dont work on a single click, but they do work on right click, since the right click only uses the href attribute to redirect you to the new link.
Try removing the e.preventDefault(); from being applied to your hyperlinks or divs inside hyperlinks and then the social buttons should work just fine on a single left click as well.

Answer 2

Your Javascript says
$('.row .btn').on('click', function(e) {
e.preventDefault();
# . . .
});
So I would target that to just the specific 'Contact Us' button, not all butons.

Answer 3

Bootstrap can be restrictive in a way that won't let you wrap your button in an a tag. Like you could in regular html. Here is a solution that I used to a similar issue I had, structure you a tag like this and you should still get a button that functions.Place in your class names of course.
<a class="btn btn-default glyphicon glyphicon-hand-up"></a>