🔥🔥🔥 Creative Tim UI - 300+ shadcn/ui Blocks & Components Ready for v0, Lovable, Replit.
Explore Now

Hipster As F*** Cards

Custom development Preview
Download
Hipster As F*** Cards Image
Creative Tim Club 🔥 Access to all our current and future products

Hipster As F*** Cards

Cards Snippet

· 4.90/5 (114 Reviews)

MIT License

Free Download

Free Cards Snippet

Product description


The most beautiful and comprehensive collection of cards designed over Bootstrap3. From plain cards to full backgrounds to gradients to anything you may need. We have created this set thanks to a lot of people asking for them and we hope you will find good use for them.

Use cards whenever you have modular information, that you can draw attention to in a page. In our live preview you will find examples for blog cards, vacations cards or something simple like quotes. The possibilities are endless, but you feel something is missing, tell us your opinion in the comments below.

Why cards?
Because they are beautiful and easy to go through by the end user. We think cards are the future step in web development, helping you to design a page that looks good on any device. You can see them on social networks , blogs, e-commerce sites or mobile apps, they are literally everywhere! So join the gang and create your own awesome cards!

Why hipster cards?
Because these cards are creative and opinionated, they’re not afraid to be bold and look just like they feel like. Of course we can argue on this subject for a lot of time, and of course we are not hipsters ourselves. But for the sake of web design, you should definitely check them out!
Product certified by: Creative Tim
Hipster As F*** Cards - Crafted with Bootstrap - the most popular Front End Framework
Hipster As F*** Cards - Fully Coded and Responsive HTML5
Downloads
11,117
Version
1.1.0
Changelog
view
Updated
10 years ago
Released
10 years ago
Reviews
See 114 Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

We are here to help you!

26 Web Developers commented on this product

Custom Development Discord Server

alexpaduraru
  • owner
10 years ago

Give it a try!

thiago.bernardo
  • downloaded
10 years ago

Chrome detected as malicious ¬¬

alexpaduraru
  • owner

@thiago.bernardo thank you for the information, can you give us more details?
10 years ago

thiago.bernardo
  • downloaded

I do not know what happend, but chrome says: https://support.google.com/chrome/answer/6261569?p=ib_download_blocked&hl I had no problem using firefox and no virus was detected after scanned.
10 years ago

felixinx
  • downloaded
10 years ago

Hi, how can I implent cards on my website?

alexpaduraru
  • owner

@felixinx you need to import the css and javascript files from the downloaded archive and then you just copy the piece of code from the cards that you like into your website code.
10 years ago

melannie
  • downloaded
10 years ago

I have been trying to download this on my mac...it is taking forever and the button just keeps saying loading, but nothing happens.

alexpaduraru
  • owner

@melannie hi, that's really wierd, did you get your archive?
10 years ago

Daanzzzzz
  • downloaded
10 years ago

Looking good! Unfortunately the stylesheet from Hipster as F*** Cards appears to mess up your Light Bootstrap Dashboard theme when used together (name collision on .card).

alexpaduraru
  • owner

Thank you for the information. Technically they were not supposed to work together, because the Dashboard was build for something, the Hipster Cards are build for something else. As a quick fix to solve this problem is to take the "hipster_cards.css" and "hipster-cards.js" and using any text editor to "Find and Replace All" the instances of class ".card" with ".hipster-card" and then everywhere in HTML where you need to use the "hipster cards" replace class="card" with "hipster-card". That should work smooth :-)
10 years ago

tomylj
  • downloaded
10 years ago

Using the card layout with an image with fixed dimensions above a block of text (eg the card with 'Try the new hairstyle from this Barber Shop'), I would like the image height - and its container - to change according to the image proportions - eg so the image is not cropped, and the image proportions are maintained (the width is fine). Changing these CSS rules in the javascript file (hipster-cards.js): "background-position": "center top", "background-size": "contain", "background-repeat": "no-repeat", .. prevents the image being cropped, but the containing div remains the same, fixed height. I tried adding another CSS rule: "height": this.height This sizes the images as I want, but the containing div is then much too tall. I think 'this.height' is returning the actual height of the images, not the size as they appear on the page. I hope this makes sense. I would be grateful for any suggestions.

alexpaduraru
  • owner

@tomylj sorry for the late response, but we are very busy with the release of 2 new products. In order to achieve your effect you need to remove the “full background” feature of the images on cards. So 1.) please go to hipster-cards.js and remove/comment line no. 5, which is activating the full background. 2.) go to hipster_cards.css to line 882 and replace all those 3 properties with “width: 100%”. 3.) on hipster_cards.css go to lines: 1337, 1340 and 1347 and replace with “height:auto” all those fixed numbers. Hope this helps you. If there are more questions don’t hesitate to send us an email with your website so we can check on a live example.
10 years ago

tomylj
  • downloaded

Thanks - that worked perfectly! I've asked twice for help since using your products - and the support has been excellent and exactly what I needed. Looking forward to seeing the new products.
10 years ago

Nate
  • downloaded
10 years ago

Hey guys I want to contribute by posting some works here.

alexpaduraru
  • owner

Hi, we are glad that you want to contribute, please send us an email at [email protected] with more details and we can talk more there. All the best, Alex!
10 years ago

wonwooddo
  • downloaded
10 years ago

I'm a CS major student of Sogang University in Korea. Thank you for letting me to use this good Template. I know almost nothing about web programming(javacript,css) but I want to fix something so have one question. I want to put several more cards in a row by minimizing margins between cards. (In downloaded archive, it has 3 cards in a row but I want 5~7) so I fixed bootstrap.min file to width: 100%(line:1845) to show full width but dont know where to fix to minimize the margins of cards. Sorry for bad Explanation.

alexpaduraru
  • owner

@wonwooddo thank you for using our cards. If you want to add more cards please follow the guidelines from bootstrap: http://getbootstrap.com/css/#grid-example-basic. You don't have to rewrite anything you just use the col-md-{number} system. If you want to use bigger cards please remove the "max-width" property for the ".card" class on hipster_cards.css line 828.
10 years ago

wonwooddo
  • downloaded

Thank you verymuch. I really appreciate. <div class="card-box col-md-2 col-sm-4"> your answer really helped me.
10 years ago

greggq9
  • downloaded
10 years ago

thank you for this! I'm implementing them into my mobile app - looks great on those devices, but the left and right margins are too large. I can't seem to locate the wrapper or container class in the CSS... and my left and right adjustments to the .card class do not change. Any tips?

jamesmcbennett
  • downloaded
9 years ago

Can i install this with wordpress? ( I only know a little html/css)

alexpaduraru
  • owner

@jamesmcbennett thank you for your interest in our product. This is not a wordpress plugin so we don't know exactly how they will work in wordpress. We don't have any expert in wordpress in our team... If you find a way to integrate them in wordpress please let us know, we would be glad to post that plugin for other users too. Best, Alex!
9 years ago

You have to be logged in to post a comment. Login here.

  1. Home
  2. All Templates
  3. Hipster As F*** Cards

2,784,001 accounts

4,859,835 downloads

309 products

Join our newsletter

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Company

Help and Support

Tailwind Resources

Developer Resources

© 2025 Creative Tim, all rights reserved. Made with for a better web.