vs voting system

This bootstrap snippet called "vs voting system" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: rating,voting,social,favorite

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container bootstrap snippet">
    <div class="row">
    	<div class="well">
        <h1 class="text-center text-primary">
            <span class="glyphicon glyphicon-thumbs-up"></span>
            <b>Vote for your favorite social network</b>
        </h1>
        <div class="list-group">
          <a href="#" class="list-group-item">
                <div class="col-md-3">
                     <div class="media col-md-12 twitter">
                        <figure class="pull-left">
                            <i class="fa fa-twitter"></i>
                        </figure>
                    </div>
                    <div class="media col-md-12">
                        <button type="button" class="btn btn-default btn-lg btn-block"> Vote</button>
                        <div class="stars text-center text-warning">
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                        </div>
                    </div>  
                </div>
 
                <div class="col-md-6 text-center">
                    <h1 class="vs-title">Vs</h1>
                </div>
                <div class="col-md-3">
                     <div class="media col-md-12 facebook-like">
                        <figure class="pull-left">
                            <i class="fa fa-facebook"></i>
                        </figure>
                    </div>
                    <div class="media col-md-12">
                        <button type="button" class="btn btn-default btn-lg btn-block"> Vote</button>
                        <div class="stars text-center text-warning">
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                        </div>
                    </div>  
                </div>
          </a>
        </div>
        </div>
	</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

a.list-group-item {
    height:auto;
    min-height:220px;
}
a.list-group-item.active small {
    color:#fff;
}
a.list-group-item  .vs-title {
    font-size: 110px; 
    box-shadow: 0 1px 1px rgba(0,0,0,.5)
}
.fa { font-size: 200px;color:#FFFFFF;}
.social a { text-decoration:none; }
.twitter { background-color:#00acee; border-radius:4px;box-shadow: 0 5px 15px rgba(0,0,0,.5)}
.facebook-like { background-color:#3b5998;border-radius:4px;margin-top:-3px;box-shadow: 0 5px 15px rgba(0,0,0,.5)}

                    

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jun 16th 2014, 23:57

Views: 3.8K

Rated 5/5 based on 2 reviews