html - bootstrap carousel images overflowing the right hand grid col -


i want keep carousel , nav bar in middle 75% of screen laid screen out grid. cant recreate on fiddle if put local you'll see; screenshot: enter image description here see 'block 4' on top of pic, thats col starts

  <div class="col-sm-3">col1 </div>   <div class="col-xs-12 col-sm-6"> carousel goes here </div>   <div class="col-sm-3">col3 </div>  

the problem images overflow onto 3rd col, how can carousel stay in middle cell/col?

full code below

   <body>         <!--rows , cols structure -->         <div class="row">           <div class="col-sm-3">block1 </div>           <div class="col-xs-12 col-sm-6">                   <!--carouselstart-->             <div class="container page-content">                 <div class="hero row">                     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">                       <!-- 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>                       </ol>                        <!-- wrapper slides -->                       <div class="carousel-inner" role="listbox">                         <div class="item active">                           <img src="img/image1.jpg" alt="image 1 missing" title="image 1">                           <div class="carousel-caption">                             <h3>caption1</h3>                           </div>                         </div>                          <div class="item">                           <img src="img/image2.jpg" alt="image 2 missing" title="image 2">                           <div class="carousel-caption">                             <h3>caption 2</h3>                           </div>                         </div>                          <div class="item">                           <img src="img/image3.jpg" alt="image 3 missing" title="image 3">                           <div class="carousel-caption">                             <h3>caption 2</h3>                           </div>                         </div>                       </div>                        <!-- controls -->                       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">                         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>                         <span class="sr-only">previous</span>                       </a>                       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">                         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>                         <span class="sr-only">next</span>                       </a>                     </div>                 </div> <!--end hero -->             </div><!--end of container--> <!--nav bar goes here-->           <div class="col-sm-3">block4</div> 

update.... used thr chrome dev tools alter css , found if set below 100% fits perfectectly. how do ? enter image description here


Comments

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -