<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="featured" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#featured" data-slide-to="0" class="active"></li> <li data-target="#featured" data-slide-to="1"></li> <li data-target="#featured" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/background.png" alt="First slide"> <div class="carousel-caption d-none d-block d-flex align-items-center" style="height: 100%"> <div> <img class="img-fluid laptop" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/lcd.png" alt="laptop"/> </div> <div> <h3 class="product-caption-title">get the best version</h3> <p class="product-caption-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.</p> <button class="product-caption-button">get it now</button> </div> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/background.png" alt="First slide"> <div class="carousel-caption d-none d-block d-flex align-items-center" style="height: 100%"> <div> <img class="img-fluid laptop" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/lcd.png" alt="laptop"/> </div> <div> <h3 class="product-caption-title">get the best version</h3> <p class="product-caption-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.</p> <button class="product-caption-button">get it now</button> </div> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/background.png" alt="First slide"> <div class="carousel-caption d-none d-block d-flex align-items-center" style="height: 100%"> <div> <img class="img-fluid laptop" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/lcd.png" alt="laptop"/> </div> <div> <h3 class="product-caption-title">get the best version</h3> <p class="product-caption-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.</p> <button class="product-caption-button">get it now</button> </div> </div> </div> </div> <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#featured" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

html { font-size: 62.5%; } .carousel-item > img { /* fixes bootstrap 4 bug: bit.ly/bootstrap4-carousel */ width: 100%; height: 100%; } .laptop { /* width: 36%; */ } .product-caption-title, .product-caption-button { text-transform: uppercase; } .product-caption-button { color: white; border: 1px solid white; padding: 5px 15px; cursor: pointer; background-color: rgba(0,0,0,0.3); } h3 { margin-top: 12px; font-size: 1.2rem; } /** * Media Queries, including bootstrap4 breakpoints (<576px, >=576px, >=768px, >=992px, >=1200px) **/ @media screen and (min-width: 320px) { body::before { content: "320px"; font-family: Arial, sans-serif; color: green; position: fixed; top: 0; left: 0; font-weight: 700; margin: 5px; font-size: 1rem; z-index: 9999; } } @media screen and (min-width: 480px) { body::before { content: "480px"; color: goldenrod; } } @media screen and (min-width: 576px) { body::before { content: "576px"; color: maroon; } } @media screen and (min-width: 768px) { body::before { content: "768px"; color: orange; } } @media screen and (min-width: 992px) { body::before { content: "992px"; color: black; } } @media screen and (min-width: 1200px) { body::before { content: "1200px"; color: red; } } @media screen and (min-width: 1400px) { body::before { content: "1400px"; color: blue; } } @media screen and (min-width: 1600px) { body::before { content: "1600px"; color: gree; } } @media screen and (min-width: 1800px) { body::before { content: "1800px"; color: peru; } }