Bootstrap Carousel + Responsive

Final responsive version B

by Nate Armstrong

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="first-slider">
  <div id="carousel-example-generic" class="carousel slide carousel-fade">
    <!-- Indicators -->
    <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"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <!-- Item 1 -->
      <div class="item active">
        <img src="http://dev.ohiochristian.edu/sites/default/files/images/promo/banner1_0.jpg" alt="" width="1900" height="500">
        <div class="collapsible group-caption field-group-div speed-fast effect-none fieldgroup-effects-processed">
          <h3><span class="field-group-format-toggler"><a class="field-group-format-title" href="#">Caption</a></span></h3>
          <div class="field-group-format-wrapper white-box right-wrapper animated fadeInLeft">
            <h1 class="field-title-field">Mission:</h1>
            <p>Ohio Christian University is committed to offering a complete education that develops students intellectually, professionally, and spiritually.</p>
            <div class="field-promo-action">
              <a href="http://ohiochristian.edu/preview">Learn More</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Item 2 -->
      <div class="item">
        <img src="http://dev.ohiochristian.edu/sites/default/files/images/promo/students_group_prayer_flag_football_SAM_6685.jpg" alt="" width="1900" height="500">
        <div...

CSS

/* Latest compiled and minified CSS included as External Resource*/

.item,
.item.active,
.carousel-inner {
  overflow: visible;
}

.carousel-indicators{
  top:2px;
}

.carousel.slide {
  border-bottom: solid 30px #CDCFCE;
}

.field-group-format-toggler,
div.item > div.field-group-div h3 {
  display: none;
}

.field-promo-action{
  width:100%;
  display:block;
  float:left;
  text-align:center;
  margin-bottom:-20px;
}

.field-promo-action a {
  font-weight: bold;
  color: #fff;
  background-color: rgba(0, 0, 0, 1);
  padding: 1%;
  display:inline-block;
  font-weight: bold;
  color: #fff;
  border:1px solid black;
  margin-top:5px;
}

.field-promo-action a:hover {
  background-color: rgba(255, 255, 255,1);
  color:black;
  border:1px solid black;
  text-decoration: none;
}

.group-caption h3 {
  visibility: hidden;
}

h3.field-title-field,
h2.field-title-field,
h1.field-title-field {
  font-size: 3vw;
  visibility: visible;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

.field-group-format-wrapper {
  display: inline-block;
  position: absolute;
  width: 70%;
  color: white;
  left: 15%;
  text-align: center;
  font-size: .8em;
  background-color: #215a94;
  margin-top:-20px;
  padding:1%;
  z-index:7;
  border-bottom:3px black solid;
}

.field-group-format-wrapper span,   .field-group-format-wrapper p {
  font-size: 1.2em;
  line-height: 1.4em;
}

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
}


.carousel-fade .carousel-control {
  z-index: 2;
}

.carousel-control .fa-angle-right,
.carousel-control .fa-angle-left {
  position: absolute;
  bottom: -25px;
  z-index: 5;
  display: inline-block;
}

.carousel-control .fa-angle-left {
  left: 10%;
  width: 20px;
  height: 20px;
  font-size: 16px;
  color: #fff;
  border: 1px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 53px;
  text-shadow:none;
}

.carousel-control...

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */