BOOTSTRAP col problem

by he4rtbr0ken

HTML

<title>
  Index.html mountain biking</title>



<!-- CSS -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">




<style>


</style>


<!--JS-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="res/JS/bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script>


</script>


</head>

<body>
  <!-- top nav bar-->
  <div class="navbar navbar-inverse">
    <div class="container">

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="index.html"><span class="glyphicon glyphicon-home"></span>Home</a></li>

          <li class="active"><a href="disciplines.html"><span class = "glyphicon glyphicon-info-sign"></span>Disciplines</a></li>

          <li><a href="science.html"><span class = "glyphicon glyphicon-warning-sign"></span> Science</li></a>

            <li><a href="gallery.html"><span class = "glyphicon glyphicon-picture"></span>Gallery</li></a>

              <li><a href="interactive.html"><span class="glyphicon...

CSS

/*load external font.s*/

@font-face {
  font-family: "BabasNeue";
  src: url(../fonts/BebasNeue.otf);
  url(../fonts/BebasNeue.otf);
}

* {
  /*selects all elements http://www.w3schools.com/cssref/css_selectors.asp*/
}

body {
  background-color: black;
}

p {
  font-family: calibri, arial, helvetica;
  color: gray;
}

a {
  text-decoration: none;
  color: gray;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: calibri, arial, helvetica;
}

.navbar {
  font-size: 16px;
  letter-spacing: 2px;
  font-family: BabasNeue, Calibri, Arial, helvetica;
  text-align: right;
}

.jumbotron {
  background-color: #262626;
  color: gray;
  padding: 10px;
}

.col-sm-6,
.col-md-4 {
  margin-bottom: 20px;
}

h4 {
  font-family: BabasNeue, Calibri, Arial, helvetica;
}

JavaScript

$().ready(function() {

  var maxHeight = 0;

  $('.col-sm-6').each(function() {
    maxHeight = maxHeight > $('.col-sm-6').height() ? maxHeight : $('.col-sm-6').height();
  });

  $('.col-sm-6').each(function() {
    $('.col-sm-6').height(maxHeight);
  });


  console.log(maxHeight)
  console.log("loaded")
})