"Bootstrap Content Slider"
Bootstrap 3.2.0 Snippet by sting57

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href='http://fonts.googleapis.com/css?family=Lato:400,700|Exo+2:700,400' rel='stylesheet' type='text/css'> <div class="container"> <div class="row"> <section class="col-xs-12"> <div id="carousel-example-generic" class="carousel slide box" data-ride="carousel"> <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" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="row"> <h2 class="center-block">Bootstrap is an AWESOME Plugin</h2> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-1"> <h4>Easy to install</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-2"> <h4>Easy to learn <span class="hidden-md">& use</span></h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-3"> <h4>Easy to Customize</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-4"> <h4>Easy to Maintain</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> </div> </div> <div class="item"> <div class="row"> <h2 class="center-block">Not only a RESPONSIVE Framework</h2> <div class="col-xs-12 col-sm-6"> <div class="block block-1"> <h4>Numbers of CSS & Javascript Components</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="block block-2"> <h4>Includes 200 glyphs in the format of font</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> </div> </div> <div class="item"> <div class="row"> <h2 class="center-block">Use any component with this SLIDER</h2> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-1"> <h4>MODAL</h4> <button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Launch modal</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-2"> <h4>Forms</h4> <form> <div class="input-group"> <span class="input-group-addon">User ID</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> <span class="input-group-addon">Password</span> <input type="password" class="form-control"> </div> <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">Login</button> </form> </div> </div> <div class="carousel-inner"> <div class="item active"> <div class="row"> <h2 class="center-block">Bootstrap is an AWESOME Plugin</h2> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-1"> <h4>Easy to install</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-2"> <h4>Easy to learn <span class="hidden-md">& use</span></h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-3"> <h4>Easy to Customize</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-4"> <h4>Easy to Maintain</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> </div> </div>
h2,h3,h4,h5{ font-family: 'Exo 2', sans-serif; font-weight: bold; } .box{ border: solid 1px #FFF; outline: solid 1px #e0e0e0; } p,b{ float: left; display: block; font-family: 'Lato', sans-serif; } .carousel{ margin-top: 30px; position: relative; padding-bottom: 50px; background-color: #D8D8D8; } .item{ min-height: 350px; padding-left: 30px; padding-right: 30px; } .item h2{ width: 900px; color: #FFF; padding: 15px; font-size: 38px; margin-bottom: 30px; text-align: center; text-shadow: 1px 2px 3px #444; } .item .block{ width: 100%; float: left; color: #FFF; min-height: 200px; text-align: center; padding: 15px; margin-bottom: 20px; box-shadow: 1px 2px 3px #444; } .item h4{ width: 100%; padding: 15px; font-size: 30px; font-weight: 900; text-align: center; text-shadow: 2px 2px 2px #555; } .item p{ text-align: center; font-size: 18px; } .item .input-group{ margin-bottom: 10px; } .block-1{ background-color: #94C83C } .block-2{ background-color: #F36E20 } .block-3{ background-color: #3498DB } .block-4{ background-color: #F7C767 } .carousel-indicators { bottom: 0px; }

Related: See More


Questions / Comments: