<br>
Detail page

<h1 class="header">Dialog</h1>

<h2>Simple Dialog</h2>
<button class="btn btn-primary" data-toggle="modal" data-target="#simple-dialog">Open dialog</button>

<h2>Dialog with header and footer</h2>
<button class="btn btn-primary" data-toggle="modal" data-target="#complete-dialog">Open dialog</button>

<div id="simple-dialog" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>E dolore commodo, id anim aute sint cupidatat eu est anim tamen ad possumus,
          legam officia firmissimum. Eram deserunt domesticarum, iis ita praetermissum,
          nam aliquip quo probant, incididunt et occaecat an nam enim exquisitaque a
          nescius velit admodum, non ad cohaerescant, probant o nulla tempor. Aute aut te
          quis arbitror ubi ne aliqua consequat aliquip. Ad sunt laborum senserit, de do
          quem possumus. Sint tractavissent cupidatat aute possumus ita elit ad cupidatat.
          Arbitror ab fabulas o eu e veniam pariatur. Non voluptate comprehenderit ad nisi
          id voluptate. Quis distinguantur quibusdam quae mentitum o si minim illum nisi
          mandaremus.</p>
      </div>
    </div>
  </div>
</div>

<div id="complete-dialog" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Dialog</h4>
      </div>
      <div class="modal-body">
        <p>Fore aut non quem incididunt, varias reprehenderit deserunt quem offendit,
          cillum proident ne reprehenderit, quem ad laborum, quo possumus praetermissum,
          si ne illustriora, hic appellat coniunctione, do labore aliqua quo probant. In
          probant voluptatibus quo mentitum est laboris. Quorum mandaremus graviterque.
          Mentitum id velit, dolor aut litteris, ea varias illustriora, ita commodo ita
          ingeniis, iis nulla appellat incurreret, aut irure amet summis pariatur ita ubi
          quis dolore veniam proident, consequat sed ingeniis.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Dismiss</button>
      </div>
    </div>
  </div>
</div>
<style>
  #dialog h2 {
    padding: 14px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
  }
</style>
Test of the material design theme
Test of the material design theme
