div box shadow

This bootstrap snippet called "div box shadow" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: div,box,shadow

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-sm-4 col-xs-6">
            <div class="bs-item z-depth-1">
                .z-depth-1 / .z-depth(1)
            </div>
        </div>
        <div class="col-sm-4 col-xs-6">
            <div class="bs-item z-depth-2">
                .z-depth-1 / .z-depth(1)
            </div>
        </div>
        <div class="col-sm-4 col-xs-6">
            <div class="bs-item z-depth-3">
                .z-depth-1 / .z-depth(1)
            </div>
        </div>
	</div>
    <div class="row">
        <div class="col-sm-4 col-xs-6">
            <div class="bs-item z-depth-4">
                .z-depth-1 / .z-depth(1)
            </div>
        </div>
        <div class="col-sm-4 col-xs-6">
            <div class="bs-item z-depth-5">
                .z-depth-1 / .z-depth(1)
            </div>
        </div>
	</div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{margin-top:20px;}
.bs-item {
  background: #fff;
  margin-bottom: 30px;
  height: 100px;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  border-radius: 2px;
}

.z-depth-1 {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
}

.z-depth-2 {
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

.z-depth-3 {
  box-shadow: 0 12px 15px rgba(0, 0, 0, 0.24), 0 17px 50px rgba(0, 0, 0, 0.19);
}

.z-depth-4 {
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22), 0 25px 55px rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
  box-shadow: 0 27px 24px rgba(0, 0, 0, 0.2), 0 40px 77px rgba(0, 0, 0, 0.22);
}
                                    

Similar snippets

Bootstrap snippet Box shadow effect

Box shadow effect

View

Bootstrap snippet login box

login box

View

Bootstrap snippet direct chat box

direct chat box

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 16th 2015, 08:06

Views: 601