So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.
EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test/test04.png" alt="thumb01">
<div class="col-xs-3 col-md-6">
<div class="delivery alert alert-success">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
Delivery class:
.delivery{
position: absolute;
font-size: large;}
Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use #media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card, search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div, then just work with the elements using CSS (display and the float, for example). Have fun :)
Related
I am trying to upload an image using the img tag. But even linking the image correctly it is not rendering on the screen
Here is the code.
<div class="row">
<div class="col-6">
<h2>MUSEUM OF CANDY</h2>
</div>
<div class="col-6">
<img class=" img-fluid" src="imgs/hand2.png" alt="handimage">
</div>
</div>
</section>
Your source location might not be accurately defined. Please check through it once. If your alt information is visible. Then your problem is in source location.
there is a space in the class at the beginning of "; maybe that's the problem :)
I have a bootstrap row, with 4 columns in it. Originally I had 3 columns with icons, and they all aligned perfectly. I added a fourth in, and now the new one I added is slightly further down the page than the rest. It just doesn't sit in line
<div class="col-12 padding">
<h3>Also take a look at my Github, Free Code Camp, Team Treehouse and LinkedIn profiles!</h3>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-github icons"></i>
<h4>GitHub</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-free-code-camp icons"></i>
<h4>Free Code Camp</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fi-social-treehouse icons"></i>
<h4>Team Treehouse</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-linkedin icons"></i>
<h4>LinkedIn</h4>
</div>
It's the third column (team treehouse) that doesn't sit in line with the rest.
Also, they are all within a row div, it's just not shown.
EDIT:
It seems the problem is 3 of the icons are from Font Awesome, and the Treehouse icon is from Foundation Icons. Now I know the problem, but im not sure how to fix it. They are all styled to the same size
If you believe it is the icon, test your theory by adding a border to the icons class. This way you will be able to tell if the third icon is positioned oddly, or has padding built into the image itself. If that is the case copy the image and edit it to suit.
Or you can hack the offending icon with some CSS like so:
.fi-social-treehouse {
margin-top: -20px;
}
Well, I checked inside the CSS sheet for Foundation Icons and compared it to the CSS sheet of Font Awesome, and couldn't find a difference. So I ended up hard coding a negative margin to the column that the treehouse icon is within. If anyone has a better solution, I would be happy to hear it!
I have two images with two different size. I am using bootstrap in my project. But I cant place the images together which looks like both have same dimension. I have gone through similar questions and tried a lot. Please help me to sort this out.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/2048x1536" target="_blank">
<img src="http://placehold.it/2048x1536" alt="Nature">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/1280x720" target="_blank">
<img src="http://placehold.it/1280x720" alt="Nature">
</a>
</div>
</div>
my css is
.thumbnail img {
height:250px;
width:100%;
}
You can do it by putting the picture as background-image for the 'div' tag and setting value of 'background-position' as 'stretch'.
Said that, if the images are of different resolution and you fit them into the same-size container it might look pixelated at times.
I'm trying to use Lightbox to display images:
<div class="t-body tb-padding">
<p class="c-black m-b-20">Images</p>
<div ng-repeat="images in selectedItemToView.images">
<div class="lightbox row">
<a href="/user/2" class="col-sm-2 col-xs-6">
<img src="/user/2" alt="" />
</a>
</div>
</div>
<div class="lightbox row">
<a href="/user/2" class="col-sm-2 col-xs-6">
<img src="/user/2" alt="" />
</a>
</div>
</div>
I have two DIVs, one with ngRepeat, and one without it. I'm displaying the same image. The images are displayed correctly, but when I click them, the images displayed with ngRepeat just downloads. The image outside works correctly, displaying the image in the Lightbox fashion (doesn't download).
I looked at the stylings applied and they both appear to have same CSS styles applied.
When I removed ng-repeat from the DIV, it works fine. So somehow using ngRepeat is causing Lightbox not to work.
Request headers:
With ng-repeat:
Without :
Any idea?
Thank you.
I have one silly question about Bootstrap Grid System.
Is that okay to use <a href="#" class="col-lg-4"> instead of <div class="col-lg-4">?
Is it because I want create a column-4 grid menu with hyperlink.
Basically, it should look like this which the hyperlink only cover the text not the whole column even if I had styled width: 100%; height: 100%; inside the <a> tag.
<div class="row">
<div class="col-lg-4">
Menu 1
</div>
</div>
After I change the code, it should look like
<div class="row">
<a href="#" class="col-lg-4">
Menu 1
</a>
</div>
Is this a best practice of using Bootstrap?
Or we have to follow the standard which define by Bootstrap?
do it like this and it will be looking great:
just add a class or style to your a element.
or add class "btn btn-default btn-block" to use bootstrap button styles
<div class="row">
<div class="col-lg-4 text-center">
<a href="#" class=" btn-block">
Menu 1
</a>
</div>
</div>
The only problem I see with that is that the A won't have the css property display: block; by default so you might run into styling issues. If you fix this issue by adding this property, I can see any problem with that.