Bootstrap Snippet Carousel with content on top 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="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 class="container">
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
        
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="carousel-inner">
                <div class="col-sm-10 col-sm-offset-1 on-top-of-carousel">
                    TEXT ON TOP OF CAROUSEL
                </div>
                <div class="item active" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/8e/Templo_Wat_Arun%2C_Bangkok%2C_Tailandia%2C_2013-08-22%2C_DD_37.jpg')">
                </div>
                <div class="item" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/a5/%D0%93%D0%BE%D1%81%D1%83%D0%B4%D0%B0%D1%80%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%BC%D1%83%D0%B7%D0%B5%D0%B9_%E2%84%962.JPG')">
                </div>
                <div class="item" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/c/ce/Unterzeichnung_des_Koalitionsvertrages_der_18._Wahlperiode_des_Bundestages_%28Martin_Rulsch%29_026.jpg')">
                </div>
              </div>
          </div>
        
          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
#carousel-example-generic {height:500px; width:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.item{width:100%;height:100%;background-position:center;background-size:cover;}
.on-top-of-carousel {z-index:999; position:absolute; color:#fff; background-color:#3498DB; padding:50px; margin-top:100px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Carousel with content on top"
Bootstrap 3.0.3 Snippet by gulli

Related: See More

Questions / Comments:

"Carousel with content on top" Bootstrap 3.0.3 Snippet by gulli

Related: See More

Questions / Comments:

"Carousel with content on top"
Bootstrap 3.0.3 Snippet by gulli