I have a problem with Bootstrap css. I have a panels with header, body and footer. The body contains an image. Each of the images have been resized to the same 700px width and 450px height. Yet the panels end up different sizes with the footer not being aligned to each other.
How can this be fixed?
.cshtm code:
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">
Visual Similarity Duplicate Image Finder
</div>
<div class="panel-body">
<a href="portfolio-item.html">
<img class="img-responsive img-blog img-hover" src="#ViewBag.AccreditationImage2" alt="">
</a>
</div>
<div class="panel-footer">
<p>Accreditation test Progress: 10%</p>
<p>Version: 5.5.0.1</p>
<p>Vendor: MindGems, Inc.</p>
</div>
</div>
</div>
and the ubiquitous image:
UPDATE
It turns out the natural height of the images are indeed different even though they were all resized the same. Anyway, how can I force the images in the panel to all be the same size?
Can't tell what is happening in your case specifically without seeing the css but you should just be able to set the height attribute on the image or container:
<style>
.panel-body {
height : 450px
}
</style>
or:
<style>
.panel-body img {
height : 450px
}
</style>
Related
I am kind of new in web design and I am having issues to properly resize images with the class img-fluid in a certain view where they act as some kind of thumbnails inside a portfolio-item. I am going to upload a couple of images to explain what I am trying to achieve. The first image is what I am trying to do, around 3-4 items per row with the same size , the problem is that when I show one image that is vertically bigger than horizontally it also gets bigger resolution than the other images , messing my row entirely and adding some empty spaces
This second image ilustrates the problem, 2 is the image that is bigger in height and it messes the other elements depending on the position that image gets placed.
Here is the HTML code :
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-2">
<!-- Portfolio item -->
<div class="portfolio-item">
<a class="portfolio-link" href="someurl">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="sourceofimage" alt="default" height=auto/>
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">some text</div>
<div class="portfolio-caption-subheading text-muted">some text</div>
</div>
</div>
</div>
</div>
</div>
And CSS of img-fluid
.img-fluid {
max-width: 100%;
height: auto;
}
Can anyone help me with this ?
Use both height and width. Set the width to how ever many pixels or any other increment you would like, and the same for the height.
The code: https://codepen.io/flvffywvffy/pen/OJjoeKP (ignore the javascript)
I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.
I am attempting to build a site that - my initial thought- requires 2 overlapping jumbotron - using bootstrap 3.
1 jumbotron - stretching 100% of the width - traditional grey colouring.
1 overlapping - additional jumbotron that is reduced to the 'container' size - but this will have an image background.
1st attempt - with overlapping jumbotron - this allowed responsive imaging however the sizing of the full width jumbotron then did not match the size of the overlapping image.
<div class = "jumbotron">
<div class ="jumbotron container>//image
<p>Sample text</p>
</div>
</div>
2nd way - with 1 jumbotron - however this then prevents my image being responsive:
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<div class="jumbpic">
<img src="style/images/car2.png"></div></div>
<div class="col-md-4">
<p>Sample text</p>
Is there a simple alternative to allow the full width jumbotron but allow a central image that can be responsive to screen size too?
I'm probably not completely understanding your question, but what about wrapping the jumbotron in a .well?
This gives you a responsive image inside the jumbotron, and gives you the gray enclosing background you're looking for. Just add the .img-responsive class to your image to make it responsive, and make sure it's a big enough image to fill the screen. I added the .center-block class to center the image.
Edited to remove jumbotron padding per OP in comments
<style>
.jumbotron {
padding-top: 0;
}
</style>
<div class="well">
<div class="jumbotron">
<img src="http://placehold.it/1920x800" class="img-responsive center-block">
<p>Sample text</p>
</div>
</div>
Fiddle...
Edit: This will give you a jumbotron with a background image. Again, make sure you're using a large image...
<style>
.jumbotron {
background: url('http://p1.pichost.me/i/59/1828782.jpg');
color: white;
}
</style>
<div class="well">
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>Sample text</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
Fiddle...
You don't need two jumbotrons if I got you correctly. You just need to specify your image to be responsive.
<div class = "jumbotron">
<div class ="container>
<img src="your-image-source" class="img-responsive">
</div>
</div>
Read about responsive images here: http://getbootstrap.com/css/#images
I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.
My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.
Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.
Example panel:
<form role="form">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail thumbnail-hover">
<div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
<div class="caption">
<h3 class="text-primary">Title</h3>
<p>Some variable text</p>
<p>View</p>
</div>
</div>
</div>
</div>
// ...same structure for other panels...
</form>
Here is what I did: http://jsfiddle.net/o7p1jtjv/1/
By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.
For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
</div>
</div>
.row
{
overflow: hidden;
}
.row > div
{
background: red;
margin-bottom: -999999px;
padding-bottom: 999999px;
}
To adjust the height of your thumbnail use a fixed pixel height like 300px.
.thumbnail {
height: 300px;
}
The thumbnail class does not respond to percentage height changes.
Like #Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..
http://www.bootply.com/IwBoyELqpx
In responsive page layout, I want to increase the height of image keeping the width constant.
When I change image width, it reflects but changing the height does not make difference.
So I added 100% height to parent div .content container. But that also does not make any difference.
How can I increase the height here keeping width constant?
FIDDLE : http://jsfiddle.net/g83e8/
I have used container as below:
<div id="content1" class="content">
<div class="container">
<div class="img-container1">
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded">
</div>
<div class="text-container">
<p>TEST</p>
</div>
<div class="another-container">
<p>TEST</p>
</div>
</div>
</div>
css:
.content > container {height: 100%;}
.img-container1 { float:left; height:60% !important; width:50%}
To increase the height of the image only, you can use styling like this:
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded" style="height: 100px">
Using pixels instead of percentages allows you to more easily control the size, as the size is not inherited from the parent elements when using pixels.