for some reason on both sides of my screen on the header I have white space. I have tried to close the margin and padding but it doesn't work. As well, how do you center links on a bootstrap navbar. I tried the bootstrap commands and custom but it won't center.
<!DOCTYPE html>
<html>
<head>
<!-- JavaScript compile -->
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>VE Website</title>
<meta charset="UTF-8">
<meta name="author" content="Joaquin Frommer">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html,body{
height: auto;
margin:0;
padding:0;
}
.carousel,.item,.active{
height: auto;}
.carousel-inner{
height: auto;}
.img{
height:auto; width:100%}
.navbar-default {
position: absolute;
left: 0;
right: 0;
width: 100%;
background-color: #e5b984;
z-index: 99999;
}
.navbar {
min-height: 20px;
}
.navbar-brand {
height: 20px; line-height: 20px;
}
.navbar-default .navbar-nav > li > a {
color: #703d41;
}
.nav-item:hover{
background-color: #fff0bb;
color: #703d41;
}
.nav-item{
font-size: 14px;
padding-left: 85px;
padding-right: 85px;
}
.navbar-nav li a {
line-height: 20px;
}
.navbar-header a {
line-height:20px;
}
.carousel{
position: relative;
}
header{
background-image: url(skyline.jpg);
left:0;
right:0;
width:100%;
}
h1{
margin:0;
padding:0;
right:0;
left:0;
width: 100%;
}
</style>
<script>
$('.carousel').carousel({
interval: 10000,
pause: "false",
wrap: "true"
});
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$item.eq(0).addClass('active');
});
</script>
<div class="container-fluid body">
<header>
<center>
<h1 class="img-responsive"><img style="margin: 0; padding: 0; background-position: center center;" src="logoNomad.png" height="97" width="97"></h1>
</center>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="fixedstuff">
<ul class="nav navbar-nav">
<li class="nav-item"><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="#">CHARITY</a></li>
<li class="nav-item"><a class="nav-link"href="#">RESERVE</a></li>
<li class="nav-item"><a class="nav-link"href="#">ACOUNTS</a></li>
</ul>
</div>
</div>
</div>
</nav>
<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>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image2.jpg" data-color="lightblue" alt="First Image" class="img-responsive">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="image1.jpg" data-color="firebrick" alt="Second Image" class="img-responsive">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700" data-color="firebrick" alt="Second Image" class="img-responsive">
<div class="carousel-caption">
<h3>Third image Image</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700" data-color="firebrick" alt="Second Image" class="img-responsive">
<div class="carousel-caption">
<h3>Fourth Image</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700" data-color="firebrick" alt="Second Image" class="img-responsive">
<div class="carousel-caption">
<h3>Fifth Image</h3>
</div>
</div>
</div>
<!-- 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>
</div>
</html>here
Its because container-fluid class adds padding of 15px on both sides.
just create a nopadding class and add besides the container-fluid class.
.nopadding{
padding-left:0;
padding:right:0;
}
<div class="container-fluid nopadding">...</div>
as for centering the links add bootstrap's "text-center" class to your links, make sure you use media queries else they will centered for all devices
<li class="nav-item"><a class="nav-link text-center" href="#">HOME</a></li>
Related
I am using this as a way to learn how to make carousel with thumbnails, I am doing exactly what they have done(or I think I have) but clicking on thumbnails is not working and neither are the indicators. The only thing I have changed is the cdn for bootstrap using a new version. I tried using other cdn as well but can't seem to get it working.
<!doctype html>
<html lang="en">
<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.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
<!-- slides -->
<div class="carousel-inner">
<div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
<div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
<div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
<div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
</div> <!-- Left right --> <a class="carousel-control-prev" href="#custCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#custCarousel" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> <!-- Thumbnails -->
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
</ol>
</div>
</div>
</div>
</div>
<style>
body {
background-color: #7B1FA2
}
.container {
margin-top: 100px;
margin-bottom: 100px
}
.carousel-inner img {
width: 100%;
height: 100%
}
#custCarousel .carousel-indicators {
position: static;
margin-top: 20px
}
#custCarousel .carousel-indicators>li {
width: 100px
}
#custCarousel .carousel-indicators li img {
display: block;
opacity: 0.5
}
#custCarousel .carousel-indicators li.active img {
opacity: 1
}
#custCarousel .carousel-indicators li:hover img {
opacity: 0.75
}
.carousel-item img {
width: 80%
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/boosted/5.1.3/js/boosted.bundle.min.js" integrity="sha512-m4KgsHOciE4s/A5Z1xqQDBmWy/pKpI8RbrsX6r/vl6L/NZ/P2PHtleVfOa3ChD1JBBfyqTFbnCJbcLGTis4QLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
Figured it. I was using old bootstrap syntax data-slide-to instead of data-bs-slide-to.
Your error seems to be something with the JS not loading correctly. In the bottom of your code, you are using the wrong JS "Boosted" instead of Bootstrap.
<script src="https://cdnjs.cloudflare.com/ajax/libs/boosted/5.1.3/js/boosted.bundle.min.js" integrity="sha512-m4KgsHOciE4s/A5Z1xqQDBmWy/pKpI8RbrsX6r/vl6L/NZ/P2PHtleVfOa3ChD1JBBfyqTFbnCJbcLGTis4QLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Replace that tag with the correct Bootstrap JS from a CDN like this:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
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've implemented a bootstrap carousel with thumbnails on my website but the thumbnail size is off, they are way too small.
I fiddled some with the CSS code within the foto_new page. But my knowledge of CSS is not enough to get this working.
Here is my page code:
<head>
<title>Reis Foto"s</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/lo.css">
<link rel="stylesheet" href="css/boots.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
#myCarousel .list-inline {
white-space:nowrap;
overflow-x:auto;
}
#myCarousel .carousel-indicators {
position: static;
left: initial;
width: initial;
margin-left: initial;
}
#myCarousel .carousel-indicators > li {
<!--width: initial;-->
<!--height: initial;-->
width: 200px;
height: 50px;
text-indent: initial;
}
<!--#myCarousel .carousel-indicators li img {-->
<!--display: block;-->
<!--opacity: 0.5;-->
<!--}-->
#myCarousel .carousel-indicators li.active img {
opacity: 1;
}
#myCarousel .carousel-indicators li:hover img {
opacity: 0.75;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!--Ik gebruik hieronder alleen het middiv omdat dat de enige info is die ik wil vervangen-->
<div class="col-md-12" id="middiv" style="background-color: rgba(255, 255, 255, 0.1)">
<div id="myCarousel" class="carousel slide" data-ride="carousel" align="center">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/fotos/auto.jpg" alt="Los Angeles" style="width:80%;">
</div>
<div class="carousel-item">
<img src="/fotos/robot.jpg" alt="Chicago" style="width:80%;">
</div>
<div class="carousel-item">
<img src="/fotos/vrachtwagen.jpg" alt="New york" style="width:80%;">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="/fotos/auto.jpg" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="/fotos/robot.jpg" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="/fotos/vrachtwagen.jpg" class="img-fluid">
</a>
</li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>
I expect that the thumbnails are a bigger size.
Not sure how this will play with the rest of your CSS.
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
#myCarousel .carousel-indicators {
position: static;
margin-top:20px;
}
#myCarousel .carousel-indicators > li {
width:100px;
}
#myCarousel .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#myCarousel .carousel-indicators li.active img {
opacity: 1;
}
#myCarousel .carousel-indicators li:hover img {
opacity: 0.75;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.min.js" integrity="sha256-3Iu0zFU6cPS92RSC3Pe4DBwjIV/9XKyzYTqKZzly6A8=" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<!--Ik gebruik hieronder alleen het middiv omdat dat de enige info is die ik wil vervangen-->
<div class="col-md-12" id="middiv" style="background-color: rgba(255, 255, 255, 0.1)">
<div id="myCarousel" class="carousel slide" data-ride="carousel" align="center">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://dummyimage.com/600x400/000/fff" alt="Los Angeles" style="width:80%;">
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/600x400/000/fff" alt="Chicago" style="width:80%;">
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/600x400/000/fff" alt="New york" style="width:80%;">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="https://dummyimage.com/600x400/000/fff" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="https://dummyimage.com/600x400/000/fff" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="https://dummyimage.com/600x400/000/fff" class="img-fluid">
</a>
</li>
</ol>
</div>
</div>
</div>
</div>
It does look like it is response, and you can change the thumbnail sizes with the:
#myCarousel .carousel-indicators > li {
width:100px;
}
There is some issues with the popper.js loading, which is why it is commented out.
There is a Fiddle: Demo
As you can see the logo is displayed above the background-image, but i would like it to be in the center of the background image.
this is my header and the background needs to begin on top of the page and end before the menu. the logo needs to be displayed in the center over the background image.
i have tried a lot but maybe somebody had a similar problem and can help me with this.
this image show the thats its almost working but its behind the background
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=font1|font2|etc' type='text/css'>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="navbar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="styles/css/bootstrap.css">
<script src="styles/js/bootstrap.min.js"></script>
<!--datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="styles/js/bootstrap.min.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<header>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<img class="logo" src="fts.png">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#theCarousel" data-slide-to="1">
</li>
<li data-target="#theCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide3">
<div class="carousel-caption">
</div>
</div>
</div></div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span> </a>
</div>
</header>
<div id="cssmenu" class="align-right">
<ul>
<?php
switch ($_SESSION['isAdmin']) {
case "1":
echo '<li><i class="fa fa-unlock"></i><span>AdminDash</span></li>' ;
break;
case "0":
break;
default:
break;
}
?>
<li><span>DASHBOARD</span><i class="fa fa-home"></i></li>
<li><span><i class="fa fa-ticket"></i> NIEUW TICKET</span></li>
<li><span>ALLE TICKETS</span></li>
<li><span></i> KLANTEN</span></li>
<li class="active"><span><i class="fa fa-sign-out"></i>UITLOGGEN</span></li>
</ul>
</div>
<br><br><br>
</body>
<style>
body {
background-color: #cdcdcd;
width: 100%;
margin: 0 auto;
}
img.logo {
height: 130px;
position: absolute;
margin: auto;
display: block;
top: 80px;
left: 0;
right: 0;
}
header{
width: 100%;
position: relative;
text-align: center;
}
/* Carousel Styling */
.carousel div[class^=slide] {
height: 100px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: -1
}
.slide1{
background-image: url('styles/3.jpg');
}
.slide2{
background-image: url('styles/2.jpg');
}
.slide3{
background-image: url('styles/1.png');
}
</style>
</html>
use position:relative/absolute
img.logo {
height: 90px;
position: absolute;
margin: auto;
display: block;
top: 80px;
left: 0;
right: 0;
}
header {
width: 100%;
position: relative;
text-align: center;
}
/* Carousel Styling */
.carousel div[class^=slide] {
height: 110px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: -1
}
.slide1 {
background-image: url('//placehold.it/500');
}
.slide2 {
background-image: url('styles/2.jpg');
}
.slide3 {
background-image: url('styles/1.png');
}
<header>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<img class="logo" src="//placehold.it/100/FF0">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#theCarousel" data-slide-to="1">
</li>
<li data-target="#theCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide3">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span>
</a>
</div>
</header>
Find below my code. The problem is that if i put the button inside the jumbotron the carousel goes outside and if i put it after the carousel division the button goes outside the jumbotron. i tried using margins but it didn't work.any help would be highly appreciated.Thanks in advance.This is the image of what is happening.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.logospace {
float: center;
width: 100%;
border: 25px LightBlue outset;
height: 550px;
margin-top: 20px;
}
carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
.knowmore {
width: 100px;
height: 50px;
align: center;
margin-top: 400px;
margin-right: 400px;
font-family: American Captain;
}
</style>
</head>
<body>
<div class="logospace">
<div class="knowmore">
<button type="button" class="btn btn-primary btn-lg">Know More ></button>
</div>
<div class="container">
<br>
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="D:\ps\Notepad++\tech360.jpg" alt="A Sam Hawkz Production" style="height:480px"> </div>
<div class="item"> <img src="D:\ps\Notepad++\para.jpg" alt="Welcome to tech360.com" style="height:480px"> </div>
<div class="item"> <img src="D:\ps\Notepad++\top2.jpg" alt="A Sam Hawkz Production" style="width:100%;height: 480px;"> </div>
<div class="item"> <img src="D:\ps\Notepad++\top.jpg" alt="A Sam Hawkz Production" style="width:width:100%;height: 480px;"> </div>
<div class="item"> <img src="D:\ps\Notepad++\top3.jpg" alt="A Sam Hawkz Production" style="width:100%;height: 480px;"> </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>
</div>
</div>
</body>
</html>
Assuming you want the button in the visual carousel, stick it in the <div class="item">...</div> tag. That will put it in the slide though.
If you want it to sit on top but without putting it into every slide, you can do
.logospace {
position: relative;
}
.knowmore {
position: absolute;
top: 100px; //or wherever you want to place it
left: 100px; //or wherever you want to place it
}
Position absolute pulls it out of the document flow, which allows you to move it around the page without effecting the other items. A word of warning though, it will get its boundaries (ie, the location of top/right/bottom/left: 0;) from the first ancestor that also has a position set. This is why I put position: relative; in .logospace. Its essentially making a canvas for the button to be on.