<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 ----------> <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="http://unwallpapers.com/wp-content/uploads/2015/05/Beautiful-Girl-Glasses-Art-Hd-Wallpaper.jpg" class="fill"> <div class="container"> <div class="carousel-caption"> <h1>Bootstrap 3 Carousel Layout</h1> </div> </div> </div> <div class="item"> <img src="http://unwallpapers.com/wp-content/uploads/2015/05/Beautiful-Girl-Glasses-Art-Hd-Wallpaper.jpg"> <div class="carousel-caption"> <h1>Changes to the Grid</h1> <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> </div> </div> <div class="item"> <img src="http://unwallpapers.com/wp-content/uploads/2015/05/Beautiful-Girl-Glasses-Art-Hd-Wallpaper.jpg"> <div class="carousel-caption"> <h1>Changes to the Grid</h1> <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> <!-- /.carousel -->

/* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 60px; height: 100%; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* Declare heights because of positioning of img element */ .carousel .item { height: 500px; background-color:#bbb; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 100%; } .navbar-nav li a{ color: #d2b6aa; } .nav>li>a:hover, .nav>li>a:focus { background-color: transparent; color:#e76831 ; } .navbar-nav li a{ color: #d2b6aa; } .nav>li>a:hover, .nav>li>a:focus { background-color: transparent; color:#e76831 ; } /*media query*/ /*!* RESPONSIVE CSS*/ /*-------------------------------------------------- *!*/ @media(max-width:1250px ){ .carousel .item { height: 250px; background-color:#bbb; } .carousel .img{ height:70% ; } .carousel-caption p,h1{ font-weight: bold; font-size: 18px; } .navbar-brand { left: -3%; } } @media(max-width:1100px ){ .carousel .item { height: 250px; background-color:#bbb; } .carousel .img{ height:70% ; } .carousel-caption p,h1{ font-weight: bold; font-size: 18px; } .navbar-brand { left: -3%; } } @media(max-width:800px ){ .carousel .item { height: 250px; background-color:#bbb; } .carousel .img{ height:70% ; } .carousel-caption p,h1{ font-weight: bold; font-size: 18px; } .navbar-brand { left: -3%; } } @media(max-width:500px ){ .carousel .item { height: 150px; background-color:#bbb; } .carousel .img{ height:65% ; } .carousel-caption p,h1{ display: none; } .navbar-nav li a{ color: #e76831; background:#d2b6aa; } }