I have just started learning Bootstrap and one month into CSS. I am coding a page and I feel I have a poor understanding of pixels and responsive design.
So I have three images (.demo) in a section. The first image (.png) is 668x522 px and the other two (.jpeg) are 548x445 px. I am using col-md-4 for each image. I see that the tallest image ends up being shorter than the other two. You can see my page here. Notice how the leftmost image is shorter than the other two even though it has a greater height pixel-wise. My questions are
Why is the height shorter for the first image ? (I expected it to be tallest among the three). When I measure the other images in Chrome I see that their image height is 345 x 280px .How and who determines the rendered dimensions ?
I want all three to have the same height. I did img.demo {height :280px ; } and all images were lined up nicely but I understand this is not responsive. I tried img.demo { height :73% } (width of parent container col-md-4 is 380 px so height of 73% for img.demo should give 280px height to it. But settings a height in % to img.demo is not doing anything to it. Why is that ?
What would be the responsive way to have all images the same height ?
HTML :
<!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">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><strong>GemniPro</strong></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<section>
<div class="jumbotron">
<div class = "container">
<div class = "row">
<div class = "col-md-6">
<h1>Capture <strong>Life</strong></h1>
<p>A fun and easy way to capture and share the moments you live for</p>
<img class= "app-btn" src="img/icon_app_store.png">
<img class= "app-btn" src="img/icon_google_play.png">
</div>
<div class = "col-md-6">
<img class ="showcase" src = "img/site_phone.png" >
</div>
</div>
</div>
</div>
</section>
<section id = "middle">
<div class = "row">
<div class ="container">
<div class = "col-md-4 ">
<img src = "img/demo1.png" class="demo" >
<h3> Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis tempus varius. Sed porttitor ex id lectus interdum tristique.</p>
</div>
<div class = "col-md-4 ">
<img src = "img/demo2.jpg" class="demo">
<h3> Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis tempus varius. Sed porttitor ex id lectus interdum tristique.</p>
</div>
<div class = "col-md-4 demo">
<img src = "img/demo3.jpg" class="demo">
<h3> Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis tempus varius. Sed porttitor ex id lectus interdum tristique.</p>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS :
body {
margin-top: 50px;
}
strong {
color:aqua ;
}
section#middle {
padding:40px 0 40px 0;
}
.jumbotron {
color :#fff;
background: url("../img/site_showcase_bg.jpg");
height:500px;
overflow:hidden;
}
.jumbotron img.app-btn {
height : 60px;
width:40%
}
.jumbotron h1 {
margin-top:125px;
}
.jumbotron p {
margin-bottom:50px;
}
.jumbotron img.showcase {
width:75%;
}
#middle img.demo {
width:100%;
height:73%;
border:solid 1px #ccc;
}
Images maintain their aspect ratio if you do not apply any width or height. In case you apply both of them in such a way that the aspect ratio is greater than the original, the image gets distorted.
The height to width ratio of the first image is greater than the other 2 images which are equal in height and width. The more width will be, the less the height will be.
The percentage height is calculated with reference to the parent height. Since, the enclosing container of .demo does not have a height, defining a height in percentage has no effect.
Either take the images of the same size. Or
.demo
max-width: 100%;
height: 280px;
border: solid 1px #ccc;
Or
.demo
max-width: 100%;
There is not much difference in the height of all 3 images, so its safe to remove the border altogether. ;)
The first image is a little bit smaller because its aspect ratio is different from the other two:
The first image original size is: 668x552 | aspect ratio = 1.210
The other two are: 548x445 | aspect ratio = 1.231
They need to have the same aspect ratio or you can put them inside a div and display them as background-size: contain
Related
I am using latest version of bootstrap and have a design with 2 columns where the first column should contain some text and the second column should contained a background image which fills the whole column up to the users right screen. I want the background image to go outside the column to the right, until it reaches the edge of the browser.
like this:
how can i make second column to go outside the container? That's what i am currently using which is not working (image gets cut off by container)
<div class="container">
<div class="row">
<div style="" class="col-sm-12 col-lg-6">
<p>Example text</p>
</div>
<div class="col-sm-12 col-lg-6 bg-image" style="background-image:url('http://placehold.it/1800x1045');">
</div>
</div>
</div>
Try adding a contain value to the background image.
style="background-image: url('http://placehold.it/1800x1045'); background-size: contain;"
You can create the main container as "container-fluid" to fill the entire page content and then create the columns, one other container with your text and the other with the image, check the code below, ignore the height and the borders because I was trying to create your scenario:
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" style="height: 500px;">
<div class="row h-100">
<div class="col-sm-6" style="border: 1px solid pink;">
<div class="row">
<div class="container">
<div style="border: 1px solid blue;" class="col-sm-6 col-lg-6">
<p>Example text</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 no-gutters bg-image" style="background-image:url('https://dummyimage.com/600x400/666/fff'); border: 1px solid red;">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
What you are trying to do is not contemplated by Bootstrap, but you can use a workaround. Why it is not contemplated? Because for a 2 column layout, it uses up 50% of the div, and you are not asking for a 50/50 layout.
First of all, the container, fluid or not, doesn't entirely touch the side of the page. Also, in both cases it is symetrical, and your design is not.
So... what you want to do is a greater div that occupies 100% of the page, with a container (fluid or not) in it. With absolute positioning, you create another div that occupies 50% of the greater div, and has the image as background.
.greater-container {
position: relative; //needed so that the .image-container can be properly positioned
}
.image-container {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
background-color: green;
background-image: url('http://placekitten.com/g/1800/1045');
background-size: cover;
z-index: 0;
}
.content-column {
border: 1px solid red; //so that we can see it
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="greater-container">
<div class="image-container"></div>
<div class="container">
<div class="col-sm-6 content-column">
Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet.
</div>
</div>
</div>
As a sidenote, this is not an easy layout for a responsive website. That background-image will get resized a lot and will probably not always work well.
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 -->
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.
In the first column, is it possible to have a label instead a button? Visually I want the same as a label or a button, but I don't wanna it to be clickable. The text is getting out too. And I was trying to make the button smaller but it isn't accepting width.
FIDDLE
<div>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span>AA</span></h4>
</div>
<div class="modal-body">
<form role="form" class="container-fluid">
<div class="form-group col-md-6">
<label>Text</label>
<div class="btn-group btn-group-justified">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet eget neque
BUTTON
</div>
</div>
<div class="col-md-6">
<label>Text 2</label>
<div class="btn-group btn-group-justified">
BUTTON 2
</div>
</div>
</form>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="#">Cancelar</a>
</div>
</div>
</div>
</div>
Visually I want the same as a label or a button, but I don't wanna it
to be clickable.
The best way would be to add the disabled attribute on the element. Then cancel out the reduced opacity using your own class
HTML
<a href="#" class="btn btn-warning myClass btn-sm" disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet eget neque</a>
CSS
.myClass[disabled] {
opacity: 1;
}
The text is getting out too.
Just add this to the above CSS ruleset
white-space: normal;
And I was trying to make the button smaller but it isn't accepting
width.
The display for btn in the btn-group-justified class is table-cell and the width is set to 1% for all columns. So you have to set your width keeping in mind that 1% is the default.
For example the following makes it 25% for a 2 column button group
width: 0.5%;
The complete CSS would be
.myClass[disabled] {
opacity: 1;
white-space: normal;
width: 0.5%;
}
Fiddle - http://jsfiddle.net/wr78t8ug/
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