ボタンが付いたブートストラップカルーセルセンターキャプション

Question

キャプションをボタンでブートストラップカルーセルに垂直に整列させ、応答性のあるイメージにしようとしています。 ボタンが取り付けられていない限り、私は他のソリューションをオンラインで読んでいます。

このコードを参照してください。それはかわいい猫を持っています。

<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 

チェックアウト http://codepen.io/anon/pen/gwELkd

Answer 1

#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>

は、ここでは、フレキシボックスを使用してそれを行うことができる方法です。私は他のスタイルをオーバーライドします。

希望します。乾杯！