<div id="search">
                            <div class="input-group col-md-12">
                            <input type="text" id = "userText" class="form-control input-lg" placeholder="Search" />
                            <span class="input-group-btn">
                          <button class="btn btn-info btn-lg" id = "initSearch" type="button">
                              <i class="glyphicon glyphicon-search"></i>
                        </button>
 </span>
 </div>
 </div>
<div class= "text-center">
 <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><button id = "random" class = "btn btn-lg">Random Article</button></a>

<p id = "result"></p>

  <div class = "row">
    <a id= "a1">
  <button class = "btn-lg col-md-12" id=  "res1">
    <h4 id =  "title1"></h4>
    <p id = "p1"></p>
    </button>
    </a>
    <a id = "a2">
  <button class = "btn-lg col-md-12" id = "res2" >
          <h4 id =  "title2"></h4>
          <p id = "p2"></p>
          </button>
    </a>
    <a id = "a3">
  <button class = "btn-lg col-md-12" id = "res3">
    <h4 id =  "title3"></h4>
    <p id = "p3"></p>
</button>
    </a>

    <a id = "a4">
  <button class = "btn-lg col-md-12" id = "res4">
    <h4 id =  "title4"></h4>
    <p id = "p4"></p>
</button>
    </a>

    <a id = "a5">
  <button class = "btn-lg col-md-12" id = "res5">
    <h4 id =  "title5"></h4>
    <p id = "p5"></p>
</button>
    </a>

    <a id = "a6">
  <button class = "btn-lg col-md-12" id = "res6">
    <h4 id =  "title6"></h4>
    <p id = "p6"></p>
</button>
    </a>

    <a id = "a7">
  <button class = "btn-lg col-md-12" id = "res7">
    <h4 id =  "title7"></h4>
    <p id = "p7"></p>
</button>
    </a>

    <a id = "a8">
  <button class = "btn-lg col-md-12" id = "res8">
    <h4 id =  "title8"></h4>
    <p id = "p8"></p>
</button>
    </a>

    <a id = "a9">
  <button class = "btn-lg col-md-12" id = "res9">
    <h4 id =  "title9"></h4>
    <p id = "p9"></p>
</button>
    </a>

  </div>
</div>