Bootstrap Badger


	<div class="container">
    <div class="row">
        <div class="badger-left" data-badger="Badger default (left)">Block with badger 1</div>
        <div class="badger-right badger-info" data-badger="Badger info (right)">Block with badger 2</div>
        <div class="badger-left badger-danger" data-badger="Badger danger (left)">Block with badger 3</div>
        <div class="badger-right badger-warning" data-badger="Badger warning (right)">Block with badger 4</div>
        <div class="badger-left badger-success" data-badger="Badger success (left)">Block with badger 5</div>
        <div class="badger-right badger-inverse" data-badger="Badger inverse (right)">Block with badger 6</div>
    </div>
</div>
	<script type="text/javascript">
	
	</script>

    /* Some common styles..
Warning! this first div styles can affect all your div styles! It is for demonstration purposes only!
You can append this div's style to [class*="badger"] section if you want this style by default for all badgers
------------------------- */

div {
    margin: 15px 0;
    padding: 33px 15px 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, .64)
}

/* Badger
------------------------- */

[class*="badger"] {
    position: relative
}

[class*="badger"]:after {
    content: attr(data-badger);
    position: absolute;
    top: 0;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background: #999;
    color: #fff
}

.badger-left {
    border-top-left-radius: 6px
}

.badger-right {
    border-top-right-radius: 6px
}

.badger-left:after {
    left: 0;
    border-radius: 6px 0 6px 0
}

.badger-right:after {
    right: 0;
    border-radius: 0 6px 0 6px
}

.badger-danger:after {
    background: #d9534f
}

.badger-warning:after {
    background: #f0ad4e
}

.badger-success:after {
    background: #5cb85c
}

.badger-info:after {
    background: #5bc0de
}

.badger-inverse:after {
    background: #222
}