Bootstrap Snippet upcoming event corousel 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 class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="hd1">Upcoming Events</h2>
                    <div id="carousel-event" class="carousel carousel-event slide" data-ride="carousel">
                    
                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <div class="item active">
                          <div class="row">
                            <div class="col-sm-6">
                                <div class="event-box">
                                    <figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
                                    <div class="event-dtil">
                                        <div class="event-date">
                                            <span class="pull-right"><i class="fa fa-comments"></i>     136 Comments</span>
                                            <span><i class="fa fa-calendar"></i>   February 20, 2014</span>
                                        </div>
                                        <h3>  Nam lacinia massa nunc vel.</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
                                        <div>
                                            <a href="#" class="btn btn-gray text-uppercase">Read More</a>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="col-sm-6">
                                <div class="event-box">
                                    <figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
                                    <div class="event-dtil">
                                        <div class="event-date">
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
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css);
.carousel-event{
    position:relative;
    padding-bottom:46px;
    margin-bottom:30px;
}
.carousel-event .carousel-navbox{
    position:absolute;
    right:0;
    bottom:0;
    height:44px;
    z-index:1;
    left:0;
}
.carousel-event .carousel-control {
  bottom:auto;
  color: #fff;
  font-size: 20px;
  left:auto;
  opacity: 1;
  position: relative;
  text-align: center;
  text-shadow: none;
  top: auto;
  background:#000;
  z-index:99;
  width:35px;
  height:44px;
  display:block;
  float:right;
} 
.carousel-event .carousel-control:hover {
    background-color:#cc0001;
}
.carousel-event .carousel-control .glyphicon-chevron-left, 
.carousel-event .carousel-control .glyphicon-chevron-right, 
.carousel-event .carousel-control .icon-prev, 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"upcoming event corousel"
Bootstrap 3.3.0 Snippet by skyrites

Related: See More

Questions / Comments:

"upcoming event corousel" Bootstrap 3.3.0 Snippet by skyrites

Related: See More

Questions / Comments:

"upcoming event corousel"
Bootstrap 3.3.0 Snippet by skyrites