I have a thumbnail image I've built using Bootstrap 3 (metro bootstraps, to be specific - https://talkslab.github.io/metro-bootstrap/components.html)
All works as expected, but the issue I'm having is making a caption under the thumbnail, i.e. a div with text. I want the caption to be fixed under the thumbnail even if window is resized. This is what I've tried:
<div class="col-sm-4 col-md-3">
<div class="thumbnail tile tile-medium tile-purple col-md-3">
<a href="#" class="fa-links">
<div class='gun-icon-container'>
<img src = "img/handcuffs.png" alt="BJIA-image" class="gun-icon" style='vertical-align:center;width:80px;'>
</div>
</a>
</div>
<div class ="caption" style='text-align:left;margin-top: 60%;'>
This is my caption
</div>
</div>
There's two issues. 1) even using text-align, I can't get the text to stop floating to the right. 2) on window resize, the caption floats above the thumbnail instead of remaining under it.
Photos of what the thumbnail currently looks like:
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 new to Bootstrap, recently working on an Angular2 project, having a question to ask.
Currently I have a map-component left-hand side occupying 3 columns, however every time when I resize/shrink the browser, the image resizes/shrinks too. But I want the image to remain the fixed size whenever user resize the browser. So I delete the class="img-responsive" in the img tag. But those two components ended up overlapping when I shrink the browser. I am wondering why and could anyone please help me out.
For base app-component:
<div class="row ">
<div class="col-md-3">
<legend-component class="legend-component"></legend-component>
<map-component></map-component>
</div>
<div class="col-md-9">
<sidebar-component></sidebar-component>
<table-component></table-component>
</div>
</div>
For the map-component, I have the corresponding map-template to render my image:
<div align="center" >
<div class="row" id="images">
<div class="col-sm-12">
<img class="img-responsive" [src]=getImageSource() height="90%"/>
</div>
</div>
</div>
For normal full-screen sized browser:
Shrink the browser before disabling class="img-responsive":
Shrink the browser after disabling class="img-responsive":
If you want the image to stay to a certain size, I'd suggest defining a fixed width/height for the image. img-responsive resizes the image to the size of it's container's width.
Give the image a max width. The img-responsive mainly changes the picture's width.
I have large image similar to this. I need to put there images in bootstrap and align these to get layout similar to this. such that there tiles are arranged in a grid of 3 * 3. I was able to get these alignment with defult bootstrap classes like pull-right setting min width. but it does not show properly scale up in retina display and high resolution monitor how do I proceed using bootstrap 3. thanks in advance
Remove pull-right, min-width and put the image inside a bootstrap div with img-responsive class.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="" alt="" class="img-responsive">
</div>
<div class="col-sm-8">
//your text
</div>
</div>
</div>
I have a multiplayer html game (not using canvas) where you have a portrait of your character and a portrait of the character you are playing against. I want to put an image over your opponents character image if they haven't yet loaded their page. The image will say "Not Ready" and when they are ready I'll remove this image.
I'm using bootstrap for positioning of everything though and the answers I've seen before have talked about absolute positioning. How can I position this "Not Ready" image on top of the character portrait displayed with the below code?
My display of character portraits is:
<!--Portraits-->
<div id="divPortraitRow" class="row" style="margin-bottom: 10px;">
<div id="divPlayer" class="col-md-6 text-center">
<img src="#Model.Player.Icon" />
</div>
<div id="divOpponent" class="col-md-6 text-center">
<img src="#Model.Opponent.Icon" />
</div>
</div>
If im not mistaken the character portrait image is <img src="#Model.Player.Icon" />? Then you would want to include the new placeholder image along side your current image (and inside of <div id="divPlayer" class="col-md-6 text-center">) like so:
<div id="divPlayer" class="col-md-6 text-center">
<img src="#Model.Player.Icon" />
<img src="NEW IMAGE" /> <----new image here (order is not important)
</div>
The new image would be set to position: absolute and the parent: <div id="divPlayer" class="col-md-6 text-center"> needs to be set to position: relative otherwise the absolute image becomes relative to the body.
EXAMPLE FIDDLE
I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.