bootdey cards snippets

This bootstrap snippet called "bootdey cards snippets" 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: bootdey,snippets

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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
    <div class="col-md-9">
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="snippet-card">
                <a href="#" class="filter-content">
                    <img src="https://bootdey.com/img/Snippets/Snippet_372.png" alt="Rounded Image" class="img-rounded img-responsive">
                </a>
                <div class="details details-center">
                    <a href="#">
                        <div class="author">
                            <div class="text">
                                <span class="name">Contact List</span>
                                <div class="meta">
                                    <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>|
                                    <span>3.3.5</span>|
                                    <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="snippet-card">
                <a href="#">
                    <img src="https://bootdey.com/img/Snippets/Snippet_310.png" alt="Rounded Image" class="img-rounded img-responsive">
                </a>
                <div class="details details-center">
                    <a href="#">
                        <div class="author">
                            <div class="text">
                                <span class="name">user profile description</span>
                                <div class="meta">
                                    <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>|
                                    <span>3.3.5</span>|
                                    <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6  col-xs-12">
            <div class="snippet-card">
                <a href="#">
                    <img src="https://bootdey.com/img/Snippets/Snippet_348.png" alt="Rounded Image" class="img-rounded img-responsive">
                </a>
                <div class="details details-center">
                    <a href="#">
                        <div class="author">
                            <div class="text">
                                <span class="name">Blog image Gallery Widget</span>
                                <div class="meta">
                                    <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>|
                                    <span>3.3.5</span>|
                                    <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6  col-xs-12">
            <div class="snippet-card">
                <a href="#">
                    <img src="https://bootdey.com/img/Snippets/Snippet_349.png" alt="Rounded Image" class="img-rounded img-responsive">
                </a>
                <div class="details details-center">
                    <a href="#">
                        <div class="author">
                            <div class="text">
                                <span class="name">user blog widget</span>
                                <div class="meta">
                                    <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>|
                                    <span>3.3.5</span>|
                                    <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6  col-xs-12">
            <div class="snippet-card">
                <a href="#">
                    <img src="https://bootdey.com/img/Snippets/Snippet_334.png" alt="Rounded Image" class="img-rounded img-responsive">
                </a>
                <div class="details details-center">
                    <a href="#">
                        <div class="author">
                            <div class="text">
                                <span class="name">blog page</span>
                                <div class="meta">
                                    <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>|
                                    <span>3.3.5</span>|
                                    <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6  col-xs-12">
            <div class="snippet-card">
                <a href="#">
                    <img src="https://bootdey.com/img/Snippets/Snippet_322.png" alt="Rounded Image" class="img-rounded img-responsive">
                </a>
                <div class="details details-center">
                    <a href="#">
                        <div class="author">
                            <div class="text">
                                <span class="name">profile with left cover</span>
                                <div class="meta">
                                    <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>|
                                    <span>3.3.5</span>|
                                    <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="fixed-section">
            <div class="sponsor text-center"> 
                <a class="pull-right" href="#">Advertise here</a> 
                <a href="https://bootdey.com/themes/view/BookPost-Bootstrap-social-network-css-html"> 
                    <img class="lazy img-responsive img-add" data-original="https://bootdey.com/img/ESP/bookpost.png" alt="c" src="https://bootdey.com/img/ESP/bookpost.png" style="display: block;"> 
                </a>
                <p> 
                    <a class="esp-text" href="#">Book-Post Bootstrap html social network</a>        
                </p> 
            </div>        
            <h3 class="related-title"> <i class="fa fa-bookmark"></i> Related Snippets</h3>
            <ul class="related-snippets">
                <li><a href="#buttons-row">Buttons</a></li>
                <li><a href="#checkbox-row">Checkbox/Radio</a></li>
                <li><a href="#dropdown-row">Dropdown</a></li>
                <li><a href="#inputs-row">Inputs</a></li>
                <li><a href="#textarea-row">Textarea</a></li>
                <li><a href="#navbar-row">Navigation</a></li>
                <li><a href="#subscription-row">Footers</a></li>
                <li><a href="#pagination-row">Pagination</a></li>
                <li><a href="#progressbar-row">Progress Bars</a></li>
                <li><a href="#sliders-row">Sliders</a></li>
                <li><a href="#labels-row">Labels</a></li>
                <li><a href="#datepicker-row">Datepicker</a></li>
                <li><a href="#modal-row">Modals</a></li>
                <li><a href="#tooltip-row">Tooltips/Popovers</a></li>
                <li><a href="#notification-row">Notification</a></li>
        
            </ul>
        </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



body{
    margin-top:20px;
    background: #F9F9F9;
}

.snippet-card a {
    color: #68B3C8;
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    -ms-transition: all 150ms linear;
    transition: all 150ms linear;
}
.snippet-card .img-rounded {
    border-radius: 8px;
    transition: opacity 0.5s ease 0s;
    box-shadow: 0 25px 20px -21px rgba(0,0,0,0.30);
}
.snippet-card a img {
    height: 200px;
    width: 266px;
}

.snippet-card {
    margin-bottom:20px;    
}
.snippet-card .details {
    margin-left: 4px;
    min-height: 50px;
    padding: 0 4px 0.5em;
    position: relative;
}
.snippet-card .details-center .author {
    position: relative;
    display: inline-block;
    text-align: left;
    margin: 20px auto 0;
}
.snippet-card .details-center .author img {
    position: absolute;
    left: 0;
    top: 0;
}
.snippet-card .details .author img {
    height: 40px;
    width: 40px;
    margin-bottom: 5px;
}
.snippet-card .img-no-padding {
    padding: 0px;
}
.snippet-card .img-circle {
    background-color: #FFFFFF;
    margin-bottom: 10px;
    padding: 4px;
}
.snippet-card .img-circle {
    border-radius: 50%;
}
.snippet-card .details-center .author .text {
    padding-left: 50px;
}
.snippet-card .details .author .name {
    color: #66615b;
    font-size: 14px;
    line-height: 1.15;
    max-width: 11em;
    overflow: hidden;
    padding-top: 3px;
    text-overflow: ellipsis;
}
.snippet-card .details .meta {
    color: #ccc5b9;
    font-size: 0.8em;
}
.fixed-section ul li {
    list-style: none;
}
.fixed-section li a {
    font-size: 14px;
    padding: 2px;
    display: block;
    color: #666666;
}
 a, a:hover, a:focus {
    text-decoration: none;
}
.related-title {
    color: #00a9eb!important;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
}

.sponsor .img-add {
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
    transition: opacity 0.5s ease 0s;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Dec 26th 2015, 11:20

Views: 1.3K