zoom out not working in google Chrome

zoom out not working in google Chrome - html

i had my site and it's working find and looks like this.
but when i zoom out 100% to 25% it's looks like this.
where should be problem??? and it's zoom out fine in firefox but problem in chrome...i am using bootstrap and slider is carousel.and my html for header where menu comes is.
<body>
<!-- header-section-starts -->
<div class="home">
<span class="glyphicon glyphicon-home"></span>
</div>
<div class="header-top">
<div class="social-icons">
<i class="facebook"></i>
<i class="twitter"></i>
<i class="googlepluse"></i>
</div>
<span class="menu"><img src="images/nav.png" alt=""/></span>
<div class="top-menu">
<ul>
<nav class="cl-effect-13">
<li>About</li>
<li>Products</li>
<li>E-Showroom</li>
<li>Contact Us</li>
<li>E-Catalog</li>
</nav>
</ul>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function() {
$( ".top-menu ul" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- //script for menu -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<!-- header-section-ends -->
and for slider is.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div data-example-id="simple-carousel" class="bs-example">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic"></li>
<li data-slide-to="2" data-target="#carousel-example-generic"></li>
<li data-slide-to="3" data-target="#carousel-example-generic"></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="im1" src="images/slide/im1.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im2" src="images/slide/im2.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im3" src="images/slide/im3.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im4" src="images/slide/im4.jpg"
data-holder-rendered="true">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
and css for header is.
.home{
float:left;
width:20%;
background: #22292F;
padding: 1.44em 1em;
position: relative;
}
span.glyphicon.glyphicon-home {
margin-top: -6px;
font-size: 21px;
color: #fff;
float: right;
}
.top-menu{
float:left;
margin-top:9px;
}
.cl-effect-13 a {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.cl-effect-13 a::before {
position: absolute;
top: 20%;
left: 50%;
color: transparent;
content: '.';
text-shadow: 0 0 transparent;
font-size: 1.2em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.cl-effect-13 a:hover::before,
.cl-effect-13 a:focus::before {
color: #0078B5;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
.cl-effect-13 a:hover,
.cl-effect-13 a:focus {
color: #FFFFFF;
}
/* Effect 14: border switch */
.cl-effect-14 a {
padding: 0 20px;
height: 45px;
line-height: 45px;
}
.social-icons{
float:right;
margin-right: 22%;
}
.social-icons i{
width:35px;
height:35px;
background: url('../images/img-sprite.png') no-repeat 0px 0px;
display:inline-block;
cursor:pointer;
}
.social-icons i:hover {
opacity: 0.5;
}
i.facebook{
background-position:0px 0px;
}
i.twitter{
background-position:-40px 0px;
}
i.googlepluse{
background-position:-80px 0px;
}
.top-menu ul li{
display:inline-block;
}
.top-menu ul li a{
color:#fff;
font-weight:400;
font-size:22px;
text-decoration:none;
margin:-5px 15px;
font-family: 'Myriad ProPoP', times, sans-serif;
}
#media (max-width: 1200px) {
.top-menu ul li a{
font-size:18px;
margin:0 15px;
}
}
#media (max-width: 992px) {
.top-menu ul li a{
font-size:18px;
margin:0 8px;
}
}
.top-menu ul li a:hover{
color: #0078B5;
}
.top-menu ul li a.active{
color: #0078B5;
}
.header-top {
background: #22292F;
padding: .5em 15px;
float: left;
width: 80%;
position: relative;
}
please help me.

For the slider, you are just missing a container div over it.
So change your
<div data-example-id="simple-carousel" class="bs-example">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
<li data-slide-to="2" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="3" data-target="#carousel-example-generic" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item">
<img alt="im1" src="images/slide/im1.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="im2" src="images/slide/im2.jpg" data-holder-rendered="true">
</div>
<div class="item active">
<img alt="im3" src="images/slide/im3.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="im4" src="images/slide/im4.jpg" data-holder-rendered="true">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
to
<div class="container">
<div data-example-id="simple-carousel" class="bs-example">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
<li data-slide-to="2" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="3" data-target="#carousel-example-generic" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item">
<img alt="im1" src="images/slide/im1.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="im2" src="images/slide/im2.jpg" data-holder-rendered="true">
</div>
<div class="item active">
<img alt="im3" src="images/slide/im3.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="im4" src="images/slide/im4.jpg" data-holder-rendered="true">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
And for the Navbar, you might have to restructure it. Please follow the example here https://getbootstrap.com/examples/navbar/
EDIT:
Since you wanted the slider to occupy full screen...
Currently your images are too small to occupy full screen when you zoom out. So let me do a small CSS hack...
.carousel-inner>.item>img {
width: 100%;
}
If you want the slider to maintain the aspect ratio and gets smaller when zoom out
.carousel-inner>.item>img {
line-height: 1;
width: 100%;
object-fit: cover;
height: 500px; /**This could be any height you prefer***/
}

Related

Bootstrap carousel image is not being showed responsive, inside RenderBody()

I am trying to create carousel responsive image inside the index home page which are being displayed inside the common layout page. But when I reduce the height carousel-item div, full image is not being showed in index html. How can I show the full image as responsive , even if I reduce the height of carousel-item div.?
My code given below
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - MyCompany</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container-fluid icon-top py-4 px-5">
<div class="row">
</div>
</div>
<header id="header">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Our Project</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="body-container">
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container" id>
© 2021 - MyCompany - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/all.js"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Index.cshtml
#{
ViewData["Title"] = "Home Page";
}
<section id="home-heading">
<div id="MyCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
</div>
<div class="carousel-item carousel-image-2">
</div>
<div class="carousel-item carousel-image-3">
</div>
</div>
<a class="carousel-control-prev" href="#MyCarousel" 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="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- INFO SECTION -->
<section id="info" class="py-3>
<div class=" container">
<div class="row">
<div class="col-md-8 align-self-center">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate eveniet blanditiis incidunt iusto
corrupti illum cum laudantium ex sequi amet. ssfsdfs fjjerhehr uiewruhweuiruiewruyhyuewiry iweuyr
ryewiuryiweuy. uieeryewi iuweriwe yb 7weyr7ewy87r7ywe8ry8wer8 we87r y87we78r7we8r
7we87rwe87r87wer8werweuewof
w8ueuwe88ur9we8r </p>
Learn More
</div>
<div class="col-md-4">
<img src="img/laptop.png" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
Site.css
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
#body-container {
/* */
top: 0;
bottom: 0;
right: 0;
left: 0;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
/* Vertically center the text there */
}
.icon-top {
background-color: chocolate;
}
.navbar .nav-link {
font-size: 14px !important;
text-align: right !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.navbar .nav-item.active {
border-left: #444 3px solid;
}
.carousel-item {
height: 800px;
}
.carousel-image-1 {
background: url('../img/banner-1.jpeg');
background-size: cover;
}
.carousel-image-2 {
background: url('../img/banner-2.jpeg');
background-size: cover;
}
.carousel-image-3 {
background: url('../img/banner-3.jpeg');
background-size: cover;
}
With Many Thanks
Pol

Add this to your Layout page.
#RenderSection("style", required: false)
Now add your Carousel code to any View page. under#section style{ "your bootstrap carousel code"} so for that, you will successfully show your carousel where you want. also, the carousel fits the full image as responsive.
#section style{
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:-15px">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img1" />
<div class="carousel-caption">
<h3>Image 1</h3>
<p>A happy image</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img2" />
<div class="carousel-caption">
<h3>Image 2</h3>
<p>A new image</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img3" />
<div class="carousel-caption">
<h3>Image 3</h3>
<p>An old image</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
}

Text over an image

How do I put some texts inside this carousel? I have to put some texts like some info about something, a big title and also the menu on top of it. How do I do that? I looked for some answers here but none of them worked for me, I tried to change some display to relative and absolute but didn't work.
It's like, how do I write an h1 and move it freely over the image of the carousel?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="carousel-menu">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../Site sem nome 2/gd1111.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../Site sem nome 2/tw11111.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../Site sem nome 2/rol111.jpg" 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>

Reference:
https://bootsnipp.com/snippets/featured/bootstrap-carousel-with-text
html
------------
<div class="container">
<div class="row">
<!-- Carousel -->
<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">
<div class="item active">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to <strong>LOREM IPSUM</strong></span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Second slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to LOREM IPSUM</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Third slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to LOREM IPSUM</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</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><!-- /carousel -->
</div>
</div>
------
css
------
.container {
margin-top: 20px;
}
/* Carousel Styles */
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner img {
width: 100%;
max-height: 460px
}
.carousel-control {
width: 0;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 45%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
left: 0;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
right: 0;
}
.carousel-control.left span,
.carousel-control.right span {
background-color: #000;
}
.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .7;
filter: alpha(opacity=70);
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.header-text h2 {
font-size: 40px;
}
.header-text h2 span {
background-color: #2980b9;
padding: 10px;
}
.header-text h3 span {
background-color: #000;
padding: 15px;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-theme {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
margin-right: 15px;
}
.btn-theme:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}

Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
now you can use v4.0.0-beta please refer this link
https://getbootstrap.com/docs/4.0/components/carousel/#slides-only
Try like this,im used for the bootstrap 3(just an example )
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/300x200" class="full-width" />
<div class="carousel-caption">
<div class="full-width text-center">
<p>
Some text which is vertically, horizontally centered in image
</p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/300x200" class="full-width" />
<div class="carousel-caption">
<div class="full-width text-center">
Some text which is vertically, horizontally centered in image
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Bootsrap Carousel Data-slide Arrows are under slide image

I have a bootstrap carousel i am trying to add buttons/arrows to switch between slides I have assigned the position to be absolute, Its clickable and works but the arrows are under the image what could be the problem check here > link
Here is the code
#myCarousel .carousel-indicators {
position: absolute !important;
}
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#myCarousel .carousel-indicators {
bottom: -20px !important;
position: absolute !important;
}
#myCarousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#myCarousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
<div class="overlay">
<input class="btn btn-default" type="submit" name="submit" value="Order Cleaning" />
</div>
<div id="myCarousel" class="carousel slide" style="width:100%;height:auto">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" style="height:auto">
<div class="item active">
<img src="images/test.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<img src="images/test.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<img src="images/test.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#myCarousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>

You made mistake in your css
Check your 768px css you were give botton: -20px !important, change
This
#myCarousel .carousel-indicators {
bottom: -20px !important;
position:absolute !important;
}
To
#myCarousel .carousel-indicators {
bottom: 0px !important;
position:absolute !important;
}
EDIT
i see you are using icomoon css
So have to change this html
<a data-slide="prev" href="#myCarousel" class="left carousel-control">
<i class="fa fa-chevron-left"></i>
</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">
<i class="fa fa-chevron-right"></i>
</a>
TO
<a data-slide="prev" href="#myCarousel" class="left carousel-control">
<i class="icon-arrow-left"></i>
</a>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">
<i class="icon-arrow-right"></i>
</a>
And give additional css
CSS
.left.carousel-control i {
position: absolute;
left: 10px;
top: 45%;
font-size: 35px;
}
.right.carousel-control i {
position: absolute;
right: 10px;
top: 45%;
font-size: 35px;
}
Output

tooltip bootstrap doesn't work

I trying add "tooltip bootstrap" to my web site and has fail. It's doesn't work for me, but early i used it and all was fine. Maybe my css styles wrapping some bootstrap styles. Can someone help?
my html
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
#media (min-width: 1024px) and (max-width: 2560px) {
.navbar-custom-header,
.navbar-custom-footer {
background-color: bisque;
margin-bottom: 0px;
width: 100%;
height: auto;
text-align: center;
display: block;
overflow: hidden;
}
.navbar-nav {
float: none;
list-style: none;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
>li {
display: inline-block;
}
}
.navbar-custom-header .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-footer .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-header .navbar-nav li .nav-ref {
color: white;
font-size: 40px;
font-family: Allegretto Script One;
}
.navi_images {
width: 120px;
height: 60px;
}
#font-face {
font-family: Allegretto Script One;
src: url(fonts/AllegrettoScriptOne.ttf);
}
.footer_images {
width: 280px;
height: 60px;
}
.navbar-custom-header .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 60px;
}
.navbar-custom-footer .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 62px;
}
.navbar-custom-footer .navbar-nav li a .footer_logos {
width: 35px;
height: 35px;
}
.tooltip > .tooltip-inner {
font-family: Allegretto Script One;
font-size: 26px;
}
}
<!DOCTYPE html>
<html lang="en">
<title>Главная страница</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset="utf-8">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
<!-- Bootstrap source-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!-- Own style-->
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-custom-header" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Main
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li>Portfolio
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li>Contacts
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li>Reviews
</li>
</ul>
</div>
</nav>
<!-- Main content-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/021.JPG" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/FXUw2IOSk6I.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/kLaceXVf9Iw.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Footer -->
<nav class="navbar navbar-custom-footer" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>
<img src="images/Originals/example.png" class="footer_images">
</li>
<li>
<a href="#" data-toggle="tooltip" data-placement="top" title="Instagram">
<img src="images/insta.png" class="footer_logos">
</a>
</li>
<li>
<a href="https://vk.com/pricheskiotkylikludmilu" data-toggle="tooltip" data-placement="top" title="Vkontakte">
<img src="images/vk.png" class="footer_logos">
</a>
</li>
<li>
<img src="images/Originals/example.png" class="footer_images">
</li>
</ul>
</div>
</nav>
<script src="bootstrap/jquery/jquery-2.2.2.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

your code is working . try adding bootstrap from external resources . see snippet below :
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
#media (min-width: 1024px) and (max-width: 2560px) {
.navbar-custom-header, .navbar-custom-footer {
background-color: bisque;
margin-bottom: 0px;
width: 100%;
height: auto;
text-align: center;
display: block;
overflow: hidden;
}
.navbar-nav {
float: none;
list-style: none;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
>li {
display: inline-block;
}
}
.navbar-custom-header .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-footer .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-header .navbar-nav li .nav-ref {
color: white;
font-size: 40px;
font-family: Allegretto Script One;
}
.navi_images {
width: 120px;
height: 60px;
}
#font-face {
font-family: Allegretto Script One;
src: url(fonts/AllegrettoScriptOne.ttf);
}
.footer_images {
width: 280px;
height: 60px;
}
.navbar-custom-header .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 60px;
}
.navbar-custom-footer .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 62px;
}
.navbar-custom-footer .navbar-nav li a .footer_logos {
width: 35px;
height: 35px;
}
.tooltip > .tooltip-inner {
font-family: Allegretto Script One;
font-size: 26px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-custom-header" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Main</li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li>Portfolio</li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li>Contacts</li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li>Reviews</li>
</ul>
</div>
</nav>
<!-- Main content-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/021.JPG" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/FXUw2IOSk6I.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/kLaceXVf9Iw.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Footer -->
<nav class="navbar navbar-custom-footer" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><img src="images/Originals/example.png" class="footer_images"></li>
<li><img src="images/insta.png" class="footer_logos"></li>
<li><img src="images/vk.png" class="footer_logos"></li>
<li><img src="images/Originals/example.png" class="footer_images"></li>
</ul>
</div>
</nav>

carousel caption onhover changes disable carousel controls

I want on hover to change the opacity of the carousel-caption (centered)! I tried to achieve this but when this event happens and i have the opacity i want, then the controls of the carousel don't work. any ideas?
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="media1/1.png">
<div class='carousel-caption'>
<h3><span class='glyphicon glyphicon-asterisk' style='font-size: 50px;'></span><br>GET ... - DEVELOP ... - ENTER ...</h3>
</div>
</div>
<div class="item">
<img src="media1/3.png">
<div class="carousel-caption">
<h3>FLUENCY IN AVAILABLE TOOLS AND LANGUAGES CAN BE BETTER OBTAINED THROUGH COLLABORATIVE, INTENSE, HANDS-ON LEARNING</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" id='carousL'></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" id='carousR'></span>
</a>
</div>
Here Is My Css:
.carousel-caption {
position:absolute;
width: 100%;
top: 300px;
bottom: auto;
text-align: center;
margin-left: -332px;
padding-left: 0;
}
.carousel-caption:hover{
width: 100%;
top: 300px;
bottom: auto;
text-align: center;
margin-left: -332px;
padding-left: 0;
background: grey;
opacity:0.1;
}

.carousel-caption {
display: none;
}
#carousel-example-generic:hover .carousel-caption {
display: block
width: 100%;
top: 300px;
bottom: auto;
text-align: center;
margin-left: -332px;
padding-left: 0;
background: grey;
opacity:0.1;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

zoom out not working in google Chrome - html

Related

Bootstrap carousel image is not being showed responsive, inside RenderBody()

Text over an image

Bootsrap Carousel Data-slide Arrows are under slide image

tooltip bootstrap doesn't work

carousel caption onhover changes disable carousel controls

Categories

Resources