I'm trying to get my footer to the bottom of page.
When I create a fiddle it works; https://jsfiddle.net/3dd73cuk/
But on my page it´s "flying"; http://bjornc.se/sites/torhultsbrunn/
I guess bootstrap has some default behavior that messes it up?!
Code
<style>
.footer{
background-image: url("img/grassTop.png");
background-size: 100%;
position: fixed;
bottom: 0;
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Torhults Brunn.se</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">
<li>
Om oss
</li>
<li>
Våra tjänster
</li>
<li>
Kontakt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-3">
<p class="lead">Trädgårdsmöbler</p>
<div class="list-group">
Trämöbler
Metallmöbler
Konstrottingmöbler
Parasoll & Övrigt
Dynor
</div>
</div>
<div class="col-md-9">
<div class="row carousel-holder">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="img/carousel/drommingeSoffa.png" style="height: 300px" alt=""/>
</div>
<div class="item">
<img class="slide-image" src="img/carousel/durbanKonstRottingGrupp.png" style="height: 300px" alt=""/>
</div>
<div class="item">
<img class="slide-image" src="img/carousel/nydalaGrupp.png" style="height: 300px" alt=""/>
</div>
<div class="item">
<img class="slide-image" src="img/carousel/shabbyGrupp.png" style="height: 300px" alt=""/>
</div>
<div class="item">
<img class="slide-image" src="img/carousel/sodertorpSoffaByggbar.png" style="height: 300px" alt=""/>
</div>
<div class="item">
<img class="slide-image" src="img/carousel/tannoHammock.png" style="height: 300px" alt=""/>
</div>
<div class="item">
<img class="slide-image" src="img/carousel/torpetTradgardsgrupp.png" style="height: 300px" alt=""/>
</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>
</div>
<div class="row">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Product
</h4>
<p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Product
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Product
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Product
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Product
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<h4>Like this template?
</h4>
<p>If you like this template, then check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this tutorial</a> on how to build a working review system for your online store!</p>
<a class="btn btn-primary" target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">View Tutorial</a>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<hr>
<!-- Footer -->
<footer class="footer">
<div class="col-lg-12">
<p>Copyright © Torhultsbrunn 2015</p>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
In your shop-homepage.css you have this:
margin: 50px 0;
That's what's causing it to "fly" since it's applying a margin to it which forces it up, even though you have bottom: 0; present, but since you are including the shop-homepage.css afer your bootstrap.min.css it's overwriting the previous .footer.
Simply change it to:
margin: 0px 0;
Related
I am trying to use two bootstrap carousels on the same page. The following is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--BOOTSTRAP LINKS FOR CAROUSEL-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--BOOTSTRAP LINKS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!--START OF NAVBAR-->
<div class="nav-box">
<br>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<img src="logo.png" id="logo"></img>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT S</li>
</ul>
</div>
</nav>
</div>
<!--END OF NAVBAR-->
<!--START OF BOOTSTRAP CAROUSEL-->
<section class="section-white">
<div class="container">
<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" style="width:100%; height: 500px !important;">
<div class="item active">
<img src="a.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="b.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="c.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</div>
<!-- Controls -->
<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>
</section>
<!--END OF BOOTSTRAP CAROUSEL-->
<!--START OF RADIO BAR-->
<div class="radio-bar">
<div class="text1">
<h3 id="text1-line1">streams</h3>
<h4 id="text1-line2">shows</h4>
</div>
<div id="audio">
<audio controls>
<source src="viper.mp3" type="audio/mp3" controls="controls">
</audio>
</div>
<div id="podcast-box">
<img src="icon.png" id="image"></img>
<p id="pheading">casts</p>
</div>
<div id="blue-box">
<img src="blue.svg" id="blue-box-image"></img>
<p id="blue-box-heading">show</p>
</div>
</div>
<!--END OF RADIO BAR-->
<!--START OF ABOUT US BAR-->
<div class="about-us">
<h3 id="heading">ABOUT</h3>
<p id="para">*******</p>
<div class="image-box">
<img src="image.jpg" id="image"></img>
</div>
</div>
<!--END OF ABOUT US BAR-->
<!--START OF VIDEO CAROUSEL-->
<div class="container" id="container">
<div class="row" id="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide" id="carousel">
<ol class="carousel-indicators" id="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active" id="action"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner" id="carousel-inner">
<div class="item active" id="item-active">
<div class="row" id="row">
<div class="col-md-3">
<img src="" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="item" id="item">
<div class="row" id="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="item" id="item">
<div class="row" id="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.item-->
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control" id="carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control" id="carousel-control">›</a>
</div>
<!--.Carousel-->
</div>
</div>
</div>
<!--.container-->
<script type="text/javascript">
$(document).ready(function() {
$('#Carousel').carousel({
interval: 5000
})
});
</script>
<!--END OF VIDEO CAROUSEL-->
</body>
</html>
I changed the class names to id, because it was overlapping with the previous carousel. Even after doing that the second carousel is overlapping with the element just before it, and the right navigation arrow is not appearing.
I checked the following link: Is it possible to have multiple Twitter Bootstrap carousels on one page?.
Here it says that the navigation href should point to different ids, which I have done. But I am still getting the problem.
Where am I going wrong?
Last edit There you go, i added the carousel function to the thumbnail for the 2nd carousel. :)
jQuery(document).ready(function($) {
$('#myCarousel3').carousel({
interval: 1000000
});
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel2').carousel({
interval: 2000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
#myCarousel {
margin-top: 30px;
}
.thumbnail {
border: none;
}
.thumbnail-modifier {
margin-bottom: 0px;
}
.thumbnails {
display: inline-flex;
width: 100%;
}
.thumbnails-center {
display: flex;
margin: 0 auto;
}
.cursor {
cursor: pointer;
}
.row-fluid {
display: inline-flex;
width: 100%;
}
#myCarousel3 {
margin-top: 20px;
margin-bottom: 50px;
}
.row-center {
display: flex;
margin: 0 auto;
}
.carousel-control-modifier {
background-image: none !important;
color: black !important;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel2">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel2" 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="#myCarousel2" 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>
</div><!--/Slider-->
</div>
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div><!-- Carousel nav -->
<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>
</div><!--/Slider-->
</div>
<div class="">
<div id="myCarousel3" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="left carousel-control carousel-control-modifier" href="#myCarousel3" 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 carousel-control-modifier" href="#myCarousel3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!--/myCarousel-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Update 3: Here you go, pretty sure this is what you wanted, you need to copy all the code to your own server and it should work! :)
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel2').carousel({
interval: 2000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
#myCarousel {
margin-top: 30px;
}
.thumbnail {
border: none;
}
.thumbnails {
display: inline-flex;
width: 100%;
}
.thumbnails-center {
display: flex;
margin: 0 auto;
}
.cursor {
cursor: pointer;
}
<link href='test2.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel2">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel2" 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="#myCarousel2" 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>
</div>
<!--/Slider-->
</div>
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div>
<!-- Carousel nav -->
<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>
</div>
<!--/Slider-->
<div class="row hidden-phone" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="thumbnails">
<div class="thumbnails-center">
<a class="thumbnail cursor" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
<a class="thumbnail cursor" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
<a class="thumbnail cursor" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
<a class="thumbnail cursor" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
<a class="thumbnail cursor" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You can just change Carousel ID for making these sliders unique. Please see the attached code as an example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Carousel -->
<div id="demo1" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo1" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo1" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo1" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo1" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo1" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</body>
</html>
Using Bootstrap carousel. The left and right controls are not aligned. The right control chevron work fine but the left is causing some problems. It seems to drop lower and lower when the image become larger. I've tried using CSS like so:
.carousel-control .icon-prev, .carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left, .carousel-control
.glyphicon-chevron-right, .glyphicon-circle-arrow-left,
.carousel-control .glyphicon-circle-arrow-left,
.carousel-control .glyphicon-circle-arrow-right {
display: inline-block;
position: absolute;
top: 50%;
z-index: 5;
}
But that didn't help at all. Here is the HTML script. Any clues?
<script type="text/dust" id="posting-detail-template">
<nav class="posting-detail-navbar navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="backbutton">
<button type="button" class="btn btn-default navbar-btn posting-detail-reset-button navbar-left">
<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> Back
</button>
<p class="navbar-text navbar-left"><b>{title} - ${price}</b></p>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-7">
<div class="posting-detail-carousel">
<div class="container-fluid">
<h2>{title}</h2>
<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="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</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>
<div class="pull-right">
<div class="button-group posting-detail-buttons btn-group" role="group">
<button type="button" class="favorite btn btn-warning">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Favorite
</button>
<button type="button" class="contact btn btn-success">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact
</button>
</div>
</div>
<div class="posting-detail-list panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{title} - ${price}</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item"><b>Description:</b> {description}</li>
<li class="list-group-item"><b>Posted:</b> {date}</li>
<li class="list-group-item"><b>Number of Bedrooms:</b> {numBed}</li>
<li class="list-group-item"><b>Number of Bathrooms:</b> {numBath}</li>
<li class="list-group-item"><b>Number of Tenants:</b> {numTenants}</li>
<li class="list-group-item"><b>Location:</b> {city} - {zip}</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="map">
<h3>Transit Directions</h3>
<iframe class="neighborhood-map" src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyBNSSuICv6MPc13PfZ1Yu0KyDSsDG5eLJw
&origin={city}%2C%20CA%20{zip}
&destination=1600%20Holloway%20Ave%2C%20San%20Francisco%2C%20CA%2094132
&mode=transit
&zoom=12">
</iframe>
</div>
</div>
</div>
</script>
I am learning Bootstrap 3 and have a simple page I am working on that only consist of a top nav bar, carousel, and footer.
The page looks OK at desktop size. When it shrinks to mobile size I have too much white space. If I have to add more content to fill it I will but is there an alternative to avoid doing that. I like the simpleness with just the carousel.
Is there a way to make it look nice on a mobile the way I have it?
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<!-- Fixed navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <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="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<br />
<!-- Begin page content -->
<div class="row clearfix">
<div class="col-xs-12 column">
<div class="carousel slide" id="carousel-491568">
<!-- <ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-491568">
</li>
<li data-slide-to="1" data-target="#carousel-491568">
</li>
<li data-slide-to="2" data-target="#carousel-491568">
</li>
</ol> -->
<div class="carousel-inner">
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!--<div class="carousel-caption">
<h2>NEW Client!</h2>
<p></p>
</div> --></div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p></p>
</div> --></div>
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p> </p>
</div> --></div>
</div> <a class="left carousel-control" href="#carousel-491568" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-491568" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<div id="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<!--<p class="footer-block">Footer</p> -->
<p><i class="fa fa-envelope fa-1x"> Questions?</i> | <i class="fa fa-mobile fa-1x"> (740) 564-9876</i>
</p>
<p>Copy Here</p>
</div>
<div class="navbar-text pull-right"> <a class="btn btn-social-icon btn-facebook" href="#" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="#" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="#" target="_blank">
<i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle demo
I suggest to modify the classic carousel html script using a background image and adjusting the size in your css file accordingly.
here you will find an html example:
<div class="container">
<!-- Header Carousel -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
and your css example code:
/* CSS used here will be applied after bootstrap.css */
/* -------carousel slides----*/
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-indicators li {
border-color: #C0C0C0;
}
.carousel-indicators .active {
background-color: #c0c0c0;
}
.carousel-inner {
margin-bottom:50px;
}
.carousel .item{
height: 400px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 400px;
}
.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
Bootply example
Im new to coding/deving websites and im facing an issue on this project im working on. I can't get the background via CSS to show no matter what i do. Can someone take a look at my code and see if im doing something wrong? Thanks.
http://jsfiddle.net/bkeu8nrf/
<div class="container">
<header class="row"> <!-- Row 1 -->
<div class="col-md-12" id="logo">
<img class="center-block" src="images/logo.jpg" alt="">
</div>
</header> <!-- /Row 1 -->
<nav class="navbar navbar-default navbar-inverse"> <!-- Navbar -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapse" 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>
<!-- Brand -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- Links -->
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(Current)</span></li>
<li>Nosotros</li>
<li class="dropdown"> <!-- Dropdown -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Ministerios<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Ministerio 1</li>
<li>Ministerio 2</li>
<li>Ministerio 3</li>
<li>Ministerio 4</li>
<li>Ministerio 5</li>
</ul>
</li> <!-- /Dropdown -->
<li>Servicios</li>
<li>Miembros</li>
<li>Contacto</li>
</ul>
</div> <!-- /Navbar Collapse -->
</div> <!-- /Navbar Header -->
</div> <!-- /Container-fluid -->
</nav> <!-- /Navbar -->
<div id="the-slider" class="carousel slide center-block" data-ride="carousel"> <!-- Carousel -->
<ol class="carousel-indicators">
<li data-target="#the-slider" data-slide-to="0" class="active"></li>
<li data-target="#the-slider" data-slide-to="1"></li>
<li data-target="#the-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner"> <!-- Carousel Inner -->
<div class="item active">
<img src="images/banner1.jpg" alt="" class="img-responsive">
</div>
<div class="item">
<img src="images/banner2.jpg" alt="" class="img-responsive">
</div>
<div class="item">
<img src="images/banner3.jpg" alt="" class="img-responsive">
</div>
</div> <!-- /Carousel Inner -->
<!-- Carousel Controls -->
<a class="left carousel-control" href="#the-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#the-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- /Carousel Controls -->
</div> <!-- /Carousel -->
<div class="row" id="row2"> <!-- Row 2 -->
<div class="col-md-6 well" id="secondarybanner">
<img src="http://placehold.it/560x300" alt="">
</div>
<div class="col-md-6">
<div> <!-- Twitter Widget -->
<a class="twitter-timeline" href="https://twitter.com/IglCristiana" data-widget-id="404001509135753216">Tweets by #IglCristiana</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div> <!-- /Twitter Widget -->
<div>
<img src="http://placehold.it/60x60" alt="">
<img src="http://placehold.it/60x60" alt="">
<img src="http://placehold.it/60x60" alt="">
</div>
</div>
</div> <!-- /Row 2 -->
<div class="row" id="row3"> <!-- Row 3 -->
<div class="col-md-3 well" id="images">
<img src="http://placehold.it/270x270" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-md-3 well" id="images"> <img src="http://placehold.it/270x270" alt=""> </div>
<div class="col-md-3 well" id="images"> <img src="http://placehold.it/270x270" alt=""> </div>
<div class="col-md-3 well" id="images"> <img src="http://placehold.it/270x270" alt=""> </div>
</div> <!-- /Row 3 -->
<footer class="row"> <!-- Row 4 -->
<div class="pull-right" id="footer">
Contacto
<a id="row4" href="#">Contacto</a>
<a id="row4" href="#">Contacto</a>
</div>
<div class="pull-left" id="footer">
<p>Copyright 2015</p>
</div>
<div class="text-center" id="footerlower">
<p>Iglesia Cristiana 2015</p>
</div>
</footer> <!-- /Row 4 -->
</div> <!-- /Container -->
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Set .fullbg class to <body>, remove it from <html> tag
CSS
body.fullbg {
background: url('../images/bg2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
DEMO HERE
I use Bootstrap (v2.3.2). My navbar is;
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
</button>
<a class="brand" href="index.jsp">MyPage</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a class="brand" href="index.jsp">Home</a></li>
<li><a class="brand" href="about.html">About</a></li>
<li><a class="brand" href="rm.jsp" >Contact</a></li>
<li class="dropdown"><a class="brand" href="#" class="dropdown-toggle"
data-toggle="dropdown">Menü <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Gallery</li>
<li>Some page</li>
<li>Guest Book</li>
</ul>
</li>
</ul>
<div style="display: inline-block; margin-top:5px ;margin-left:520px;">
</div>
<a target="_blank" href="https://www.facebook.com/groups/bademdere/" class="btn btn-social-icon btn-facebook pull-right">
<i class="fa fa-facebook"></i>
</a>
</div>
</div>
</div>
</div>
</div>
And i have a button on my caraousel like this;
<p>Show on map</p>
,and my modal is ;
<div class="modal fade" id="mapmodals">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myCity">MyPage</h4>
</div>
<div class="modal-body">
<div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When website is openning first time,i can't click "ul" or "li" tags. Dropdown menu not opening.But i call my modal and then close it, i can click navbar perfectly.Dropdown menu is opening success.
I try to define modal above the navbar it doesn't change.
How can i solve this problem?
An example is here :http://www.bootply.com/gQZPPqbmcS
Edit: My caraousel code is;
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Wellcome</h1>
<p class="lead">Some text <br> some text</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Loacation</h1>
<p class="lead">Some text.</p>
<!-- Button to trigger modal -->
<p>See on map</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide-03.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1 style="color: #000000;">text</h1>
<p class="lead" style="color: #000000;">Some text</p>
<a class="btn btn-large btn-primary"
href="y.jsp"
target="_blank">text</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<div class="modal fade hide" id="mapmodals">
</div>
I solved it!! I add my modal's class atribute "hide".