stackoom
  简体   繁体   中英

How to create a responsive Bootstrap carousel with static hero header text contained in a container element?

 原文  2018-09-27 02:18:32  4   1    javascript/ html/ css/ twitter-bootstrap/ bootstrap-4

Question

I am trying to create a responsive Bootstrap carousel with a static hero header that stays the same when the carousel images change. The hero header has to be left-aligned to a responsive bootstrap container element as well as vertically centered inside the bootstrap carousel. I have tried searching for solutions but have come up empty. I have also tried using an "overlay" element with position: absolute, however, that doesn't allow me to left-align the hero header inside the bootstrap container element nor does it allow me to vertically align the hero header to the bootstrap carousel. This is what I want it to look like. This is what I want it to look like.

This is what I have so far. 

 .heroOverlay { z-index: 12; position: absolute; /* takes div out of document flow */ top: auto; /* The distance between the div with the top of document */ left: 0px; /* Make the div full width */ right: 0px; /* Make the div full width */ margin: auto auto 0 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <header> <div class="heroOverlay"> <div class="container"> <div class="jumbotron text-right bg-transparent"> <h1 class="display-4">Chinese Take-In</h1> <p class="lead">Take-in Ingredients, Take-out Memories</p> <hr class="my-4"> <a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a> </div> </div> </div> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </header> <!-- JQuery & JQuery UI --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <!-- Bootstrap 4 JavaScript --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Any help would be greatly appreciated. Thanks!

1 answers

solution1
 1  2018-09-27 11:16:52

Welcome to stack overflow...

Check out the sample code

for smaller sizes, you may have to spell out the exact size of the fonts... similarly for very large screens, best for you to spell out the exact size of the fonts... because the fonts with units vw are dynamic with regards to size. Media queries will help you take care of these extreme cases.

HTML : 

 .heroOverlay { z-index: 12; position: absolute; top: 30%; left: 0px; right: 0px; margin: auto auto 0 10%; width: 80%; background: rgba(240, 255, 255, .5); padding: 30px 0; } .heroOverlay h1 { font-size: 5.5vw; } .heroOverlay p { font-size: 3vw; } .heroOverlay a { font-size: 2vw; padding: .5vw 1vw; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <header> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="heroOverlay"> <div class="container"> <div class=" text-left bg-transparent"> <h1 class="display-4">Chinese Take-In</h1> <p class="lead">Take-in Ingredients, Take-out Memories</p> <a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a> </div> </div> </div> <div class="carousel-item active"> <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </header> <!-- JQuery & JQuery UI --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <!-- Bootstrap 4 JavaScript --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to create differently responsive carousel using bootstrap jQuery / Bootstrap carousel container responsive How do I create a responsive carousel embedded card using Bootstrap? Keeping a bootstrap carousel as a static background with text on top Hero banner carousel with Gatsby + Contentful + react responsive carousel Bootstrap carousel is not responsive Bootstrap responsive carousel How to create carousel div bootstrap How to create this bootstrap carousel of iframes? how to create Dyamic React responsive carousel
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM