Bootstrap Snippet Full-Screen Bootstrap Carousel 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 ---------->
<section class="mbr-slider mbr-section mbr-section--no-padding carousel slide" data-ride="carousel" data-wrap="true" data-interval="5000" id="slider-5" style="background-color: #4c6972;">
    <div class="mbr-section__container">
        <div>
            <ol class="carousel-indicators">
                <li data-app-prevent-settings="" data-target="#slider-5" data-slide-to="0" class="active"></li><li data-app-prevent-settings="" data-target="#slider-5" data-slide-to="1"></li><li data-app-prevent-settings="" data-target="#slider-5" class="" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--bg-adapted item dark center mbr-section--full-height active" style="background-image: url(https://images.unsplash.com/photo-1433264058539-880eb8412c9d);">
                    <div class="mbr-box__magnet mbr-box__magnet--center-right mbr-box__magnet--sm-padding">
                                            
                        <div class=" container">
                            
                            <div class="row">
                                <div class=" col-md-6 col-md-offset-5">  
                                <div class="mbr-hero">
                                    <h1 class="mbr-hero__text">Bootstrap Carousel</h1>
                                    <p class="mbr-hero__subtext">Slide 1. Content aligned to left</p>
                                </div>
                                <div class="mbr-buttons btn-inverse mbr-buttons--left mbr-buttons--right"><a class="mbr-buttons__btn btn btn-lg btn-danger" href="#">FREE DOWNLOAD</a> <a class="mbr-buttons__btn btn btn-lg btn-default" href="#">VIEW DEMO</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><div class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--bg-adapted item dark center mbr-section--full-height" style="background-image: url(https://images.unsplash.com/photo-1429655353447-d030683895ad);">
                    <div class="mbr-box__magnet mbr-box__magnet--center-center mbr-box__magnet--sm-padding">
                                            
                        <div class=" container">
                            
                            <div class="row">
                                <div class=" col-md-8 col-md-offset-2">  
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
/*-------
   Slider
-------*/
.mbr-slider .carousel-inner > .active,
.mbr-slider .carousel-inner > .next,
.mbr-slider .carousel-inner > .prev {
    display: table;
}
.mbr-slider .carousel-control {
    background-image: none;
    width: 54px;
    height: 54px;
    top: 50%;
    margin-top: -27px;
    line-height: 54px;
    border: 2px solid #fff;
    opacity: 1;
    text-shadow: none;
    z-index: 5;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.mbr-slider .carousel-control.left {
    margin-left: 20px;
}
.mbr-slider .carousel-control.right {
    margin-right: 20px;
}
.mbr-slider .carousel-control:hover {
    background: #fff;
    color: #000;
}
.mbr-slider .carousel-indicators {
    bottom: 20px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Full-Screen Bootstrap Carousel"
Bootstrap 3.3.0 Snippet by BootstrapCarousel

Related: See More

Questions / Comments:

"Full-Screen Bootstrap Carousel" Bootstrap 3.3.0 Snippet by BootstrapCarousel

Related: See More

Questions / Comments:

"Full-Screen Bootstrap Carousel"
Bootstrap 3.3.0 Snippet by BootstrapCarousel