document.html

<div class="container">

<div class="row tags" style="margin-top: 10px; margin-bottom: 10px;">
  tag1,&nbsp;tag2
</div>
<div class="row">
  <h4>Title</h4>
</div>
<div class="row">
  <div class="col-9">
    <img src="http://via.placeholder.com/350x150" style="width:99%" alt="">
  </div>
  <div class="col-3">
    <button type="button" class="btn btn-outline-secondary" style="text-align: left; display: block; width: 60%;">View Full Image</button>
    <button type="button" class="btn btn-outline-secondary" style="text-align: left; display: block; width: 60%;">Cite It</button>
    <button type="button" class="btn btn-outline-secondary" style="text-align: left; display: block; width: 60%;">Download</button>
    <button type="button" class="btn btn-outline-secondary" style="text-align: left; display: block; width: 60%;" ng-click="gotosignin()">Bookmark It</button>
  </div>
</div>

<div class="doc-descr">
  <h5>About this document</h5>
</div>
<div class="doc-descr">
  <div><b>Creator</b></div>
  <div>Architect</div>
</div>
<div class="doc-descr">
  <div><b>Created/Published</b></div>
  <div>Year</div>
</div>
<div class="doc-descr">
  <div><b>Description</b></div>
  <div>some asdfasfda description</div>
</div>
<br />
<div class="row">
  <h5>Related Documents</h5>
</div>
<div class="col-6">
  <div class="row">
    <div class="col"><a href="#/"><img src="http://via.placeholder.com/350x150" alt=""></a></div>
  </div>
  <div class="row">
    <div class="col">
        <h5><a href="#/">Related Document Title</a></h5>
    </div>

  </div>
</div>
</div>