0

Bootstrap 4 Ecommerce information container with icons

Jeri 2020-11-28 #icons #containers #ecommerce #bootstrap4
Fork Save Download 
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="char_item">
                <div class="row">
                    <div class="col-md-4">
                        <div class="char_icon"><img src="https://img.icons8.com/nolan/64/000000/free-shipping.png"> </div>
                    </div>
                    <div class="col-md-8">
                        <div class="char_content">
                            <div class="char_title">Free Delivery</div>
                            <div class="char_subtitle">Get free delivery $50</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="char_item">
                <div class="row">
                    <div class="col-md-4">
                        <div class="char_icon"><img src="https://img.icons8.com/nolan/64/000000/medal.png"> </div>
                    </div>
                    <div class="col-md-8">
                        <div class="char_content">
                            <div class="char_title">Awards</div>
                            <div class="char_subtitle">Get awords on every single order</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="char_item">
                <div class="row">
                    <div class="col-md-4">
                        <div class="char_icon"><img src="https://img.icons8.com/nolan/64/000000/replace.png"> </div>
                    </div>
                    <div class="col-md-8">
                        <div class="char_content">
                            <div class="char_title">Replacement</div>
                            <div class="char_subtitle">Easy Relplacement on all order</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="char_item">
                <div class="row">
                    <div class="col-md-4">
                        <div class="char_icon"><img src="https://img.icons8.com/nolan/64/000000/cash-in-hand.png"> </div>
                    </div>
                    <div class="col-md-8">
                        <div class="char_content">
                            <div class="char_title">Easy COD</div>
                            <div class="char_subtitle">Cash on Delivery on all orders above $100</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
body {
    background-color: #E3F2FD
}

.container {
    margin-top: 100px
}

.char_icon {
    margin-top: 15px
}

.char_item {
    width: 100%;
    height: 100px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    border: solid 1px #e8e8e8;
    padding-left: 1px;
    background-color: #fff
}

.char_content {
    margin-top: 22px
}

.char_title {
    font-size: 20px;
    font-weight: 500;
    color: #666666
}

.char_subtitle {
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 3px
}
RUN
add comment
Suggest a different solution or add another example