<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="navbar-wrapper"> <div class="container"> <div class="navbar navbar-inverse navbar-static-top"> <div class="navbar-header"> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">Bootstrap 3</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="http://www.bootply.com" target="ext">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </div><!-- /container --> </div><!-- /navbar wrapper --> <!-- Carousel ================================================== --> <div class="overlay"><h1>Overlay Text</h1></div> <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://placehold.it/1500X500" class="img-responsive"> <div class="container"> <div class="carousel-caption"> </div> </div> </div> <div class="item"> <img src="http://placehold.it/1500X500" class="img-responsive"> <div class="container"> <div class="carousel-caption"> </div> </div> </div> <div class="item"> <img src="http://placehold.it/1500X500" class="img-responsive"> <div class="container"> <div class="carousel-caption"> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <i class="glyphicon glyphicon-chevron-left"></i> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <i class="glyphicon glyphicon-chevron-right"></i> </a> </div> <!-- /.carousel --> <!-- FOOTER --> <footer> <p class="pull-right"><a href="#">Back to top</a></p> <p>This Bootstrap layout is compliments of Bootply. · <a href="http://placehold.it/1500X500">Edit on Bootply.com</a></p> </footer>

/* BOOTSTRAP 3.x GLOBAL STYLES -------------------------------------------------- */ body { padding-bottom: 40px; color: #5a5a5a; } .overlay { color:#fff; position:absolute; z-index:12; top:50%; left:0; width:100%; text-align:center; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: absolute; top: 0; left: 0; right: 0; z-index: 10; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 60px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 1; } /* Declare heights because of positioning of img element */ .carousel .item { height: 400px; background-color:#555; } .carousel img { position: absolute; top: 0; left: 0; min-height: 400px; } /* RESPONSIVE CSS -------------------------------------------------- */ @media (min-width: 768px) { /* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ } /* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; } /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } }