Below there are two webpages. Everything is the same except the length of paragraphs (the p tag). But the two webpages look slightly different (in terms of aligment).
In other words, the page with fewer paragraphs is aligned left compared with the page with more paragraphs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 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>
<!-- 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">
<style type="text/css">
body{
margin:0 auto;
font-family:Helvetica Neue, Helvetice-Neue, Helvetica;
font-weight:200;
font-size:16px;
color:#2f2f2f;
}
.breakv{
float:left;
width:2px;
height:200px;
margin-top:78px;
margin-right:3px;
padding-top:18px;
padding-left:2px;
background:url(images/breakv.png) repeat-y;
}
strong{
color:#0074B4;
}
.breakh{
width:370px;
margin:0 auto;
padding-top:8px;
height:4px;
background:url(images/breakh.png) bottom repeat-x;
}
.navbar{
background-color:#57b7df;
font-family:Helvetica Neue, Helvetice-Neue;
font-weight:100;
line-height:21px;
border-color:transparent;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
</style>
</head>
<body class="container">
<div class="container-fluid">
<img src="./images/header.png" class="img-responsive">
</div>
<div style="background-color:#57b7df" class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Photos</li>
<li class="active">Prices</li>
<li>Instructions</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hidden-sm hidden-xs">
<img src="images/prices1.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/prices3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/test3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
</div>
<div id="myCarousel" class="carousel slide hidden-md hidden-lg hidden-xl" 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">
<img src="images/prices1.png" >
</div>
<div class="item">
<img src="images/prices2.png">
</div>
<div class="item">
<img src="images/test3.png">
</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 class="col-md-5 col-xs-12 col-sm-12">
<h3>Private or Party</h3>
<p>Do you need a quick tan just for yourself or are you thinking of making it a fun event for you and your friends? <strong>A Kiss of Bronze Airbrush Tanning</strong> offers both personal tanning sessions and tanning parties!</p>
<p>Never heard of a tanning party? You've heard of lingerie parties, cosmetics parties, jewelry parties, even tupperware parties!!! Well now it's time to introduce <strong>TANNING PARTIES</strong>!</p>
<p>You and a minimum of five (5), max of ten (10), friends get together, and you all get tanned in one session. The hostess of six (6) or more people gets to <strong>tan for free</strong>!</p>
</div>
</body>
</html>
With more text:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 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>
<!-- 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">
<style type="text/css">
body{
margin:0 auto;
font-family:Helvetica Neue, Helvetice-Neue, Helvetica;
font-weight:200;
font-size:16px;
color:#2f2f2f;
}
.breakv{
float:left;
width:2px;
height:200px;
margin-top:78px;
margin-right:3px;
padding-top:18px;
padding-left:2px;
background:url(images/breakv.png) repeat-y;
}
strong{
color:#0074B4;
}
.breakh{
width:370px;
margin:0 auto;
padding-top:8px;
height:4px;
background:url(images/breakh.png) bottom repeat-x;
}
.navbar{
background-color:#57b7df;
font-family:Helvetica Neue, Helvetice-Neue;
font-weight:100;
line-height:21px;
border-color:transparent;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
</style>
</head>
<body class="container">
<div class="container-fluid">
<img src="./images/header.png" class="img-responsive">
</div>
<div style="background-color:#57b7df" class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Photos</li>
<li class="active">Prices</li>
<li>Instructions</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hidden-sm hidden-xs">
<img src="images/prices1.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/prices3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/test3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
</div>
<div id="myCarousel" class="carousel slide hidden-md hidden-lg hidden-xl" 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">
<img src="images/prices1.png" >
</div>
<div class="item">
<img src="images/prices2.png">
</div>
<div class="item">
<img src="images/test3.png">
</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 class="col-md-5 col-xs-12 col-sm-12">
<h3>Private or Party</h3>
<p>Do you need a quick tan just for yourself or are you thinking of making it a fun event for you and your friends? <strong>A Kiss of Bronze Airbrush Tanning</strong> offers both personal tanning sessions and tanning parties!</p>
<p>Never heard of a tanning party? You've heard of lingerie parties, cosmetics parties, jewelry parties, even tupperware parties!!! Well now it's time to introduce <strong>TANNING PARTIES</strong>!</p>
<p>You and a minimum of five (5), max of ten (10), friends get together, and you all get tanned in one session. The hostess of six (6) or more people gets to <strong>tan for free</strong>!</p>
<p><strong>Tanning parties</strong> are great for Girls Night In, Up-coming Special Occasions, Swimsuit Competitions, Pre-Holiday Tan Parties or if you just want to have some girlfriends over and treat yourselves!</p>
<p>Wear dark, loose fitting clothes (ie. tracksuit, sweats). You may want to bring a bathrobe or swim suit cover-up to wear after your <strong>airbrush tan</strong> while you're drying.</p>
<p>To all those ladies who are uncomfortable about your figure, don't worry! Discuss your requirements beforehand whether you want to wear a bikini, swimsuit or shorts. We deal with all shapes, sizes and ages so please do not feel nervous or embarrassed.</p>
<div style="float:right; padding-left:8px;"><img src="images/stickerbride.png" class="img-responsive"/></div>
<p>All brides want to look radiant on the biggest and happiest day of their lives, and nothing will give you that beautiful bride glow like a sun kissed tan. Have a trial tan a few weeks before the big day so you can judge for yourself which day after your spray tan application you feel that your tan is at its best. This gives you enough planning time to book again before the big day!</p>
<p>**Call for special pricing.</p>
</div>
</body>
</html>
How am I supposed to do to make the pages look exactly the same in terms of alignment of page components?
I tried the same pages on a different browser, MSEdge. Curiously, every page looks the same in terms of alignment.
If you are using Bootstrap, there are frequently :first-child and :last-child pseudoelements applied. That would be the first place to look.
Could you please throw your code sample into a jsfiddle to demonstrate the issue you're having?
The only difference seems to be the scrollbar. So, the only thing you would need to do is to put overflow-y: scroll; in your body CSS selector.
---------- Buzinas
is the correct answer. Buzinas, you save my day!!!Many thx!
Related
Please consider the following attempt to sync two bootstrap carousels:
.carousel {
background: gray;
}
.carousel:nth-child(2) {
background: lightgray;
}
body button {
background: lightblue !important;
z-index: 2;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div id="carouselExampleControls" data-bs-ride="false" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" data-bs-interval="false">
<div class="carousel-item active">
111
</div>
<div class="carousel-item" data-bs-interval="false">
222
</div>
<div class="carousel-item" data-bs-interval="false">
333
</div>
</div>
</div>
<div id="carouselExampleControls2" data-bs-ride="false" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" data-bs-interval="false">
<div class="carousel-item active">
111
</div>
<div class="carousel-item" data-bs-interval="false">
222
</div>
<div class="carousel-item" data-bs-interval="false">
333
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls, #carouselExampleControls2" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls, #carouselExampleControls2" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
As you can see only one carsousel is working, but other SO posts suggest that we can use multiple isd in data-target attribute.
TL;DR Seems like still no.
This question has been asked before. The answer from Zim suggested this was NOT possible back then (Bootstrap v5.0).
If you take a look at Bootstrap v5.2 docs, it still says exactly the same:
Control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element.
However...
Collapse (not Carousel) component supports multiple targets, but that is of no help to you since you are interested in Carousel component.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
Is there any solution?
Zim's solution using JavaScript (although not as elegant as the one you are asking about).
var carouselA = document.getElementById('carouselExampleControls');
var carouselB = document.getElementById('carouselExampleControls2');
carouselA.addEventListener('slide.bs.carousel', function(e) {
var bsCarouselB = bootstrap.Carousel.getInstance(carouselB);
bsCarouselB.to(e.to);
});
.carousel {
background: gray;
}
.carousel:nth-child(2) {
background: lightgray;
}
body button {
background: lightblue !important;
z-index: 2;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" data-bs-interval="false">
<div class="carousel-item active">
111
</div>
<div class="carousel-item" data-bs-interval="false">
222
</div>
<div class="carousel-item" data-bs-interval="false">
333
</div>
</div>
</div>
<div id="carouselExampleControls2" lass="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" data-bs-interval="false">
<div class="carousel-item active">
111
</div>
<div class="carousel-item" data-bs-interval="false">
222
</div>
<div class="carousel-item" data-bs-interval="false">
333
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
yes bootstrap allow multiple carousels to be synced via multiple ids in data-target attribute, you get examples from codepen also.
you can follow this link:
https://getbootstrap.com/docs/4.2/components/carousel/
I use a working picture slider with jQuery UI. I can change the pictures with the slider. Now, I like to change the pictures automatic additionally in a period (for example 3 seconds).
$(function() {
var myImages = [
"img/january/tweet_january_1.svg",
"img/january/tweet_january_2.svg",
"img/january/tweet_january_3.svg",
"img/january/tweet_january_4.svg",
"img/january/tweet_january_5.svg"
];
$("#start_slider").slider({
min: 0,
max: (myImages.length - 1),
step: 1,
change: function(event, ui) {
$('#flask1').attr('src', myImages[ui.value]);
}
});
});
.start_heading {
padding: 2em;
margin-top: 10em;
text-align: center;
font-family: 'Roboto';
font-size: 1em;
}
#start_slider {
align-content: center;
margin-left: 15em;
margin-right: 15em;
margin-top: 3em;
margin-bottom: -10em;
}
<div class="start_heading">
<h2> Headline</h2>
</div>
<div class="tweets_january">
<img src="img/january/tweet_january_1.svg" height="" width="" id="flask1" />
<div id="start_slider"></div>
</div>
You can use any JQuery plugin for Carousel from here and can also do following
<!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 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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</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>
</body>
</html>
I have been searching the internet trying to solve a problem, and have found a lot of solutions which non have worked which leads me to believe that non of the solutions were a fit to my unique situation.
I am building a page with Bootstrap and at the bottom of the HTML there is a call for a jquery script "js/jquery-1.11.3.min.js" and this controls things like the Bootstrap navbar drop-downs. And I have another jquery call in the head, and this controls a photo gallery. If I delete the call for "js/jquery-1.11.3.min.js" the photo gallery works great, but my navbar drop-downs stop working, and if I leave the call for "js/jquery-1.11.3.min.js" then the navbar works but the photo gallery stops working..
I tried just using one call but unfortunately the photo gallery will only work with it's call and the navbar will not work with the photo gallery's jquery version.
Here is the code for the page! Any help would be great!
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Set objWPC = Server.CreateObject("RealtySearch.RSPublic")
Call objWPC.ListingIsValid(Request.QueryString("LI"))
Set objWPC = Nothing
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%
Set objMeta = Server.CreateObject("RealtySearch.RSPublic")
' Process Request Arguments: Command, Template, PageSize, LogoId, AgencyId, CityId, ListingId, FeatureId
strUCCmd = UCase(Request.QueryString("CMD"))
If strUCCmd = "RESDETAIL" Or strUCCmd = "COMDETAIL" Then
Call objMeta.ProcessRequest("ListingMeta")
End If
Set objMeta = Nothing
%>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ILPStyles.css" rel="stylesheet" type="text/css">
<link href="css/RealtySearch.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.container{
width:100%;
margin: auto;
margin-top: none;
position: relative;
}
#media (max-width: 768px) {
.inner-text {
font-size: 10px;
}
.container{
width:100%;
}
}
</style>
<link rel="stylesheet" type="text/css" href="wt-gallery.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-gallery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(".container").wtGallery({
num_display:3,
screen_height:360,
padding:10,
thumb_width:75,
thumb_height:56,
thumb_margin:5,
thumbnails_align:"bottom",
text_align:"top",
caption_align:"bottom",
auto_rotate:false,
delay:5000,
rotate_once:false,
auto_center:true,
cont_imgnav:true,
cont_thumbnav:true,
display_play:false,
display_imgnav:true,
display_imgnum:false,
display_timer:false,
display_thumbnav:true,
display_indexes:true,
display_thumbnum:false,
display_tooltip:false,
display_arrow:true,
mouseover_pause:false,
mouseover_text:false,
mouseover_info:true,
mouseover_caption:true,
mouseover_buttons:true,
transition:"fade",
transition_speed:800,
scroll_speed:600,
vert_size:45,
horz_size:45,
vstripe_delay:100,
hstripe_delay:100,
move_one:false,
shuffle:false,
mousewheel_scroll:true
});
}
);
</script>
</head>
<body>
<div class="container-fluid">
<div class="row" id="topbrownbar"> </div>
<div class="row" id="bigpictcont-pages" style="position: relative; min-height: 23em; max-height: 350px; background-image: url(images/pages-header.jpg); background-size: cover;">
<div style="position: absolute; top: -20px; right: 30px; z-index: 4000; color: whitesmoke;">
<div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></div>
<div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
<div style="float: right"><h3> 208-217-1776</h3></div>
</div>
<div id="topblackbar"> </div>
<div style="position: absolute; bottom: 10%; z-index: 3000; width: 100%;"><img style="margin: 0 auto;" src="images/ILP-logo.png" class="img-responsive" alt="Placeholder image"></div>
</div>
<div class="row" id="buttoncont">
<div class="col-lg-offset-1 col-lg-12">
<nav class="navbar navbar-default">
<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="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Buck's<br><span style="font-size: 0.7em;">Listings</span></li>
<li class="dropdown">Property<br><span style="font-size: 0.7em;">Search</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Waterfront Lifestyle</li>
<li>Schweitzer Lifestyle</li>
<li>Ranch Lifestyle</li>
<li>Preparedness Lifestyle</li>
<li role="separator" class="divider"></li>
<li>Developments</li>
<li role="separator" class="divider"></li>
<li>Land Listings</li>
<li>Commercial Listings</li>
</ul>
</li>
<li class="dropdown">Visitor's<br><span style="font-size: 0.7em;">Guide</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Inspectors</li>
<li>Surveyors</li>
<li>Planning & Zoning</li>
<li role="separator" class="divider"></li>
<li>Septic & Sewer</li>
<li role="separator" class="divider"></li>
<li>Home Inspectors</li>
</ul>
</li>
<li>Resources</li>
<li>Bio</li>
<li>Contact</li>
<li>Maps</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li></li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="row" id="mainwoodcont" style="position: relative">
<div class="col-lg-offset-1 col-lg-12 col-md-12 col-md-offset-1">
<h1>Ranch Lifestyle Properties in <strong>North Idaho</strong></h1>
</div>
</div>
<div class="row pagescont">
<div class="col-lg-offset-1 col-lg-12"> </div>
<div class="col-lg-offset-1 col-lg-1"> </div>
<div class="col-lg-10">
<div class="fluid detailpagecont">
<%
Set objApp = Server.CreateObject("RealtySearch.RSPublic")
If len(Request.QueryString("CMD")) = 0 then
Call objApp.ProcessRequest("ResSelect")
Else
Call objApp.ProcessRequest
End If
Set objApp = Nothing
%>
</div>
</div>
<div class="col-lg-1"> </div>
<div class="col-lg-offset-1 col-lg-12"> </div>
</div>
<div class="row" id="footer" style="margin-top: 10px;">
<div class="col-lg-offset-1 col-lg-4 col-md-4 col-sm-6 col-xs-5 col-xs-offset-5 col-md-offset-6 col-sm-offset-5">
<h4>IdahoLifestyleProperty.com</h4>
<p>Buck Graybill REALTOR®<br>
Member of the REALTORS® Land Instatute</p>
<img style="margin: 5px 10px 5px 5px;" align="left" src="images/RLIlogo.jpg" width="60" height="85" alt=""/>
<p> 208-217-1776 <br>
Buck#Sandpoint.com<br>
</p>
<img src="images/footer-hud-logos.png" alt="" width="100" height="32" class="img-responsive"/> </div>
<div class="col-lg-4 col-md-12 col-md-offset-1 col-lg-offset-0" align="center"><img src="images/c21logo-footer.png" width="212" height="132" alt=""/>
<p class="text-center">316 N. 2nd Avenue, Suite A-1 Sandpoint, Idaho 83864 office <br>
(208) 255-2244</p>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-md-offset-1 col-md-6 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-residential-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-land-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-md-offset-1 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-waterfront-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-commercial-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
</div>
</div>
</div>
<div class="row" id="copyright">
<p class="text-center">All Rights Reserved © <script type="text/javascript">document.write((new Date()).getFullYear());</script> IdahoLifestyleProperty.com</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
I'm using a Bootstrap carousel to display images and their respective captions. The image can be portrait, landscape.
I'm able to correctly display landscape images in the carousel with their caption below. In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. I changed the CSS property in file bootstrap.min.css but it's not working.
CSS code...
.carousel-inner {
position: relative;
align: right;
width: 100%;
overflow: hidden;
Any idea how to align Portrait image to the right without affecting the other 2 images?
The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.
HTML Code..
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></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" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i have created code pen for similar carousel slider. have a look at once it may helpful for you.
<head> <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>
<div class="carosel-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>First slide </h3>
<p> ContentContentContentContentContentContent</p>
</div>
</div>
<div class="item">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>Content</p>
</div>
</div>
<div class="item">
<img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>Content</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
///// CSS code goes here
.carousel-caption {
color: #000;
}.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
////////////// JS CODE
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});
http://codepen.io/srinivasr/pen/EPdxKG
I have downloaded bootstrap and have the following code in the head section
<link ref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>
However I want my whole slider to be 100% in width and the images to be 80% wide however my images although I have used margin-left: auto;
margin-right: auto; doesn't want to centre it creeps over to the right.
My code is
<div id="the-slider" class="carousel slide" data-ride="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>
<li data-target="#the-slider" data-slide-to="3"></li>
<li data-target="#the-slider" data-slide-to="4"></li>
<li data-target="#the-slider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-2.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 1-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-1.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-3.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-4.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-5.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
</div> <!--carousel-inner-->
<!--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>
</div><!--the-slider-->
<!--container-->
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
#img {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#the-slider {
width: 100%;
}
</style>
As you will see it creeps to the right, look at photo attached to see what I mean. Its only slight but I NEED it central!
If you are using the class .img-responsive, you need to use margin:0px auto to center.
Hint, set the width you want, to a parent div, and center the image with margin: 0px auto;
I have tried to simulate your problem on JSFiddle. The aligning should be fine with just:
img {
margin: auto auto;
}
https://jsfiddle.net/e1mw6myL/
I just got some random pictures in it. The first picture is smaller than other.. It could be that your image is too big (there is a max-width: 100% on .img-responsive)
Try using other images and look if those images give you the same problem.