Issue with columns + carousel not equal in height in Bootstrap 3
I hope someone can help me out with a Bootstrap 3 problem I am experiencing.
A screenshot explains the problem way better, than I can explain in English. So, please, see below.
As you can see I have 2 columns on the left side and 1 on the right together with the Bootstrap carousel. But the problem is, I am getting empty (white) space under the left column.
I would like the right column + carousel match the left columns in height. So everything is aligned. The left columns have the correct height (there is already text content in them in my real design). I think this should be possible, but I have no clue on how to achieve this.
I tried several weird things myself, though it works for one browser, it obviously doesn't work for the other. So I am looking for a solution for this. I think it's possible by making some changes to the carousel?
Since this is only a (small) part of the full website I am working on, I will paste the necessary code. Maybe someone can take a look and come up with a solution or idea?
(please ignore the inline stuff, I am still testing some stuff before I add classes to them)
Partial HTML code:
<div class="row clearfix no-gutter">
<div class="col-md-7 column">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="box-contents fontsize938">
<div style="float:right;font-size:0.938em;padding-top:10px;color:#777;">subtitleright</div>
<img src="images/mini_logo.png" width="21" height="22" class="minilogo" alt=""/><h4>Header</h4>
<div class="multiColumn">
<ul class="webss">
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
</ul>
</div>
<div style="height:22px;padding:2px 8px 0 7px;">
<div style="float:left;"><a class="weblink" href="info.php" title="Ipsum Lorem stuff" target="_parent"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Ipsum Lorem stuff</a></div>
<div style="float:right;"><a class="weblink" href="best.php" title="Ipsum Lorem stuff" target="_parent"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Ipsum Lorem stuff</a></div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="box-contents fontsize938">
<div style="float:right;font-size:0.938em;padding-top:10px;color:#777;">subtitleright</div>
<img src="images/mini_logo.png" width="21" height="22" class="minilogo" alt=""/><h4>Header</h4>
<div class="multiColumn">
<ul class="webss">
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
<li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
</ul>
</div>
<div style="height:22px;padding:2px 8px 0 7px;">
<div style="float:left;"><a class="weblink" href="info.php" title="Ipsum Lorem stuff" target="_parent"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Ipsum Lorem stuff</a></div>
<div style="float:right;"><a class="weblink" href="best.php" title="Ipsum Lorem stuff" target="_parent"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Ipsum Lorem stuff</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<form method="post" action="req.php" id="checkd1" class="formd">
<div class="input-group input-group-sm">
<span class="input-group-addon broundleft"><i class="glyphicon glyphicon-globe"></i></span>
<input type="text" class="form-control" name="webbb" placeholder="Ipsum Lorem stuff">
<input type="hidden" name="request" value="single">
<span class="input-group-btn"><button class="btn btn-primary broundright" type="submit"><i class="glyphicon glyphicon-search"></i> Check!</button></span>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12 column">
<div id="carousel-index" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"><img src="images/gallery1.jpg" alt="Ipsum Lorem stuff"></div>
<div class="item"><img src="images/gallery2.jpg" alt="Ipsum Lorem stuff"></div>
<div class="item"><img src="images/gallery3.jpg" alt="Ipsum Lorem stuff"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Carousel CSS:
.carousel-inner>.item>img, .carousel-inner>.item>a>img{
display:block;
height:auto;
max-width:100%;
line-height:1;
width:100%;
overflow:hidden;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
border:1px solid #fff;
}
.carousel{
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
border:1px solid #d5d5d5;
-moz-box-shadow: 2px 2px 1px #e1e1e1;
-webkit-box-shadow: 2px 2px 1px #e1e1e1;
box-shadow: 2px 2px 1px #e1e1e1;
overflow:hidden;
}
If you need more stuff from me please ask. I am already glad that you are taking a look at this. Many thanks in advance...!
//UPDATE #1
As requested I created (my first) JSFiddle, which is located here: http://jsfiddle.net/Lx3pc7rm/1/
You have to resize the windows width (to a maximum) to see the problem I am experiencing. Also on smaller sizes the carousel is not matched to the left columns.
//UPDATE #2
Well I tried several solutions which are found on Stackoverflow and elsewhere, but non are working. I also tried setting "max-height:332px;" to the carousel. This works, but very limited. In Firefox it works, but other browsers not (size mismatch due to HTML/CSS probably). Also when window size becomes smaller the height is even more off (= smaller).
I wish someone could provide a working solution whatsoever, maybe even by using javascript?
Here is the working fiddle http://jsfiddle.net/Lx3pc7rm/3/.
Since Bootstrap sets the carousel image height to auto in order to allow it to expand according to its aspect ratio. Hence, you have to fix the height of the carousel image so that it won't change with the screen resize. For this, just add following media query in your CSS,
@media (min-width: 1200px){
.carousel-inner>.item>img,
.carousel-inner>.item>a>img{
height: 295px;
}
}
@media (min-width: 992px){
.carousel-inner>.item>img,
.carousel-inner>.item>a>img{
height: 295px;
}
}
Although this might result in stretching of the image, but it would achieve what you want.
<-----UPDATE----->
Here is a jquery solution, check out the updated fiddle http://jsfiddle.net/Lx3pc7rm/6/
Just include jquery and this code,
$(document).ready(function(){
$(window).resize(function(){
if (window.matchMedia('(min-width: 992px)').matches || window.matchMedia('(min-width: 1200px)').matches) {
var newHeight = $('#col7').outerHeight() - $('#row1').outerHeight() - 10;
$('#carousel-index .item img').css('height',newHeight+'px');
}
else{
$('#carousel-index .item img').css('height','auto');
}
});
$(window).resize();
});
window.matchMedia() is fully consistent with the CSS media queries and the browser support is quite good. Although, it doesn't support IE9.
- I am a beginner and I just started to learn java servlets and jsp. Can someone help me find the error in this code?
- How to prevent text moving when transitioning sibling element's width
- Printing a HTML template as PDF - Angular 2
- MJML : Outlook 1px horizontal when using direction rtl on mj-section
- HTML dialog focusing button element when opened
- Dynamic html and js
- Input regex for UK postcodes constantly invalid
- Put a star notation in a HTML page
- Can I have an onclick effect in CSS?
- Tailwind CSS height screen in mobile browser
- How do I tell if an HTML element has gone off the bottom of a page?
- Why select is not a input type in HTML?
- Margin different in Windows (Chome, Edge, etc.) and Mac OS (Safari)
- Print only html table using javascript
- How do I use the reverse border radius at the top of a card? (CSS)
- Allow only numbers into a input text box
- Stacked Bootstrap progress to show multiple ranges with tooltip
- Anchor link only works by "Open link in new tab" command
- How to block +,-,e in input type Number?
- Printing a webpages raw html data unformatted with tags and similar information
- Creating an end screen for my game using javascript, css, and html
- How do I include a HTML file in a Jinja2 template?
- CSS table layout: why does table-row not accept a margin?
- Add fontawesome to shadowroot of webcomponent
- Darkening an image when clicked is requiring an initial click on that image, and I don't know why
- Adding margins between Bootstrap columns
- css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)
- Button to download file and redirect to new page
- How to insert row with attributes using table.insertRow?
- Pass objects/vars between Page_PreInit and Page_Load