index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Gif Tastic</title>
    <!--bootstrapCss-->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <!--customCss-->
    <link rel="stylesheet" href="./assets/css/style.css">
  </head>
  <body>
    <!--mainContainer-->
    <div class="container border" id="mainContainer">
      <!--ButtonsRow-->
      <div class="row border" id="buttonsRow">
      </div>
      <!--contentRow-->
      <div class="row border" id="contentRow">
        <!--gifsColumn-->
        <div class="col-md-6 border" id="gifsColumn">
          <div class="row" id="gifsRow">

          </div>
        </div>
        <!--searchFormColumn-->
        <div class="col-md-6 border" id="searchFormColumn">
          <div class="row" id="searchRow">
            <form id="gifForm">
              <div class="form-group">
                <label for="keyword">Enter Keyword or Phrase</label>
                <input type="text" class="form-control" name="keyword" id="keyword" placeholder="Da Gifs">
              </div>
              <button type="button" class="btn btn-default" id="addToButtons" name="addToButtons">Add To Buttons</button>
              <button type="button" class="btn btn-default" id="clearGifs" name="clearGifs">Clear</button>
            </form>
          </div>
        </div>
      </div>
    </div>


    <!--jQuery-->
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <!--bootstrap-->
    <script type="text/javascript" src="./assets/javascript/bootstrap.min.js"></script>
    <!--customJs-->
    <script type="text/javascript" src="./assets/javascript/script.js"></script>
  </body>
</html>