Navigation

Shadow Boxes

  1. Home
  2. Shadow Boxes
Shadow Boxes

Shadow Boxes

These boxes can created just only applying class .box-shadow-1 to .box-shadow-5

Note: To use box shadow with funny boxes you need to wrap funny box in a wrapper div then apply .box-shadow-* classes to that parent div 

<div class="box-shadow-*">
	<div class="funny-box">
		...
	</div>
</div>
Shadow Box 1
using class .box-shadow-1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
Shadow Box 2
using class .box-shadow-2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
Shadow Box 3 Left
using class .box-shadow-3-left Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
Shadow Box 3 Right
using class .box-shadow-3-right Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
Shadow Box 3 Both Side
using both classes .box-shadow-3-left .box-shadow-3-rightLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
Shadow Box 4
using class .box-shadow-4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 

		  	
<!-- Shadow Boxes --> 
								  	
<div class="panel panel-primary box-shadow-1">
	<div class="panel-heading">
		<div class="panel-title">Shadow Box 1</div>
	</div>
	<div class="panel-body">
		using class <code>.box-shadow-1</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
	</div>
</div>
								  	
<div class="panel panel-primary box-shadow-2">
	<div class="panel-heading">
		<div class="panel-title">Shadow Box 2</div>
	</div>
	<div class="panel-body">
		using class <code>.box-shadow-2</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
	</div>
</div>
								 
<div class="panel panel-primary box-shadow-3-left">
	<div class="panel-heading">
		<div class="panel-title">Shadow Box 3 Left</div>
	</div>
	<div class="panel-body bg-white">
		using class <code>.box-shadow-3-left</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
	</div>
</div>
								  	
<div class="panel panel-primary box-shadow-3-right">
	<div class="panel-heading">
		<div class="panel-title">Shadow Box 3 Right</div>
	</div>
	<div class="panel-body bg-white">
		using class <code>.box-shadow-3-right</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
	</div>
</div>
								  	
<div class="panel panel-primary box-shadow-3-left box-shadow-3-right">
	<div class="panel-heading">
		<div class="panel-title">Shadow Box 3 Both Side</div>
	</div>
	<div class="panel-body bg-white">
		using both classes <code>.box-shadow-3-left .box-shadow-3-right</code>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
	</div>
</div>
								  	
<div class="panel panel-primary box-shadow-4">
	<div class="panel-heading">
		<div class="panel-title">Shadow Box 4</div>
	</div>
	<div class="panel-body">
		using class <code>.box-shadow-4</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
	</div>
</div>