Holly Johnson Holly Johnson - 1 month ago 9
CSS Question

bootstrap carousel center caption that has a button

I am trying to vertical align a caption with a button into a bootstrap carousel and have it image responsive.
The other solutions i have read on line work unless they have a button attached.

See this codepen. it has a cute cat.

<div class="container">

<div class="carousel-caption " style="">
<h1 class="banner-text-size" style="font-size:40px;text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;"> After selling on Hempafy my Business has grown by 40%</h1>
<button type="button" class="btn btn-primary">button</button>

</div>

</div




checkout
http://codepen.io/anon/pen/gwELkd

Answer

#my-carousel .carousel-inner {
  width: 100%;
  height: 500px;
  position: relative;
}

#my-carousel .carousel-inner .item {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(90, 90, 90, 0.45)), url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
  background-size: cover;
  background-position: center top;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100%;
  height: 100%;
}

#my-carousel .carousel-inner .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#my-carousel .carousel-inner .container .carousel-caption {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (min-width:768px) {
  #my-carousel .carousel-inner .item {
    height: 500px
  }
}

@media (max-width:768px) {
  .banner-text-size {
    font-size: 30px!important;
    line-height: 40px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="containter">
  <div class="carousel carousel-fade slide" id="my-carousel">
    <div class="carousel-inner">
      <div class="item active item-1"></div>
      <div class="container">
        <div class="carousel-caption " style="">
          <h1 class="banner-text-size" style="font-size:40px;text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;"> MY Headline here</h1>
          <button type="button" class="btn btn-primary">button</button>
        </div>
      </div>
    </div>
  </div>
</div>

Here's how can you do it using flexbox. I overriden other styles.

Hope it helps. Cheers!