this is simple html code together with bootstrap carousel which have three images to slide , then added an overlay to make carousel caption more attractive ! it works fine on large screen size but on small screen size including mobile phone(smartphones) the height of overlay is increased than the height of carousel !! how to make them have the same height even on a small screen size?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"rel="stylesheet">
<link href="phcoding/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght#400;700&display=swap" rel="stylesheet">
<title>| Catering Services |</title>
<style>
.overlay {
position: relative;
width: 100%;
min-height:100%;
background-color: #080d15;
opacity: .5;
z-index:1000;
}
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
max-height: 100%;
}
.carousel-caption {
position: absolute;
right: 15%;
top: 50%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
z-index:1000
}
</style>
</head>
<body>
<section id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand">Catering</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 justin" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#service">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#sample">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
</div>
</ul>
</nav>
</section>
<!---carousel--->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_03_hd_pictures_167556.jpg" alt="First slide">
<div class="carousel-caption">
<h5>Bringing the world to your table
</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_05_hd_picture_167554.jpg" alt="Second slide">
<div class="carousel-caption">
<h5>Creating memories that last a lifetime</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/fruit_juice_and_fruit_stock_photo_167154.jpg" alt="Third slide">
<div class="carousel-caption">
<h5>Filling every occasion with great food and service.</h5>
</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>
<script src="jsplugins/js/jquery.min.js"></script>
<script src="jsplugins/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Make the all images to same height as
height:100%;
Instead of overlay to low the image brightness you can also use the Filter CSS property to images
filter: brightness(0.5);
The output will be same as overlay
You can use overlay for text over the carousel images
Can you please check the below code link? Hope it will work for you. You need to just give height: 100%; to .overlay and .carousel-item img instead of min-height:100%; or max-height:100%;
Please refer to this link: https://jsfiddle.net/yudizsolutions/wyh7zvt9/5/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link href="phcoding/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght#400;700&display=swap" rel="stylesheet">
<title>| Catering Services |</title>
<style>
.overlay {
position: relative;
width: 100%;
height: 100%;
background-color: #080d15;
opacity: .5;
z-index: 1000;
}
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
height: 100%;
}
.carousel-caption {
position: absolute;
right: 15%;
top: 50%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
z-index: 1000
}
</style>
</head>
<body>
<section id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand">Catering</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 justin" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#service">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#sample">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
</ul>
</div>
</nav>
</section>
<!---carousel--->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_03_hd_pictures_167556.jpg" alt="First slide">
<div class="carousel-caption">
<h5>Bringing the world to your table
</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_05_hd_picture_167554.jpg" alt="Second slide">
<div class="carousel-caption">
<h5>Creating memories that last a lifetime</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/fruit_juice_and_fruit_stock_photo_167154.jpg" alt="Third slide">
<div class="carousel-caption">
<h5>Filling every occasion with great food and service.</h5>
</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>
</div>
<script src="jsplugins/js/jquery.min.js"></script>
<script src="jsplugins/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Related
I have a problem with my html website. I am currently using Bootstrap-5. When I change the slides using carousel in website, there is white blanks keep appearing. How can I deal with this problem?
Here is my code!
HTML
<!doctype html>
<html lang="kr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>P&P</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">P & P</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav m-auto my-2 my-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Some Script
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Some script</a></li>
<li><a class="dropdown-item" href="#">Some script</a></li>
<li><a class="dropdown-item" href="#">Some script</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active"href="#">Some script</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Some script</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Some script</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="lemon_wp.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="lemon_wp.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>👑</h5>
<h6>Some script<br>Other script</h6>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<section class="babies">
<div class="container py-5">
<div class="row py-5">
<class class="col-lg-5">
<h1></h1>
</class>
</div>
</div>
</section>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar-brand{
font-size: 2rem;
color: black;
}
.navbar-brand:hober{
color: black;
}
.nav-link{
margin-right: 10px;
margin-left: 10px;
color: black;
text-transform: uppercase;
}
.nav-link:hover{
color: black;
}
.main{
background-color: lemonchiffon;
background-size: cover;
height: 100vh;
width: 100%;
background-position: 50% 50%;
}
.main h1{
font-size: 4rem;
font-weight: 700;
/*fontfamiliy*/
}
.absolute-div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.item {
position:relative;
}
.carousel-item{
height: 100vh;
min-height: 300px;
background: no-repeat scroll center scroll;
-webkit-background-size: cover;
background-size: cover;
}
.carousel-item::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.carousel-caption{
bottom: 35%;
padding-left: 100px;
padding-right: 100px;
color: black;
}
.carousel-caption h5{
font-size: 100px;
font-weight: 700;
}
.carousel-caption h6{
font-size: 60px;
font-weight: 600;
}
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
.carousel {
width:100% !important;
overflow: hidden !important;
right:0 !important;
}
.carousel-inner{
overflow:visible
}
I cannot really find the problem in my code.
The carousel example that I use is from the bootstrap official site.
I don't know why this is happening but you can try this it works on your code
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="a.lpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="b.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="c.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
and you don't need this code on your css you have it by default in bootstrap
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
dear when you add carousel slider it auto append white arrow for slider movement to left right its part of carousel default css and in your css you had also added the arrow by the code given below
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
try to comment it so it will remove the black arrow
or use carousal javacript method to remove the black arrow
I have been trying for hours to get my navbar to fill the width of the screen but I have had no luck. I have tried setting padding to 0, !important, width 100% but nothing is working. Any help would be appreciated.
.carousel-item {
height: 100vh;
min-height: 300px;
}
.navbar-nav a {
font-size: 18px;
}
.navbar-nav {
text-align: center;
background-color: #bfd9d7;
width: 100%;
padding: 0%;
}
.w-100 {
height: 100vh;
}
<!doctype html>
<html lang="en">
<head>
<title>Scot Living</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Furniture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dining</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bedroom</a>
</li>
</ul>
</div>
</nav>
<div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
<li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
<li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="First slide" class="d-block w-100" src="Pictures/bedroom.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated bounceInRight" style="animation-delay: 1s">Bedroom</h5>
<p class="animated bounceInLeft" style="animation-delay: 2s">Bedroom Furniture</p>
<p class="animated bounceInRight" style="animation-delay: 3s">Shop Bedroom</p>
</div>
</div>
<div class="carousel-item">
<img alt="Second slide" class="d-block w-100" src="Pictures/diningroom.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated slideInDown" style="animation-delay: 1s">Dining Room</h5>
<p class="animated fadeInUp" style="animation-delay: 2s">Dining room furniture</p>
<p class="animated zoomIn" style="animation-delay: 3s">Shop Dining</p>
</div>
</div>
<div class="carousel-item">
<img alt="Third slide" class="d-block w-100" src="Pictures/carpet.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated zoomIn" style="animation-delay: 1s">Flooring</h5>
<p class="animated fadeInLeft" style="animation-delay: 2s">Wide range of flooring</p>
<p class="animated zoomIn" style="animation-delay: 3s">Shop Flooring</p>
</div>
</div>
</div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" data-slide="next"
href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
</div>
<!-- Optional JavaScript -->
<script type="text/javascript" src='script.js'>
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to get the blue navbar to fill out to the edge of the screen on both sides:
remove the padding from <nav class="navbar navbar-expand-lg navbar-light fixed-top border "> via p-0 class.
It becomes : <nav class="navbar navbar-expand-lg navbar-light fixed-top border p-0">
aside note : w-100 is already a bs4 classname and sets width to 100% , not sure it is a good idea to add height:100vh to it , use a custom classname for a custom style ;) .
Add this to your CSS-Code:
* {
margin: 0;
padding: 0;
}
When you have added this, everything should no longer have so much distance.
If it doesn't work then please let me know.
Did you add this code snippet at the top of CSS
*{
margin : 0;
padding: 0;
}
Remove padding form "navbar"
.navbar {
padding: 0;
}
I tried to include carousel into my website but no success so far. I googled it and any answer is not helping. Mainly people had problem with not including jQuery.js or bootstrap.js. Both included.
Do I have to call carousel in separate js file? Bootstrap docs says that I do not have to.
Where is the mistake? Thanks for help!
HTML/CSS:
#import "adress-row.css";
#import "offer-head.css";
#import "navbar.css";
.carouselTop {
position: absolute;
width: 100%;
top: 0;
}
.navbar {
background-color: white;
opacity: 65%;
font-weight: 600;
color: black;
}
.toptop {
position: relative;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="keywords" content="klimatyzacja, pompa ciepła, pompy ciepła, smart home, cctv, alarm, security">
<meta name="author" content="Dawid Tandos">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;1,200&display=swap" rel="stylesheet">
<!-- Font awsome -->
<!-- <script src="https://kit.fontawesome.com/50e5d27fce.js" crossorigin="anonymous"></script> -->
<title>Technologia dla domu</title>
</head>
<body>
<header>
<!-- Offer header -->
<div class="off-head">
<div class="row">
<div class="col-4" id="left">
<p>
Oferta klimatyzacji od ręki!
</p>
</div>
<div class="col-4">
</div>
<div class="col-4" id="right">
<p>
Umów się na bezpłatną konsultację!
</p>
</div>
</div>
</div>
<!-- Adress row -->
<div class="container-fluid">
<div class="row row-cols-auto top-row">
<div class="col-sm adress-row">
<div class="row row-cols-1">
<div class="col-sm adress-row hours1">
<img class="icons-top" src="assets/ico/clock.png">
</div>
<div class="col-sm adress-row hours">
<p>
Pn - Pt: <br>
Sobota:
</p>
</div>
<div class="col-sm adress-row hours2">
<p>
<span id="bold">7:00 - 17:00</span><br>
<span id="bold">7:00 - 14:00</span>
</p>
</div>
</div>
</div>
<div class="col-sm adress-row">
<div class="row">
<div class="col-sm adress-row hours1">
<img class="icons-top" id="env" src="assets/ico/envelope.png">
</div>
<div class="col-sm adress-row">
E-mail: <br>
tdd#gmail.com
</div>
</div>
</div>
<div class="col-sm adress-row">
<div class="row">
<div class="col-sm adress-row hours1">
<img class="icons-top" id="env" src="assets/ico/headphones.png">
</div>
<div class="col-sm adress-row">
Telefon:<br>
123 456 789
</div>
</div>
</div>
</div>
</div>
<div class="toptop">
<!-- NAVBAR -->
<nav class="navbar sticky-top navbar-expand-lg navbar-light navbar-no-bg" id="top-navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo" src="assets/images/logo.png">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<img class="icons-navbar" src="assets/ico/house.png">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O nas</a>
</li>
<li class="nav-item dropdown px-3">
<a class="nav-link dropdown-toggle" href="#" id="navOfertyMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Oferta
</a>
<ul class="dropdown-menu" aria-labelledby="navOfertyMenu">
<li><a class="dropdown-item" href="#">Klimatyzacja</a></li>
<li><a class="dropdown-item" href="#">Pompy ciepła</a></li>
<li><a class="dropdown-item" href="#">Systemy alarmowe</a></li>
<li><a class="dropdown-item" href="#">Smart home</a></li>
</ul>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Katalogi i cenniki</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Poradnik</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Kontakt</a>
</li>
<button type="button" class="btn btn-danger px-3 customButton" href="#">Szybka wycena</button>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
<li data-target="#carouselTop" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/images/backgrounds/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/backgrounds/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/backgrounds/3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselTop" 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="#carouselTop" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<!-- JavaScrpit file -->
<script src="assets/js/scripts.js"></script>
<!-- jQuery and Bootstrap.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
Try putting your JavaScript file after/below the jQuery and Bootstrap files and ensure you have it in the order
<!--jquery, popper.js, bootstrap.js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
​crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
<!--jquery, popper.js, bootstrap.js-->```
You are using the bootstrap 4 make sure that your code for your carousel is in bootstrap 4 because there is new bootstrap which is bootstrap 5. If your carousel is not working try to add this:
This is for bootstrap 5
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
This is for bootstrap 4
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
try to put this on above the tags
</body>
in order for it to work
You have to use those script. Hope your problem will be solved
<!-- jQuery and Bootstrap.js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
​crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
You forget to add js libs and code of carsoul in js file
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Technologia dla domu</title>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;1,200&display=swap" rel="stylesheet">
<!-- Font awsome -->
<!-- <script src="https://kit.fontawesome.com/50e5d27fce.js" crossorigin="anonymous"></script> -->
</head>
<body>
<header>
<!-- Offer header -->
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
<li data-target="#carouselTop" 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/6335/man-coffee-cup-pen.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/257897/pexels-photo-257897.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/6335/man-coffee-cup-pen.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Second slide">
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</body>
</html>
.carouselTop {
position: absolute;
width: 100%;
top: 0;
}
.navbar {
background-color: white;
opacity: 65%;
font-weight: 600;
color: black;
}
.toptop {
position: relative;
}
$('.carousel').carousel();
I have been trying to figure out why my navbar doesn't expand itself when in mobile view, rather the menu ends up occupying the following section. I have tried playing around with static/fixed navbars, adding padding to the body, to no avail.
I'm also not sure about where I should be including my container-fluid. I've seen examples of it wrapping the entire navbar, while others only wrap the brand.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Coins 4 Clothes</title>
<!-- Stylesheets and libraries -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<!-- Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-md-brand" href="">
<img class="img-fluid c4clogo" src="images/output-onlinepngtools.png" alt="Coins 4 Clothes logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Log in</a>
</li>
</ul>
</div>
</Nav>
<hr class="hr-nav"></hr>
<!-- Carousel section -->
<div id="carouselExampleIndicators" class="carousel" 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">
<div class= "headings-slide1">
<h2 class="headings-slides">De-clutter your closet.</h3>
<h3 class="headings-slides">Help the needy.</h3>
<h3 class="headings-slides">Earn Bitcoins.</h3>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="First slide">
</div>
<div class="carousel-item">
<div class= "headings-slide2">
<h3 class="headings-slides">De-clutter your closet.</h3>
<h2 class="headings-slides">Help the needy.</h2>
<h3 class="headings-slides">Earn Bitcoins.</h3>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<div class= "headings-slide3">
<h3 class="headings-slides">De-clutter your closet.</h3>
<h3 class="headings-slides">Help the needy.</h3>
<h2 class="headings-slides">Earn Bitcoins.</h2>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="Third slide">
</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>
</div>
hello world
</body> ```
and here is the CSS
Below is the CSS:
font-size: 30px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
/* Navigation Bar */
.navbar {
background-color: #FFFFFF;
text-align: center;
height: 70px;
}
.navbar-md-brand {
height: 70px;
width: 276px;
padding-top: 10px;
}
.nav-item {
padding: 18px;
}
.nav-link {
font-family: "ubuntu",sans-serif;
font-weight: 500;
font-size: 1.2rem;
}
.navbar-light .navbar-nav .nav-link .navbar-toggler-icon {
color: #21bf73;
}
/* Carousel */
.carousel-control-prev {
margin-left: -100px;
}
.carousel-control-next {
margin-right: -100px;
}
/* Download Buttons*/
.download-button {
margin: 5% 3% 5% 0;
}
.headings-slides{
padding-left: 20px;
}
.hr-slides{
margin-top: 20px;
margin-left: 30px;
}
.hr-nav{
margin-top: inherit;
border-top: 3px solid black;
}
h2{
color: #478559;
font-family: "ubuntu",sans-serif;
}
There are a couple of ways to fix this. Since you are using a custom .navbar-md-brand, the simplest way is to set it like this:
.navbar-md-brand {
height: 70px;
max-width: 276px;
flex-grow: 1; /* let it "spread" until max-width */
padding-top: 10px;
}
For an ideal scenario, you need to check these breakpoints and "rewrite" .navbar-md-brand for corner cases, if you need
https://getbootstrap.com/docs/4.4/layout/overview/#responsive-breakpoints
Or you can stay with the "official" way of doing things and use some of the existing classes like class="navbar-brand mb-0" https://getbootstrap.com/docs/4.4/components/navbar/#brand
Either way, hope these tips help you.
I'm making a web page and I'm facing this issue, I have a nav bar which is fixed and working fine. I have two sections for now and when scrolled first section works fine but other one is overlapping the Nav which I'll show it to you via JSFiddle.
What I have tried so far is that to make the .items display as block but didn't get the solution.
Tried using position as absolute but it affected my view. So for now everything is working fine except this one that the section 2 which testimonial-one is overlapping the header the first section is working fine.
I have also tried using this nav-fixed-top in my bootstrap nav but it didn't work out.
.navbar { padding: 26px !important; position: fixed!important; width: 100%}
.navbar a img {width: auto; height: 45px}
body{ padding-top: 0px; margin: 0; padding: 0; }
.home-page {background-image: url("assets/images/home_image.jpg"); background-size: cover; padding-bottom: 125px; padding-top: 0; background-repeat: no-repeat;}
.home-page H1 {font-family: "HelveticaNeueThin"; padding-top: 219px; font-size: 52px!important; color: #616161}
.testimonial-one {padding: 0}
.testimonial-one .content-offset {
position: relative;
min-height: 400px;
}
.testimonial-one {padding: 0}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just an image -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#home" style="border-bottom: none">
<img src="img" alt="TESTING">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-lg-2"></div>
<div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#page-1">HELLO</a>
<a class="nav-item nav-link" href="#">WORLD</a>
<a class="nav-item nav-link" href="#">HOW</a>
<a class="nav-item nav-link" href="#">ARE</a>
<a class="nav-item nav-link" href="#">YOU</a>
<a class="nav-item nav-link" href="#">FINE</a>
</div>
</div>
</div>
</nav>
<section class="home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
<section class="testimonial-one container" id="page-1">
<div class="content-offset">
<img src="assets/images/left.png" alt='' class="prev"/>
<img src="assets/images/right.png" alt='' class="next"/>
<div class="container">
<div class="items">
<div><p style="font-size:80px">Hello</p></div>
<div><p style="font-size:80px">Hello</p></div>
</div>
</div>
</div>
</section>
</body>
</html>
This is my JSFiddle link, kindly help me. Thanks. Link : JSFiddle Work
You can solve this by adding a z-index to your navbar. This will place the navbar on a "higher layer" than the rest of the content.
.navbar { padding: 26px !important; position: fixed!important; width: 100%; z-index: 10;}
.navbar a img {width: auto; height: 45px}
body{ padding-top: 0px; margin: 0; padding: 0; }
.home-page {background-image: url("assets/images/home_image.jpg"); background-size: cover; padding-bottom: 125px; padding-top: 0; background-repeat: no-repeat;}
.home-page H1 {font-family: "HelveticaNeueThin"; padding-top: 219px; font-size: 52px!important; color: #616161}
.testimonial-one {padding: 0}
.testimonial-one .content-offset {
position: relative;
min-height: 400px;
}
.testimonial-one {padding: 0}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just an image -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#home" style="border-bottom: none">
<img src="img" alt="TESTING">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-lg-2"></div>
<div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#page-1">HELLO</a>
<a class="nav-item nav-link" href="#">WORLD</a>
<a class="nav-item nav-link" href="#">HOW</a>
<a class="nav-item nav-link" href="#">ARE</a>
<a class="nav-item nav-link" href="#">YOU</a>
<a class="nav-item nav-link" href="#">FINE</a>
</div>
</div>
</div>
</nav>
<section class="home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
<section class="testimonial-one container" id="page-1">
<div class="content-offset">
<img src="assets/images/left.png" alt='' class="prev"/>
<img src="assets/images/right.png" alt='' class="next"/>
<div class="container">
<div class="items">
<div><p style="font-size:80px">Hello</p></div>
<div><p style="font-size:80px">Hello</p></div>
</div>
</div>
</div>
</section>
</body>
</html>