HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <div class="container-fluid">
        <div class="row">
                    <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text">
                            <img src="http://i.imgur.com/PUeaHfC.png" alt="" />
                            <div class="portfolio_images_overlay text-center">
                                <h6 class="clrd-font">Italian Source Mushroom</h6>
                                <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p>
                                <a href="#" class="btn btn-primary">Click here</a>
                            </div>
                            <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/PUeaHfC.png">
                                <div class="zoom"></div>
                            </a>
                    </div>
                    <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text">
                            <img src="http://i.imgur.com/uX3g4Nl.png" alt="" />
                            <div class="portfolio_images_overlay text-center">
                                <h6 class="clrd-font">Italian Source Mushroom</h6>
                                <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p>
                                <a href="#" class="btn btn-primary">Click here</a>
                            </div>
                            <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/PUeaHfC.png">
                                <div class="zoom"></div>
                            </a>
                    </div>
                    <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text">
                            <img src="http://i.imgur.com/8cOtAS9.png" alt="" />
                            <div class="portfolio_images_overlay text-center">
                                <h6 class="clrd-font">Italian Source Mushroom</h6>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*{
    padding:0;
    margin:0;
    -webkit-transition: 1s;
    transition: 1s;
}
.clrd-font{
    background: #FF512F;
    background: -webkit-linear-gradient(to right, #F09819, #FF512F);
    background: linear-gradient(to right, #F09819, #FF512F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-primary {
    background-color:transparent;
    color: #fff;
    border: 2px solid #fff;
    font-size:20px;
    text-transform: uppercase;
    border-radius: 0px; 
}
.btn-primary:hover {
    background-color:transparent;
    border-color: #d6962c;
    color: #d6962c;
    border-radius: 20px;
}
.single_portfolio_text{
    display:inline-block;
    padding:0;
    position:relative;
    overflow:hidden;
}
.single_portfolio_text img{
    width:100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
$(document).ready(function(){
    $(".fancybox").fancybox({
        openEffect: "none",
        closeEffect: "none"
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"gallery - vK"
Bootstrap 4.0.0 Snippet by fotohansdegroot

Related: See More

Questions / Comments:

"gallery - vK" Bootstrap 4.0.0 Snippet by fotohansdegroot

Related: See More

Questions / Comments:

"gallery - vK"
Bootstrap 4.0.0 Snippet by fotohansdegroot