Hi I am trying to make a carousel on my wordpress website with bootstrap. I would like to put four block links next to it. I have the blocks there and the images are scrolling fine, However I believe the carousel is changing the height of the image.
I have images (640 x 360) and I made the 4 blocks 90 pixels high. I did this so the blocks would be flush with the bottom of the carousel. Except the blocks are too big. I don't understand what the problem could be. And I have searched through all of the CSS.
Here is my code:
<!--==========================================-->
<!-- Carousel -->
<!--==========================================-->
<div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!--Carousel item 1-->
<div class="item active">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 2-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 3-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</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>
<!--==========================================-->
<!-- Side Buttons -->
<!--==========================================-->
<div>
<ul class="nav nav-tabs nav-stacked">
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
</ul>
</div>
The reason why your image is resizing which is because it is fluid. You have two ways to do it:
Either give a fixed dimension to your image using CSS like:
.carousel-inner > .item > img {
width:640px;
height:360px;
}
A second way to can do this:
.carousel {
width:640px;
height:360px;
}
add this to your css:
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
Put the following code in your CSS, this works with Bootstrap 4:
.w-100 {
width: 100% !important;
height: 75vh;
}
I had the same problem. You have to use all the images with same height and width. you can simply change it using paint application from windows using the resize option in the home section and then use CSS to resize the image. Maybe this problem occurs because the the width and height attribute inside the tag is not responding.
Put the following code into head section in your web page programming.
<head>
<style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
replace your image tag with
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" style="width:640px;height:360px" />
use style attribute and make sure there is no css class for image which set image height and width
Use this code to set height of the image slider to the full screen / upto 100 view port height. This will helpful when using bootstrap carousel theme slider.
I face some issue with height the i use following classes to set image width 100% & height 100vh.
<img class="d-block w-100" src="" alt="" > use this class in image tags & write following css code in style tags or style.css file
.carousel-inner > .carousel-item > img {
height: 100vh;
}
Give class img-fluid to your div carousel-item.Finally it will be:
<div class="carousel-item active img-fluid">
<img class="d-block w-100" src="path to image" alt="First slide">
</div>
This worked for me, max-height allows the images to auto adjust instead of cropping them
<div class="carousel-item">
<img src="image-link" class="d-block w-100" alt="image" style="max-height:100vh;">
</div>
Had the same problem and none of the CSS solutions presented here worked.
What worked for me was setting up a height="360" without setting any width. My photos aren't the same size and like this they have room to adjust their with but keep the height fixed.
This css is work for me # Bootstrap 5 (You can change width & height)
.carousel-inner > .carousel-item > img {
width:640px;
height:360px;
}
i had this issue years back..but I got this. All you need to do is set the width and the height of the image to whatever you want..what i mean is your image in your carousel inner ...don't add the style attribut like "style:"(no not this) but something like this and make sure your codes ar correct its gonna work...Good luck
Related
I've been going in circles for 1 day on a simple footer which stays at the bottom of the page, unfixed.
I've managed to have it at the bottom of a full screen page. However, when I decrease the width of my browser's window to simulate a "responsive display", the footer stays at the same place when I scroll down the page and thus does not flush down.
Here is my html :
<html>
<body>
<div class="container">
<div class="row text-center">
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
And my CSS :
html {
height: 100%;
}
body {
height: 100%;
padding-bottom: 30px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
I've tried Bootstrap's column on the footer like this :
<div class="col-md-12 col-xs-12">
<div class="footer text-center">
<p class="small">© 2017 Le Point G</p>
</div>
</div>
But this method does not seem to be appropriate as it makes it inconsistent on my different pages as the amount of content differs from one page to another, pushing the footer more or less down.
Any better suggestions ?
If I understand your question correctly, you want the footer always to be fixed to the bottom of the window, reguardless of the length of the content of the page.
If so, try position: fixed instead of position: absolute
html {
height: 100%;
}
body {
height: 100%;
padding-bottom:30px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="container">
<div class="row text-center">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
you can have position:absolute just add
min-height:100%;position:relative;
to your container or row.
.row {
min-height:100%;
position:relative;
}
html {
height: 100%;
}
body {
padding-bottom: 30px;
}
.footer {
position:absolute;
background-color: blue;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="row text-center" >
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
Explanation
The container div has a min-height:100% -- this will ensure it stays the full height of the screen even if there is hardly any content. The container div is set to position:relative; this allows us to absolutely position elements inside it.
The footer has a set height in px. The footer is absolutely positioned with bottom:0 and this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser view-port as it is set to min-height:100% and the footer sits at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the view-port - the footer is still positioned at the bottom of the container div. The footer is also set to width:100%; so it covers the whole page.
With Bootstrap3 you can use the class navbar-fixed-bottom.
Its not that nice but it works.
HTML:
<html>
<head>..</head>
<body>....
<div class="navbar-fixed-bottom">
<p>Your Text</p>
</div>
</body>
</html>
Something like that, but with "div" tags - w3schools
Snippet:
html, body {
margin: 0%;
padding: 0%;
}
.container {
height: 600px;
background-color: #6c6c6c;
}
myFooter {
background-color: #fff;
}
#media screen and (min-width: 480px){
footer {
position: absoulute;
bottom: 0;
background-color: #000 !important;
}
}
<html>
<head>
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid text-center">
<p>Some Text in Container</p>
</div>
<footer class="myFooter text-center">
<p>Footer Text - Resize Window</p>
</footer>
</body>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<!-- Footer -->
<footer class="page-footer font-small indigo">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Very long link 1
</li>
<li>
Very long link 2
</li>
<li>
Very long link 3
</li>
<li>
Very long link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
MDBootstrap.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
I'm try to get a Bootstrap 3 carousel to shrink proportionately as the screen size shrinks - i.e. I want it to stay the same shape as it get's smaller. Out of the box it just squishes down (get's narrower, but not shorter). I got the image to do what I want, but the background of the carousel doesn't follow. I've tried all sorts of things, but can't figure it out. Any hint would be appreciated. Thanks!
Unfortunately I'm not able to post a pic here yet. Basically when it's sized down the grey background of the carousel sticks out from under the image.
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
max-height: 500;
max-width: 753px;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
margin-top: 50px;
}
/* Since positioning the image, we need to help out the caption */
/*.carousel-caption {
z-index: 10;
}*/
/* Declare heights because of positioning of img element */
.carousel .item {
width: 100%;
height: 500px;
min-height: 100px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: auto;
height: auto;
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="img/htff-1.jpg" alt="First slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
</div> -->
</div>
</div>
<div class="item">
<img class="second-slide" src="img/lostDivision-025.JPG" alt="Second slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div> -->
</div>
</div>
<div class="item">
<img class="third-slide" src="img/sballard_01.jpg" alt="Third slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div> -->
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
Are you loading .js files in correct sequence ?
I loaded them in this sequence .... and your code is running perfectly.
bootstrap.min.css
jquery-2.1.3.min.js
bootstrap.min.js
Try adding height:100% to your last selector. This will make your container retain its shape while still resizing when the browser size changes.
https://jsfiddle.net/537wen91/
I am using Bootstrap, and in the example, if you make html view wide, scrollbars disappear, when the view is narrow scrollbars show up. That is what I want. The problem starts when I am in the "narrow view": scroll down to the gray box, now expand html view, see how scrollbars are gone (good), but I also lost my text at the top (not good). Why is my text at the top gone?
Edited to clarify
This way it works: On page load - don't scroll anywhere and stretch the screen so that you see all colored columns on one row. You see some text at top, columns at the bottom, no scrollbar. This is how it should be.
This way it doesn't: Refresh page. Scroll down to the pink column. Now stretch it so that all colored columns appear on one row. See that my text at the top is gone? Why?
If this is still not clear, I would have to make a screen recording...
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h2>title</h2>
</div>
<div class="col-md-4">
<h2>title</h2>
<p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et ultrices neque, vel vestibulum turpis. In ex nunc, vulputate at quam vitae, ultrices vestibulum velit. Phasellus lorem orci, maximus vitae tristique a, sollicitudin sed mauris. Donec ipsum nibh, pulvinar quis nulla at, cursus congue odio. Cras accumsan sem erat, volutpat elementum ante accumsan sed.</p>
</div>
<div class="col-md-4">
<h2>title</h2>
<p>bbb</p>
</div>
<div class="col-md-2">
<h2>title</h2>
<p>bbb</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>title</h2>
</div>
</div>
<div id="see" class="row">
<div class="col-md-2" style="background-color: #FFC;">...</div>
<div class="col-md-2" style="background-color: #CCC;">...</div>
<div class="col-md-2" style="background-color: #CCC;">...</div>
<div class="col-md-2" style="background-color: #FC9;">...</div>
<div class="col-md-2" style="background-color: #CCF;">...</div>
<div class="col-md-2" style="background-color: #CCF;">...</div>
</div>
</div>
<nav class="navbar navbar-fixed-bottom">
<p>Place sticky footer content here.</p>
</nav>
CSS
html {
/*position: relative;
min-height: 100%;*/
height: 100%;
}
body {
overflow: hidden;
}
#see > div {
height: 1200px;
}
.navbar {
margin-bottom: 0;
min-height: inherit;
}
nav {
background-color: #222;
color: #666;
}
#media (max-width: 992px) {
body {
overflow: auto;
}
#see > div {
height: 500px;
}
}
JS
$(window).bind('resize load', function () {
if ($(this).width() <= 992) {
$('nav').removeClass('navbar-fixed-bottom');
} else {
$('nav').addClass('navbar-fixed-bottom');
}
});
As mentioned above, the issue is that #see div changes width but not height, and as the page was scrolled, the scrolling remains, leaving the text out of the viewport. Something like this (excuse my poor MSPaint skills):
One possible solution for that would be to scroll to the top of the page right before that change is made, so the text is always visible. You can achieve that just by adding a line of code:
$(window).scrollTop(0);
You can see it working here: https://jsfiddle.net/537wen91/12/
One possible CSS-only solution would be to, if the text height is constant, for the #see div add a height of calc(100% - HEIGHT_OF_TEXT). But I haven't tried this.
Try replacing:
body { overflow: hidden; }
with
body { overflow: auto; }
More info on Overflow values: http://www.w3schools.com/cssref/pr_pos_overflow.asp
You may have to define what happens in different view sizes, using Bootstrap's grid layout: http://getbootstrap.com/css/#grid
In your class, define grid sizes for these:
.col-xs- .col-sm- .col-md- .col-lg-
Add hidden-xs to your class to hide in extra-small, or hidden-md in medium views, and so on (in the Fiddle below, if you make the width of the result window narrow enough, you will see this happen,
When you go to a smaller screen size, let's say you want to display two "title" elements instead of four, you would change your HTML to this:
<div class="row">
<div class="hidden-xs col-md-2">
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4">
<div class="hidden-xs col-md-2">
</div>
This makes it so that on smaller screens, the only middle two elements will display as they will take up all 12 columns of the grid. Or you could make it so that on smaller views. Here is a Fiddle: https://jsfiddle.net/1dtnd59s/1/
Basically the column options for different display sizes have to be tweaked, and if you're ok with hiding certain elements on small displays, that will make it easier.
I have been trying to show a hidden div on the hover of another div and I cannot understand why it does not work.
I have a fiddle. JSFiddle
HTML:
<div class="mcs-div">
<a href="#">
<img src="http://lorempixel.com/100/100/" alt="Napit Graphic" />
</a>
</div>
<div class="mcs-div-content">
<p>
Ut arcu enim, dictum quis ultrices id, sagittis eget nulla
</p>
</div>
I have tried all the selectors in the hidden div to be displayed, but nothing is working.
CSS:
.mcs-div-content {
display: none;
}
.mcs-div:hover .mcs-div-content {
display: block;
}
To understand why this isn't working, try removing the ":hover" from the CSS rule and look at it again.
.mcs-div-content isn't contained inside .mcs-div, so that rule will never actually find any elements that fit it. Try replacing the second rule with:
.mcs-div:hover + .mcs-div-content {
display: block;
}
The + means "next-sibling element".
Add "~":
.mcs-div-content {
display: none;
}
.mcs-div:hover ~ .mcs-div-content {
display: block;
}
mcs-div-content not is a child of mcs-div try
<div class="mcs-div">
<a href="#">
<img src="http://lorempixel.com/100/100/" alt="Napit Graphic" />
</a>
<div class="mcs-div-content">
<p>
Ut arcu enim, dictum quis ultrices id, sagittis eget nulla
</p>
</div>
</div>
How to make the caption of a Twitter Bootstrap thumbnail be placed to the right of the image instead of below? Preferably in CSS. So far I am just using existing tags as my css knowledge is very limited.
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail span4">
<div class="span2">
<img src="http://placehold.it/120x160" alt="">
</div>
<div class="caption">
<h5>Thumbnail label </h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
</li>
</ul>
With a slight modification of your HTML, and the addition of a new class (right-caption), a few CSS rules should cover you.
HTML
<div class="thumbnail right-caption span4">
<img src="http://placehold.it/120x160" alt="">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
Note: I'm taking the <img> out of the <div> you originally wrapped it in.
CSS
.thumbnail.right-caption > img {
float: left;
margin-right: 9px;
}
.thumbnail.right-caption {
float: left;
}
.thumbnail.right-caption > .caption {
padding: 4px;
}
Note: The margin and padding are just stylistic; floating is the key.
JSFiddle
No additional css. Change a/span tags to div if needed
<a href="..." class="thumbnail clearfix">
<img src="..." class="pull-left">
<span class="caption pull-right">
Lorem ipsum
</span>
</a>