html - Scaling Bootstrap Carousel -


i working bootstrap (new it), trying create carousel takes 60% of page leaving space @ bottom having scale correctly when window shrunk down mobile size etc. right when window resized carousel gradually disappears disappears when window @ smallest size. here code:

<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <link rel="stylesheet" href="bootstrap/css/bootstrap.css">  <meta name="viewport" content="width=device-width, initial-scale=1"> </head>  <body>   <!--navigation bar-->  <nav class="navbar navbar-inverse navbar-fixed-top">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand">b media</a>     </div>     <ul class="nav navbar-nav">       <li><a href="#" class="active">home</a></li>       <li><a href="#">history</a></li>       <li><a href="#">technique</a></li>        <li><a href="#">gallery</a></li>      </ul>   </div> </nav>  <div class="container"> <div id="mycarousel" class="carousel slide" data-ride="carousel">      <ol class="carousel-indicators">         <li data-target="#mycarousel" data-slide-to="0" class="active"></li>         <li data-target="#mycarousel" data-slide-to="1"></li>         <li data-target="#mycarousel" data-slide-to="2"></li>         <li data-target="#mycarousel" data-slide-to="3"></li>     </ol>       <!-- wrapper slides -->   <div class="carousel-inner" role="listbox">     <div class="item active">       <img src="images/img1.jpg" alt="chania" class="carouselimages">       <div class="carousel-caption">       </div>     </div>       <div class="item">       <img src="images/img2.jpg" alt="flower" class="carouselimages">       <div class="carousel-caption">       </div>     </div>      <div class="item">       <img src="images/img3.jpg" alt="flower" class="carouselimages">       <div class="carousel-caption">       </div>     </div>   </div>      </div> </div> 

any appreciated, if tell me why images load upside down in browser big help.

in css file write:

header.carousel {     height: 60%; } 

it should work devices: mobile , desktop.

for space @ bottom of carousel write in css:

.carousel-inner {    margin-bottom:50px; /*adjust accordingly*/ } 

Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -