title: bootstrap carousel caption is hiding on mobile screen if screen size is <= 4 inch
body: <p>Hi Friends i am using bootstrap 3 carousal. I am facing once problem in mobile when the mobile screen is &lt;=4 inch. My slider's caption is hiding half on left side on the smaller screen. please help.</p>
  
  <p>Code:</p>
  
  <pre><code> &lt;div id="kc1" class="carousel " data-ride="carousel" data-interval="5000"&gt;
   &lt;ol class="carousel-indicators hidden-xs"&gt;
   &lt;li data-target="#kc1" data-slide-to="0" class="active"&gt;&lt;/li&gt;
   &lt;li data-target="#kc1" data-slide-to="1"&gt;&lt;/li&gt;
   &lt;/ol&gt;
   &lt;div class="carousel-inner" role="listbox"&gt;         
   &lt;div class="item active" id="websites"&gt;
   &lt;a href="websites-systems-trainings.php"&gt;&lt;img class="img-responsive" src="img/full-responsive-websites-system-solutions1.jpg";text="Slide+0" alt="Slide 0"&gt;&lt;/a&gt;
   &lt;div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-1 opa1 onee1"  style="background-color:#004080;"&gt;
   &lt;h1 style="font-size:25px;"&gt;This is test example and half caption is hiding in left side on mobile device below &lt;=4 inch screen &lt;/h1&gt; 
   &lt;h6&gt;
   &lt;a href="websites-systems-trainings.php" class="btn-default btn-sm"&gt;More&lt;/a&gt; 
   &lt;/h6&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="item" id="SEO-SEM"&gt;
   &lt;a href="seo-sem-ppc.php"&gt; &lt;img class="img-responsive" src="img/seo-sem.jpg";text="Slide+1" alt="Slide 1"&gt;&lt;/a&gt;
   &lt;div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-2"  style="background-color:#000;"&gt;
   &lt;h2&gt; This is test example and half caption is hiding in left side on mobile device below &lt;=4 inch screen&lt;/h2&gt;
   &lt;h6&gt;   &lt;a href="seo-sem-ppc.php" class="btn-default btn-sm"&gt;More&lt;/a&gt; &lt;/h6&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;a class="left carousel-control" href="#kc1" data-slide="prev"&gt;
   &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
   &lt;/a&gt;
   &lt;a class="right carousel-control" href="#kc1" data-slide="next"&gt;
   &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
   &lt;/a&gt; 
   &lt;/div&gt;
  
   &lt;style&gt;
   &lt;!-- carousel css--&gt;
   .btn-clear {
   color: #FFF;
   border-color: #FFF;
   border-width: 2px;
   margin-right: 15px;
   }
   btn-clear:hover {
   color: #000;
   background-color: #6699CC;
   }
   #kc1
   {
   border-radius: 0px 0px 0px 0px; /* slider.css ln-17*/
   /* added by kk */
   overflow: hidden;
   /* added by kk */
   margin-top: 1px;
   min-height: 300px;
   min-width: 100%;
   }
   #kc1 img {
   min-height: 300px;
   min-width: 100%;       
   }
   #kc1 &gt; .carousel-indicators &gt; li {
   border-radius: 2px;
   min-width: 2px;
   background-color:#D4FF00;
   border: 1px solid black;
   margin-right: 1px;;
   margin-left: 1px;;
   }
   #kc1 &gt; .carousel-indicators &gt; .active {
   background-color:#2AFF00;
   }
   #kc1 .carousel-caption {
   color: blue;   
   right: 50%;
   text-align: center;
   background:#fff;   
   left: auto;
   top:12%;
   bottom: initial;
   transform: translateY(-50%);
   transform:translateX(50%);
   color:#FFF;
   max-width: 1200px; 
   }
   .item {
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
   -webkit-
   }
   &lt;/style&gt; 
  </code></pre>
  
  <p>Here's a <a href="https://jsfiddle.net/fv02jbm7/" rel="nofollow noreferrer">jsfiddle</a> for clarification</p>