Bootstrap Snippet Portfolio screen style using HTML CSS Bootstrap

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div id="carousel">                 
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="carousel slide" id="portfolio-carousel" data-ride="carousel" >
                    <!-- Carousel indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#portfolio-carousel" data-slide-to="0"class="active"></li>
                        <li data-target="#portfolio-carousel" data-slide-to="1"></li>
                    </ol>
                    <!-- Carousel items -->
                    <div class="carousel-inner text-center">
                        <div class="active item">
                            <div class="screen">
                                <iframe src="https://pixabay.com/"></iframe>
                            </div>
                        </div>
                        <div class="item">
                            <div class="screen">
                                <iframe src="https://pixabay.com/"></iframe>
                            </div>
                        </div>
                    </div>
            <a class="left carousel-control" href="#portfolio-carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#portfolio-carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>    
                </div>
    
            </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.screen{
    background: url(https://img4.hostingpics.net/pics/563332ecran.png) no-repeat center;
    height:600px;
    padding-top:88px; 
}
.screen iframe{
  width: 550px;
  height: 312px;
  border:0;
}
.left{
    position:fixed;
}
.right{
    position:fixed;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Portfolio screen style"
Bootstrap 3.3.0 Snippet by Kevin.M

Related: See More

Questions / Comments:

"Portfolio screen style" Bootstrap 3.3.0 Snippet by Kevin.M

Related: See More

Questions / Comments:

"Portfolio screen style"
Bootstrap 3.3.0 Snippet by Kevin.M