Kurse
- Ausbildung
- Weiterbildung
Warenkorb
Vorlagen

anmelden

Kurse
- Ausbildung
- Weiterbildung
Warenkorb
Vorlagen

anmelden

LightBox

Home/Vorlagen/Einzelelemente/LightBox

HomePages
Einzelseiten
Module
Einzelelemente

Single Image

DEFAULT

OUR MISSION

DESIGN & CODE

Album Group

IMAGE 01

IMAGE 02

IMAGE 03

Gallery & Video

Education(3)

Video

Lightbox Example

Lightbox Example

Normal

Default Modal Title

Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.

Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.

Small

Default Modal Title

Large

Default Modal Title

Full Wide

Default Modal Title

Lightbox Example

Default Header

Default Modal Title

Primary Header

Default Modal Title

Danger Header

Default Modal Title

Success Header

Default Modal Title

Info Header

Default Modal Title

Warning Header

Default Modal Title

Custom header color

Default Modal Title

Custom Background color

Default Modal Title

Lightbox Example

Slide From Top

Default Modal Title

Fade In & Scale

Default Modal Title

Fall

Default Modal Title

Slide From Bottom

Default Modal Title

Slide From Right

Default Modal Title

Slide From Left

Default Modal Title

From Left

Default Modal Title

From Right

Default Modal Title

3D Flip Horizontal

Default Modal Title

3D Flip Vertical

Default Modal Title

3D Slit

Default Modal Title

Newspaper

Default Modal Title

Single Image

<div class="row">
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox05 img-right-rotate">
        <div class="pic"><img src="/Portals/0/pages-images/lightbox-img01.jpg"></div>
        <div class="content">
          <div class="center"><a class="LightBox_image full-link" href="/Portals/0/pages-images/imageboxes-img01.jpg" title="Default"></a> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg bg-black"> </div>
      </div>
      <h3 class="title"> DEFAULT </h3>
    </div>
  </div>
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox01">
        <div class="pic"> <img src="/Portals/0/pages-images/lightbox-img02.jpg"> </div>
        <a class="LightBox_image full-link" href="/Portals/0/pages-images/imageboxes-img02.jpg" title="Our mission"></a>
        <div class="content">
          <div class="center"> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg border-accent"> </div>
      </div>
      <h3 class="title"> OUR MISSION </h3>
    </div>
  </div>
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox10">
        <div class="pic"><img src="/Portals/0/pages-images/lightbox-img03.jpg"><a class="LightBox_image full-link" href="/Portals/0/pages-images/imageboxes-img03.jpg" title="Design & code"></a> <span class="icon fa fa-picture"></span> </div>
      </div>
      <h3 class="title"> DESIGN & CODE </h3>
    </div>
  </div>
</div>

Album Group

<div class="row">
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox05 img-right-rotate">
        <div class="pic"><img src="/Portals/0/pages-images/lightbox-img04.jpg"></div>
        <a class="LightBox_image_gallery1 full-link" href="/Portals/0/pages-images/imageboxes-img04.jpg" title="Image 01"> </a>
        <div class="content">
          <div class="center"> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg bg-black"> </div>
      </div>
      <h3 class="title">IMAGE 01</h3>
    </div>
  </div>
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox05 img-right-rotate">
        <div class="pic"><img src="/Portals/0/pages-images/lightbox-img05.jpg"></div>
        <a class="LightBox_image_gallery1 full-link" href="/Portals/0/pages-images/imageboxes-img05.jpg" title="Image 02"></a>
        <div class="content">
          <div class="center"> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg bg-black"> </div>
      </div>
      <h3 class="title">IMAGE 02</h3>
    </div>
  </div>
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox05 img-right-rotate">
        <div class="pic"><img src="/Portals/0/pages-images/lightbox-img06.jpg"></div>
        <a class="LightBox_image_gallery1 full-link" href="/Portals/0/pages-images/imageboxes-img06.jpg" title="Image 03"></a>
        <div class="content">
          <div class="center"> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg bg-black"> </div>
      </div>
      <h3 class="title">IMAGE 03</h3>
    </div>
  </div>
</div>

Gallery

<div class="lightbox-box">
  <div class="dg-imagebox05 img-right-rotate">
    <div class="pic"><img src="/Portals/0/pages-images/lightbox-img07.jpg"></div>
    <div class="LightBox_image_group"> <a class="full-link" href="/Portals/0/pages-images/imageboxes-img07.jpg" title="Image 01"> </a> <a href="/Portals/0/pages-images/imageboxes-img01.jpg" title="image 02"> </a> <a href="/Portals/0/pages-images/imageboxes-img02.jpg" title="image 03"> </a> </div>
    <div class="content ">
      <div class="center"> <span class="icon fa fa-picture"></span> </div>
    </div>
    <div class="bg bg-black"> </div>
  </div>
  <h3 class="title">Education(3)</h3>
</div>

Video

<div class="lightbox-box">
  <div class="dg-imagebox07 img-right-rotate">
    <div class="pic"><img src="/Portals/0/pages-images/lightbox-img08.jpg"></div>
    <a class="LightBox_youtube full-link" href="http://www.youtube.com/watch?v=AkcUoA2f-jU"></a>
    <div class="content">
      <div class="center"> <span class="dg-ico-max size-lg color-white"><i class="fa fa-play-circle2"></i></span> </div>
    </div>
    <div class="bg bg-black"> </div>
  </div>
  <h3 class="title">Video</h3>
</div>

Youtube Video

<a class="LightBox_youtube dg-btn-1 btn-accent radius-3px" href="http://www.youtube.com/watch?v=AkcUoA2f-jU" title="Open Youtube Video">Open Youtube Video</a>

Vimeo Vidio

<a class="LightBox_vimeo dg-btn-1 btn-accent radius-3px" href="https://vimeo.com/181538531" title="Open Vimeo Video">Open Vimeo Video</a>

Google Map

<a class="LightBox_gmaps dg-btn-1 btn-accent radius-3px" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom" title="Open Google Map">Open Google Map</a>

Normal

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-example-modal" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-example-modal" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
        <p>Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Small

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-example-modal-sm" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-example-modal-sm" role="dialog" tabindex="-1">
  <div class="modal-dialog  modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
        <p>Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Large

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-example-modal-lg" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-example-modal-lg" role="dialog" tabindex="-1">
  <div class="modal-dialog  modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
        <p>Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Full Wide

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-example-modal-xl" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-example-modal-xl" role="dialog" tabindex="-1">
  <div class="modal-dialog  modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
        <p>Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Default Header

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-header-default" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-header-default" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header ">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 btn-accent radius-3px" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Primary Header

<button class="dg-btn-1 btn-primary radius-3px size-sm" data-target="#bs-header-primary" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-header-primary" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 btn-primary radius-3px" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Danger Header

<button class="dg-btn-1 btn-danger radius-3px size-sm" data-target="#bs-header-danger" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-danger" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 btn-danger radius-3px" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Success Header

<button class="dg-btn-1 btn-success radius-3px size-sm" data-target="#bs-header-success" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-success" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-success">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 btn-success radius-3px" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Info Header

<button class="dg-btn-1 btn-info radius-3px size-sm" data-target="#bs-header-info" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-info" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-info">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-info" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Warning Header

<button class="dg-btn-1 btn-warning radius-3px size-sm" data-target="#bs-header-warning" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-warning" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-warning" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Custom header color

<button class="dg-btn-1 btn-denim radius-3px size-sm" data-target="#bs-header-denim" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-denim" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-denim">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-denim" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Custom Background color

<button class="dg-btn-1 btn-cadetblue radius-3px size-sm" data-target="#bs-bg-cadetblue" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-bg-cadetblue" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content bg-cadetblue">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-close" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Top

<a class="LightBox_youtube dg-btn-1 btn-accent radius-3px" href="http://www.youtube.com/watch?v=AkcUoA2f-jU" title="Open Youtube Video">Open Youtube Video</a>

Fade In & Scale

<a class="LightBox_vimeo dg-btn-1 btn-accent radius-3px" href="https://vimeo.com/181538531" title="Open Vimeo Video">Open Vimeo Video</a>

Fall

<button class="btn btn-default" data-target="#bs-example-out" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-slide-out" id="bs-example-out" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Bottom

<button class="btn btn-default" data-target="#bs-example-down" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-slide-down" id="bs-example-down" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Right

<button class="btn btn-default" data-target="#bs-example-right" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-slide-right" id="bs-example-right" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Left

<button class="btn btn-default" data-target="#bs-example-left" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-slide-left" id="bs-example-left" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

From Left

<button class="btn btn-default" data-target="#bs-rotate-left" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-rotate-left" id="bs-rotate-left" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

From Right

<button class="btn btn-default" data-target="#bs-rotate-right" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-rotate-right" id="bs-rotate-right" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

3D Flip Horizontal

<button class="btn btn-default" data-target="#bs-3d-horizontal" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-3d-horizontal" id="bs-3d-horizontal" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

3D Flip Vertical

<button class="btn btn-default" data-target="#bs-3d-vertical" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-3d-vertical" id="bs-3d-vertical" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

3D Slit

<button class="btn btn-default" data-target="#bs-3d-slit" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-3d-slit" id="bs-3d-slit" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Newspaper

<button class="btn btn-default" data-target="#bs-3d-newspaper " data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-3d-newspaper " id="bs-3d-newspaper" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>