vs voting system

Bootstrap snippet. vs voting system, this snippet 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

HTML code

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

<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>

CSS code

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

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)}

                    

                                    

Similar snippets

Bootstrap snippet profile with timeline activities

profile with timeline activities

View

Bootstrap snippet Drive files documents user profile

Drive files documents user profile

View

Bootstrap snippet User profile rating

User profile rating

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jun 16th 2014, 23:57

Views: 4.0K

Rated 5/5 based on 2 reviews