Bootstrap Navbar and Carousel not responsive - html

Question

I've been trying to get both my navbar brand logo and my carousel to be responsive but nothing seems to work. If i reduce the screen size, the brand image overflows over the navbar and the carousel just look elongated and awkward. My code is below.
CAROUSEL HTML
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class = "carousel">
<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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="#" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3></h3>
</div>
</div>
<div class="carousel-item">
<img src="#" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3></h3>
</div>
</div>
NAVBAR HTML
<nav class="navbar navbar-custom navbar-expand-lg fixed-top">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="" width="30" height="50" alt="">
</a>
...
</nav>

Answer 1

I tested your code by adding images and it looks like everything is configured correctly. But, you may possibly want to look at how you configured your CSS.
Try adding (the most recent minified CSS):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
Also, you may be mixing different bootstrap 4 and 3 elements (I see you used img-responsive for your logo - That is no longer used in Bootstrap 4 it is now img-fluid). If that's the case try this navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/50" class="d-block w-100" alt="..."></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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Codepen: https://codepen.io/brooksrelyt/pen/drPpeW

Answer 2

for carousel,
make your image responsive by adding img-fluid class in bootstrap 4 or img-responsive class in bootstrap 3
<div class="col-12">
<div id="imageCarousel" class="carousel slide" data-interval="2000">
<ul class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
<li data-target="#imageCarousel" data-slide-to="3"></li>
</ul>
<span class="carousel-control-prev-icon"></span>
<div class="carousel-inner" style="background-color:Gray">
<div class="carousel-item active" >
<img src="Images/jellyfish.jpg" class="img-fluid mx-auto d-block" width="75%" />
<div class="carousel-caption">
<h3>JellyFish</h3>
<p>JellyFish Image Description</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/Desert.jpeg" class="img-fluid mx-auto d-block" width="75%" />
<div class="carousel-caption">
<h3>desert</h3>
<p>Beutiful desert</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/lighthouse.jpeg" class="img-fluid mx-auto d-block" width="75%" />
<div class="carousel-caption">
<h3>Lighthouse</h3>
<p>Lighthouse Image Description</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/Penguin.jpg" class="img-fluid d-block" width="75%" />
<div class="carousel-caption">
<h3>Penguin</h3>
<p>Penguin Image Description</p>
</div>
</div>
</div>
<span class="carousel-control-next-icon"></span>
</div>
</div>

Answer 3

for navbar,
add navbar-dark bg-dark navbar class in the nav.
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar">
<a class="navbar-brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="nav-content" aria-expanded="true" aria-label="Toggle-navigation">
<img class="img-responsive" src="Images/img1.png" width="30" height="50" alt="">
</button>
</a>
</nav>