Responsive Media queries brand logo - css

I've made a full screen carousel on a responsive web-page. And added a navbar to the carousel. But this navbar have problems with responsiveness. When I shrink the web site (responsive), the navbar creats a problem about responsiveness: words are nested. How can I fix this? When I add something, I do not see anything. The latter under the carousel. Can you help me?
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.navbar {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
border-radius: 3px;
z-index: 1090;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://image.ibb.co/bQEXKz/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">ANASAYFA
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BİZ KİMİZ?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ÜRÜNLERİMİZ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">HİZMETLERİMİZ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">RESİM GALERİSİ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İLETİŞİM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-search"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide fixed-top " 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" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</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>
</header>
<div class="container">
<div class="hizmetlerimiz-top text-center">
<p>NELER YAPIYORUZ?</p>
<h3>HİZMETLERİMİZ</h3>
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="hizmetlerimiz-content">
<div class="row">
<div class="col-sm-3">
<div class="item-logo">
<img src="images/index.jpg" alt="">
</div>
<h4>RASCHEL ÖRME MAKİNALARI</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/cozum.jpg" alt="">
</div>
<h4>AYRIŞTIRICI ÇÖZGÜ</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/levent.jpg" alt="">
</div>
<h4>LEVENT ÇÖZGÜ</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
<i class="fas fa-plus"></i>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/boya.jpg" alt="">
</div>
<h4>BOYAHANE</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


Remove fixed-top class from the <div id="carouselExampleIndicators">.
Replace this:
<div id="carouselExampleIndicators" class="carousel slide fixed-top" data-ride="carousel">
With this:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

Related

Bootstrap Footer covering Body content

In the below example code, the footer is covering the body content.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
body {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light self-navbar text-light">
<a class="navbar-brand" href="http://localhost/project/new_version/"><img src="" alt="Website" title="Website" width="30" height="30" loading="lazy" /> Website</a>
<ul class="navbar-nav self-first-ul">
Slogan
</ul>
<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 self-second-ul">
<li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/919595951111"><i class="fab fa-whatsapp"></i> 9595951111</a></li>
<li class="nav-item"><a class="nav-link" href="mailto:email#site.com"><i class="far fa-envelope"></i> email#site.com</a></li>
<li class="nav-item"><a class="nav-link" href="tel:9595950000"><i class="fas fa-mobile-alt"></i> 9595950000</a></li>
</ul>
</div>
</span>
</nav>
<div class="container p-3 bg-white rounded">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade d-none d-md-block d-lg-none" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item ">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C6</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C8</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C5</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br /><br />
<div class="row">
<label for="Number">Search your transaction here <i class="far fa-hand-point-down far-blink"></i></label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Number" aria-describedby="basic-addon2" id="number" name="srch_num">
<div class="input-group-append">
<input type="submit" class="btn btn-success" id="submit-addon2" value="Search" />
</div>
</div>
</div>
<p>How to search specific transaction?</p>
</div>
<footer class="footer bg-primary">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Company Name</h3>
<p>Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph.
Some text to be shown. This will be a paragraph.</p>
</div>
<div class="col-md-3 ml-auto">
<h3>Links</h3>
<ul class="list-unstyled footer-links">
<li>Home</li>
<li>Categories</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Refund Policy</li>
</ul>
</div>
<div class="col-md-4">
<h3>Dial Sales & Support</h3>
<p><i class="fa fa-phone" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_phone.'" title="Dial '.$website_phone.'"> '.$website_phone.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_mobile.'" title="Dial '.$website_mobile.'">'.$website_mobile.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="https://wa.me/91'.$website_wamobile.'" title="Whatsapp '.$website_wamobile.'">'.$website_wamobile.'</a></p>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <strong></strong> '.$website_email.'</p>
<p><i class="fa fa-calendar-check-o" aria-hidden="true"></i><strong></strong> Monday to Saturday</p>
<p><i class="fa fa-clock-o" aria-hidden="true"></i> <strong></strong> 10am to 6pm</p>
</div>
</div>
<div class="row pt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
Website Slogan
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
What actually I want is, the footer should always be in the bottom. Like if there are long body content (scrollable) then footer should be in last. But if the content is very few, finishes in one/two line the footer should be in bottom last. No space after that.

Using Flexbox
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background:#fe5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p><button id="add">Add Content</button></p>
</div>
<footer class="footer">
Footer
</footer>

Boostrap 4 Carousel video controls disappear on right slide

I am using a combination of Images and Videos in Bootstrap Carousel 4. HTML5 Video controls work fine if I slide the carousel in left direction but if slide carousel in the right direction, video controls either disappear or move towards the extreme left.
I found a reference here Bootstrap Video Carousel Play button/ left & right indicators not appearing, but none of the provided answers work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="homeCarousel" class="col-lg-12 col-md-12 no-padding">
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="7000">
<div class="carousel-inner">
<div id="p_lt_ctl00_pageplaceholder_p_lt_ctl00_UniversalPageViewer_viewElem">
</div>
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-2" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-1" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-3" style="display:none;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<video controls="controls" width="1920" height="675" style="display:block;">
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class=""></li>
<li data-target="#demo" data-slide-to="3" class=""></li>
</ol>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>

You should avoid setting height and width in html. Setting those measurements from within css will give you much more predictable and flexible results.
.carousel-item img,
.carousel-item video {
width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="homeCarousel" class="col-lg-12 col-md-12 no-padding">
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="7000">
<div class="carousel-inner">
<div id="p_lt_ctl00_pageplaceholder_p_lt_ctl00_UniversalPageViewer_viewElem">
</div>
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-2" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-1" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-3" style="display:none;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<video controls="controls" style="display:block;">
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class=""></li>
<li data-target="#demo" data-slide-to="3" class=""></li>
</ol>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>

Bootstrap carousel inner images

My carousel is a 1200*500 dimension one. When I put an image of the same dimension , its not taking the full width of the carousel , just partially.
I tried using the "fill" class in my html code but its not working , I also tried with this css code:
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
Nothing seems to be working. Any help please
HTML Code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/18.jpg" alt="First slide">
<div class="carousel-caption">
<h3>
First slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control"
href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">Login</a><a class="btn btn-clear btn-sm btn-min-block"
href="http://www.jquery2dotnet.com/">Registration</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="push">
</div>
CSS code:
.main-text
{
position: absolute;
top: 80px;
width: 96.66666666666666%;
color: #FFF;
}
.btn-min-block
{
min-width: 170px;
line-height: 26px;
}
.btn-clear
{
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover
{
color: #000;
background-color: #FFF;
}
#carousel-example-generic
{
margin-top: 80px;
min-height: 100px;
min-width: 80%;
}

I did this example for you (it's a bit simple, but will help you).
The change I made, compared to yours, is that I am now adding the image as background in a DIV, not in an image element. Thus, we can control the display, regardless of the size the image has.
.carousel-img {
width: 100%;
height: 400px;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-img" style="background-image: url('http://lorempixel.com/1200/500/')"></div>
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-img" style="background-image: url('http://lorempixel.com/1200/500/')"></div>
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I have helped you in any way

Navbar Overlaps Carousel

I have a problem.
I made a change on a website of mine, I wanted to incorporate a full-width carousel on my website. Instead of a jumbotron.
The problem is my navbar is overlapping the jumbotron area, the caption and everything.
Here is my html:
<div class="nav-area">
<div class="container"> <!-- Start Container -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="dentalclean logo" src="images/logo_2x.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li class="active">Pagina Inicial <span class="sr-only">(current)</span></li>
<!-- <li>Contactos</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- End Container -->
</div>
<span itemscope itemtype="http://schema.org/LocalBusiness">
<div class="hero-section"> <!-- Start Hero Section -->
<div id="slider_dentalclean" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider_dentalclean" data-slide-to="0" class="active"></li>
<li data-target="#slider_dentalclean" data-slide-to="1" class=""></li>
<li data-target="#slider_dentalclean" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="Dentista Leiria" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>LOOOOOOOOOOOOOOOOOOOL</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img alt="Second slide" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img alt="Third slide" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
</div>
I apologize for the lack of organization.
I'm using sass and bootstrap by the way.
Here is the resulting problem: https://www.dropbox.com/s/bigm6291gmwgcf6/Screenshot%202015-04-06%2018.46.43.png?dl=0
Thank you very much, I searched for all the answers here, but I couldn't find one that works.
Fiddle: https://jsfiddle.net/yjbjvtx2/
CSS:
.nav-area{
position:absolute;
top: 0;
}
#slider_dentalclean{
margin-top: 0;
z-index: -1;
}
I have found the exact thing I want in my website: http://getbootstrap.com/examples/carousel/
But I don't understand how they make the carousel caption not go behind the navbar.

Why not just add a top margin to your .hero-section?
.hero-section{
margin-top:5em;
}
Or remove the negative margin on the #slider_dentalclean?
#slider_dentalclean{
/*margin-top: -73px;*/
z-index: -1;
}
I pulled in the carousel.CSS from the example you mentioned. Make sure you are including the bootstrap.js too. I updated the fiddle below with these two files included and put one of your slides in the template.
I am not 100% sure it works as you expect, as I cannot see dropbox files, so your image doesn't show up. Maybe add one to imgr or substitite a demo image from google or getty.
https://jsfiddle.net/joshvito/o8zqyt06/ UPDATED

class "slide" not found in twitter bootstrap 3.2

This question has been asked before, but did not help me.
slide class not found in carousel in Twitter Bootstrap 3
Where can I find this slide class? And if its not available, how can I get my carousel working without it?
Current situation: Its not showing anything on the webpage. For reference I have copied the code from here: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
<html>
<head>
<title>C-Cube</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.png" alt="Chania">
</div>
<div class="item">
<img src="2.png" alt="Chania">
</div>
<div class="item">
<img src="3.png" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- carousel div end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

Try using this code - Simply replace the content (img's and text etc)
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->

Resources