Bootstrap Buttons With Labels


	<div class="container">
    <div class="row">
        <h2>
            Cool Buttons With Labels</h2>
        <div class="col-md-12">
            <button type="button" class="btn btn-labeled btn-success">
                <span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success</button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Cancel</button>
            <br>
            <button type="button" class="btn btn-labeled btn-warning">
                <span class="btn-label"><i class="glyphicon glyphicon-bookmark"></i></span>Bookmark</button>
            <button type="button" class="btn btn-labeled btn-primary">
                <span class="btn-label"><i class="glyphicon glyphicon-camera"></i></span>Camera</button>
            <br>
            <button type="button" class="btn btn-labeled btn-default">
                <span class="btn-label"><i class="glyphicon glyphicon-chevron-left"></i></span>Left</button>
            <button type="button" class="btn btn-labeled btn-default">
                <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
                Right</button>
            <br>
            <button type="button" class="btn btn-labeled btn-success">
                <span class="btn-label"><i class="glyphicon glyphicon-thumbs-up"></i></span>Thumbs
                Up</button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-thumbs-down"></i></span>Thumbs
                Down</button>
            <br>
            <button type="button" class="btn btn-labeled btn-info">
                <span class="btn-label"><i class="glyphicon glyphicon-refresh"></i></span>Refresh</button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-trash"></i></span>Trash</button>
            <br>
            <a class="btn btn-success btn-labeled" href="javascript:;" role="button">
                <span class="btn-label"><i class="glyphicon glyphicon-info-sign"></i></span>Info Web</a>
        </div>
    </div>
</div>

	<script type="text/javascript">
	
	</script>

    .btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn { margin-bottom:10px; }