Mike
Reputation: 21
Bootstrap 4 carousel - Responsive Behavior
I am trying to create a full screen bootstrap 4 carousel with transparent navbar on top. The below code works.
HTML:
<!doctype html>
<html lang="ro">
<!-- START head -->
<head>
<!-- START meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- END meta -->
<!-- START CSS -->
<link rel="stylesheet" href="resources/vendor/bootstrap-4.0.0/bootstrap.min.css">
<link rel="stylesheet" href="resources/vendor/bootstrap-4.0.0/bootstrap-reboot.min.css">
<link rel="stylesheet" href="resources/vendor/fontawesome-5.0.4/css/fontawesome-all.min.css">
<link rel="stylesheet" href="resources/custom/css/index.css">
<!-- END CSS -->
</head>
<body>
<!-- START navbar -->
<nav class="navbar navbar-expand-sm container navbar-dark fixed-top">
<a class="navbar-brand" href="#">SMART RECRUIT</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="#">Despre noi</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Servicii
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Pentru candidati</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Pentru companii</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Parteneri</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- END navbar -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="3000">
<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">
<div style="max-height: 100vh; width: 100%;">
<img class="d-block img-fluid w-100" src="resources/custom/img/1.jpg" alt="First slide">
</div>
</div>
<div class="carousel-item">
<div style="max-height: 100vh; width: 100%;">
<img class="d-block w-100" src="resources/custom/img/2.jpg" alt="Second slide">
</div>
</div>
<div class="carousel-item">
<div style="max-height: 100vh; width: 100%;">
<img class="d-block w-100" src="resources/custom/img/3.jpg" alt="Third slide">
</div>
</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>
<!-- START JAVASCRIPT -->
<script src="resources/vendor/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="resources/vendor/tether-1.3.3/tether-1.3.3.min.js"></script>
<script src="resources/vendor/bootstrap-4.0.0/bootstrap.min.js"></script>
<!-- END JAVASCRIPT -->
</body>
</html>
However, there are some issues: - force image to be full screen. - resize will result in different heights for images.
Is there any option to have the carousel full screen on large screen and upon resize to have the width of all images equals without interfering with the responsiveness?
Upvotes: 2
Views: 2668
Answers (2)
Steve K
Reputation: 9055
instead of using images inside the carousel-item set each image as a background of the carousel item div and set the background-size to cover.
Add the following css:
.carousel-item{
height:100vh;
background-size:cover !important;
background-position:center !important;
}
And then here is your revised html:
<html lang="ro">
<!-- START head -->
<head>
<!-- START meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- END meta -->
<!-- START CSS -->
<link rel="stylesheet" href="resources/vendor/bootstrap-4.0.0/bootstrap.min.css">
<link rel="stylesheet" href="resources/vendor/bootstrap-4.0.0/bootstrap-reboot.min.css">
<link rel="stylesheet" href="resources/vendor/fontawesome-5.0.4/css/fontawesome-all.min.css">
<link rel="stylesheet" href="resources/custom/css/index.css">
<!-- END CSS -->
</head>
<body>
<!-- START navbar -->
<nav class="navbar navbar-expand-sm container navbar-dark fixed-top">
<a class="navbar-brand" href="#">SMART RECRUIT</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="#">Despre noi</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Servicii
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Pentru candidati</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Pentru companii</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Parteneri</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- END navbar -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="3000">
<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" style="background:url('http://lorempixel.com/1920/1000/city/')">
</div>
<div class="carousel-item" style="background:url('http://lorempixel.com/1920/1000/food/')">
</div>
<div class="carousel-item" style="background:url('http://lorempixel.com/1920/1000/animal/')">
</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>
<!-- START JAVASCRIPT -->
<script src="resources/vendor/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="resources/vendor/tether-1.3.3/tether-1.3.3.min.js"></script>
<script src="resources/vendor/bootstrap-4.0.0/bootstrap.min.js"></script>
<!-- END JAVASCRIPT -->
</body>
</html>
Upvotes: 3
user8998234
Reputation:
try to add height to img:
style="height: 100vh"
it will make image full screen on different screen sizes
hope it helps!
Upvotes: 3
Related Questions
- BootStrap Carousel resizing itself
- Responsive images in bootstrap carousel
- Bootstrap responsive carousel
- carousel resizing
- Resize carousel bootstrap 4
- Bootstrap 4 Carousel responsive (image and text)
- how to make bootstrap 4 carousel responsive?
- Bootstrap 4 carousel responsive issue in chrome
- Bootstrap 4 carousel
- Responsive Bootstrap Carousel