How do I use this Bootstrap snippet?

Load Bootstrap 3.3.4, paste the HTML, add the CSS styles, and include the JS if present to match the live demo.

Can I use it commercially?

Yes. Snippets are free for personal and commercial projects. Review the snippets license page for details.

Is the layout responsive?

Yes. It is built on Bootstrap 3.3.4 and inherits its responsive grid and components.

Bootstrap html snippet. notes

HTML code

Clean, semantic HTML that powers this Bootstrap 3.3.4 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippets bootdey">
    <div class="row">
		<ul class="notes">
            <li>
                <div class="rotate-1 lazur-bg">
                    <small>12:03:28 12-04-2014</small>
                    <h4>Awesome title</h4>
                    <p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                    <a href="#" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
                </div>
            </li>   
            <li>
                <div class="rotate-2 red-bg">
                    <small>12:03:28 12-04-2014</small>
                    <h4>Awesome date</h4>
                    <p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                    <a href="#" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
                </div>
            </li>    
            <li>
                <div class="rotate-1 yellow-bg">
                    <small>12:03:28 12-04-2014</small>
                    <h4>Awesome project</h4>
                    <p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                    <a href="#" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
                </div>
            </li>   
		</ul>  
	</div>
</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.3.4 to keep the design, spacing, and responsiveness consistent.

body{margin-top:20px;}

ul.notes li {
  margin: 10px 40px 50px 0px;
  float: left;
}

ul.notes li, ul.tag-list li {
  list-style: none;
}

ul.notes li div small {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
}

div.rotate-1 {
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
}

div.rotate-2 {
  -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  position: relative;
  top: 5px;
}

.lazur-bg {
  background-color: #23c6c8;
  color: #ffffff;
}

.red-bg {
  background-color: #ed5565;
  color: #ffffff;
}

.navy-bg {
  background-color: #1ab394;
  color: #ffffff;
}

.yellow-bg {
  background-color: #f8ac59;
  color: #ffffff;
}

ul.notes li div {
  text-decoration: none;
  color: #000;
  display: block;
  height: 210px;
  width: 210px;
  padding: 1em;
  -moz-box-shadow: 5px 5px 7px #212121;
  -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  -moz-transition: -moz-transform 0.15s linear;
  -o-transition: -o-transform 0.15s linear;
  -webkit-transition: -webkit-transform 0.15s linear;
}