<div class="container">
    <div class="row">
        <div class="well">
            <h1 class="text-center">Today's Blogposts</h1>
            <div class="list-group">
                <a href="#" class="list-group-item">
                    <div class="media col-md-3">
                        <figure class="pull-left">
                            <i class="fa fa-cloud-upload blogicon"></i>
                        </figure>
                    </div>
                    <div class="col-md-6">
                        <h4 class="list-group-item-heading">Blog Title</h4>
                        <p class="list-group-item-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec sem molestie, tempor libero eu, placerat purus. 
                            Donec eget iaculis elit. Nam eget consectetur quam. Nam viverra ornare diam. In a ornare diam. 
                            Quisque vestibulum nulla nec facilisis malesuada. 
                            Proin at lobortis risus. Vivamus tristique eros vel cursus malesuada. 
                            Vivamus volutpat, sem nec venenatis iaculis, metus felis interdum mi, et venenatis felis mi at eros. 
                            Phasellus vel massa nisi. Fusce ut vehicula nunc. Nullam egestas eros risus, eu fringilla odio lacinia ac. 
                            Fusce placerat a dolor et tincidunt. 
                            Pellentesque tristique nunc et nibh scelerisque euismod. 
                            Sed tristique arcu sit amet nulla auctor ultricies.
                        </p>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div id="qrcode1"></div>    
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="media col-md-3">
                        <figure class="pull-left">
                            <i class="fa fa-home blogicon"></i>
                        </figure>
                    </div>
                    <div class="col-md-6">
                        <h4 class="list-group-item-heading">Blog Title</h4>
                        <p class="list-group-item-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec sem molestie, tempor libero eu, placerat purus. 
                            Donec eget iaculis elit. Nam eget consectetur quam. Nam viverra ornare diam. In a ornare diam. 
                            Quisque vestibulum nulla nec facilisis malesuada. 
                            Proin at lobortis risus. Vivamus tristique eros vel cursus malesuada. 
                            Vivamus volutpat, sem nec venenatis iaculis, metus felis interdum mi, et venenatis felis mi at eros. 
                            Phasellus vel massa nisi. Fusce ut vehicula nunc. Nullam egestas eros risus, eu fringilla odio lacinia ac. 
                            Fusce placerat a dolor et tincidunt. 
                            Pellentesque tristique nunc et nibh scelerisque euismod. 
                            Sed tristique arcu sit amet nulla auctor ultricies.
                        </p>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div id="qrcode2"></div>    
                            </div>
                        </div>
                    </div>
                </a>
                 <a href="#" class="list-group-item">
                    <div class="media col-md-3">
                        <figure class="pull-left">
                            <i class="fa fa-location-arrow blogicon"></i>
                        </figure>
                    </div>
                    <div class="col-md-6">
                        <h4 class="list-group-item-heading">Blog Title </h4>
                        <p class="list-group-item-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec sem molestie, tempor libero eu, placerat purus. 
                            Donec eget iaculis elit. Nam eget consectetur quam. Nam viverra ornare diam. In a ornare diam. 
                            Quisque vestibulum nulla nec facilisis malesuada. 
                            Proin at lobortis risus. Vivamus tristique eros vel cursus malesuada. 
                            Vivamus volutpat, sem nec venenatis iaculis, metus felis interdum mi, et venenatis felis mi at eros. 
                            Phasellus vel massa nisi. Fusce ut vehicula nunc. Nullam egestas eros risus, eu fringilla odio lacinia ac. 
                            Fusce placerat a dolor et tincidunt. 
                            Pellentesque tristique nunc et nibh scelerisque euismod. 
                            Sed tristique arcu sit amet nulla auctor ultricies.
                        </p>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="panel panel-default">
                             <div class="panel-body">
                                <div id="qrcode3"></div>    
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<style>
.blogicon {
    font-size: 217px;
    color:#5CB85C;
}

.ratetext {
    font-size: 37px;
    text-decoration: underline;
    padding-bottom: 10px;
}

.votes {
    font-size: 47px;
    padding-right: 20px;
    color:#197BB5;
}

a.list-group-item {
    height: auto;
    min-height: 277px;
}

a.list-group-item:hover, a.list-group-item:focus {
    border-left:10px solid #5CB85C;
    border-right:10px solid #5CB85C;
}

a.list-group-item {
    border-left:10px solid transparent;
    border-right:10px solid transparent;
}
</style>

<!-- you need to include the shieldui css and js assets in order for the charts to work -->
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>

<script type="text/javascript">
    jQuery(function ($) {
        $("#qrcode1").shieldQRcode({
            mode: "byte",
            size: 220,
            style:{
                color: '#5CB85C'
            },
            value: "https://yoursite.com/blogpost1"
        });
        $("#qrcode2").shieldQRcode({
            mode: "byte",
            size: 220,
            style: {
                color: '#5CB85C'
            },
            value: "https://yoursite.com/blogpost2"
        });
        $("#qrcode3").shieldQRcode({
            mode: "byte",
            size: 220,
            style: {
                color: '#5CB85C'
            },
            value: "https://yoursite.com/blogpost3"
        });
    });
</script>