Light Box

<div class="row">
    <div class="col-sm-4">
        <div class="lightbox-photo">
            <a href="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img01-big.jpg" class="LightBox_image" title="Default">
                <img alt="" src="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img01.jpg" /> 
            </a>
            <div class="title">Default</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="lightbox-photo">
        <a href="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img01-big.jpg" class="LightBox_image" title="With Icon"> 
            <span class="photo"> 
                <img alt="" src="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img02.jpg" /> 
                <em class="fa fa-search"></em> 
            </span> 
        </a>
        <div class="title">With Icon</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="lightbox-photo">
            <div class="photo"> 
                <img alt="" src="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img03.jpg" /> 
                <span class="icon">
                    <a href="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img01-big.jpg" class="LightBox_image" title="Hover Effect">
                        <em class="fa fa-search"></em>
                    </a>
                    <a href="#" title="Hover Effect">
                        <em class="fa fa-link"></em>
                    </a>
                </span> 
            </div>
            <div class="title">Hover Effect</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-4">
        <div class="lightbox-photo">
            <a href="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img04-big.jpg" class="LightBox_image_gallery1" title="image 01">
                <img alt="" src="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img04.jpg" /> 
            </a>
            <div class="title">image 01</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="lightbox-photo">
            <a href="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img05-big.jpg" class="LightBox_image_gallery1" title="image 02">
                <img alt="" src="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img05.jpg" /> 
            </a>
            <div class="title">image 02</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="lightbox-photo">
            <a href="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img06-big.jpg" class="LightBox_image_gallery1" title="image 03">
                <img alt="" src="https://themes.cvsapphire.com/Portals/themes/Features-Images/lightbox-img06.jpg" /> 
            </a>
            <div class="title">image 03</div>
        </div>
    </div>
</div>

Youtube Video

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

Vimeo Vidio

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

Google Map

<a 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" class="LightBox_gmaps dg-btn-1 btn-accent radius-3px" title="Open Google Map">Open Google Map</a> 
      

Normal

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-modal">Large Modal</button>
<div class="modal fade dg-modal" id="bs-example-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><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... </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

Small

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-modal-sm">Large Modal</button>
<div class="modal fade dg-modal" id="bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog  modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><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... </p>
         </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

Large

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-modal-lg">Large Modal</button>
<div class="modal fade dg-modal" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog  modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><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... </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

Full Wide

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-modal-xl">Large Modal</button>
<div class="modal fade dg-modal" id="bs-example-modal-xl" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog  modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><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... </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

• Code
• Options

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-header-default">Large Modal</button>
<div class="modal fade dg-modal" id="bs-header-default" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 btn-accent radius-3px" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="dg-btn-1 btn-primary radius-3px" data-toggle="modal" data-target="#bs-header-primary">Large Modal</button>
<div class="modal fade dg-modal header-primary" id="bs-header-primary" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 btn-primary radius-3px" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="dg-btn-1 btn-danger radius-3px" data-toggle="modal" data-target="#bs-header-danger">Large Modal</button>
<div class="modal fade dg-modal header-danger" id="bs-header-danger" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 btn-danger radius-3px" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>

<button type="button" class="dg-btn-1 btn-success radius-3px" data-toggle="modal" data-target="#bs-header-success">Large Modal</button>
<div class="modal fade dg-modal header-success" id="bs-header-success" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 btn-success radius-3px" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="dg-btn-1 btn-info radius-3px" data-toggle="modal" data-target="#bs-header-info">Large Modal</button>
<div class="modal fade dg-modal header-info" id="bs-header-info" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-info" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="dg-btn-1 btn-warning radius-3px" data-toggle="modal" data-target="#bs-header-warning">Large Modal</button>
<div class="modal fade dg-modal header-warning" id="bs-header-warning" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-warning" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="dg-btn-1 btn-denim radius-3px" data-toggle="modal" data-target="#bs-header-denim">Large Modal</button>
<div class="modal fade dg-modal header-denim" id="bs-header-denim" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-denim" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="dg-btn-1 btn-cadetblue radius-3px" data-toggle="modal" data-target="#bs-bg-cadetblue">Large Modal</button>
<div class="modal fade dg-modal bg-cadetblue" id="bs-bg-cadetblue" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-close" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Top

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-up">Large Modal</button>
<div class="modal fade dg-modal modal-slide-up" id="bs-example-up" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Fade In & Scale

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-in">Large Modal</button>
<div class="modal fade dg-modal modal-slide-in" id="bs-example-in" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Fall

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-out">Large Modal</button>
<div class="modal fade dg-modal modal-slide-out" id="bs-example-out" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Bottom

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-down">Large Modal</button>
<div class="modal fade dg-modal modal-slide-down" id="bs-example-down" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Right

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-right">Large Modal</button>
<div class="modal fade dg-modal modal-slide-right" id="bs-example-right" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Left

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-left">Large Modal</button>
<div class="modal fade dg-modal modal-slide-left" id="bs-example-left" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

From Left

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-rotate-left">Large Modal</button>
<div class="modal fade dg-modal modal-rotate-left" id="bs-rotate-left" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

From Right

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-rotate-right">Large Modal</button>
<div class="modal fade dg-modal modal-rotate-right" id="bs-rotate-right" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

3D Flip Horizontal

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-3d-horizontal">Large Modal</button>
<div class="modal fade dg-modal modal-3d-horizontal" id="bs-3d-horizontal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

3D Flip Vertical

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-3d-vertical">Large Modal</button>
<div class="modal fade dg-modal modal-3d-vertical" id="bs-3d-vertical" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">

        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

3D Slit

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-3d-slit">Large Modal</button>
<div class="modal fade dg-modal modal-3d-slit" id="bs-3d-slit" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Newspaper

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-3d-newspaper ">Large Modal</button>
<div class="modal fade dg-modal modal-3d-newspaper " id="bs-3d-newspaper" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><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... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>