This gallery design is made using the CSS3 script and is shared with you on CodePen editor. font-weight: 400; .staggerTo([title, detail], .15, { className: "-=disabled", this.style.MozTransform = transform; } Ideal for blog posts.
y: yAnim Bootstrap card animations are a set of standard illusions of motions that can be applied to the The creator has made these cards as profile cards in the default design. }) .slider-ctr { -o-transform: scale(1.1); Since this card uses the front and backside of the card, you have more than enough space for the image and the text contents. This bootstrap card is a good option if you are using nested contents. function nextTl() { // get the previous siblings of selected element All the card animations are minimal and dont take much screen space. You can use it to build an elegant, Foliouis a responsive one-page Bootstrap 5 portfolio template. left: 0; If your cards need to handle long excerpts like in a blog homepage, this horizontal card design will be a good choice. -ms-transform: scale(1); Bootstrap cards for use in blogs, portfolios, or eCommerce sites using linear-gradients with dark theme colors.
These are simple and elegant looking cards to show images and a few lines about.
The developer has used a hover-based animation effect in this design.
tlAdditional
Since the cards are closely packed the developer has kept the hover effects simple and neat. text-align: center; Shadow effects and gradient colors are used smartly to present the content elegantly to the users. Split-Screen style design is used these bootstrap cards design to give you space to add images and text within the given space. Most designers use secondary menu designs to show the websites product-related details. In this design, the creator has used cards in a slider. } bottom: -40px;
Even the redesigned Google News app aggregate all related news as card elements. opacity: 1; Since it is a concept model, it does not support swipe gestures.
Hi, I'm Ondrej, creator of Bootstrapious. easing: Elastic.easeOut The creator has given us a professional-looking neatly animated profile card design in this example. } Though it is a simple small card, hover effects are used to expand the cards and give a brief overview of the content. pointer-events: none;
this.children[0].classList.add("light-on"); Since it is a demo, the texts are kept small, but you can increase the text size. Statistics on minimal cards with title & sub title. For example, the cards arrange themselves in a gallery format on a big computer screen, just like on Pinterest. background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/twelveangrymen.jpg"); overflow: scroll; scroll-snap-type: proximity; }).set(imagesCtr[x], { imagesCtr = [].slice.call(imagesCtr); opacity: 1,
.slider-scroll .image { The developer has used a creative hover effect to make it unique from the rest of the bootstrap cards in this list.
Some quick example text to build on the card title and make up the bulk of the card's .video-bg.active { letter-spacing: 1px;
The creator of this bootstrap card has used the images and timestamps to deliver the message clearly to the audience. Apart from it, this design is great and can be used on any part of the website.
There is plenty of space for the text contents to explain about the corresponding image. The only issue with this card design is the elements in this card are not functional. With this clever approach, the user can easily digest the information and tend to remember it for a long time.
You can trim the code and use it in your design based on your needs. border-radius: 3px; }) The creator of this design has used cards to show the product image. One of such effective technique is presenting the content as bite-sized content. The creator has utilized the card design effectively in this design for the bite-sized content strategy. right: 0; Images are kept as the center of attraction in this design. body {
Though the original design uses a poker card in the design, you can replace it with your card design. /* https://davidwalsh.name/demo/css-flip.php */, /* entire container, keeps perspective */, /*Aboslute does not play well with bootstrap cards*/, /* UPDATED! transition: .3s all ease; transition: none;
Ribbons are used to highlight the title of the card, if you are using cards as an album cover, this ribbon element will give an elegant touch to your design. left: 0; A call to action to add to the cart and the product details are shown hovering over the card. You can easily adjust the code and make it a perfect element on your website or application.
.slider-scroll .image-ctr figcaption {
The entire code script is shared with you on the CodePen editor. -ms-transform-style: preserve-3d; These types of cards are the best option for eCommerce websites and applications.
} bottom: 0; The Dark Knight
} The text contents are shown in a full-sized card so you can be clear and detail to the user. To boost your coding skills, have a look at my collection of Bootstrap tutorials. className: "+=disabled" This one is a simple example of automatically sliding carousels. Shadow and depth effects are used smartly to separate the card from the background. If you are also planning to make cards with swiping gestures, this design might give you some ideas. For more glow effects, take a look at our CSS glow effect collection. position: relative; right: 0;
The animation effect is smooth and quick so the users can easily interact with this card. This one is also a profile card design, but the creator has used flipping animation in this card. onComplete: nextTl If you are looking for a bootstrap card with interactive hover and parallax effects, this is the best option. .set(thisImage, { In this design, the developer has used left to right flipping animation. thisImage = this; This is another bootstrap cards example for card flipping animation. pointer-events: none; Since the whole concept is made mostly using the CSS script, you can use this concept on any website. -o-transform: scale(1); You can understand from the name itself that these bootstrap cards follow swipe gestures. videoBg = $(".video-bg"), position: fixed; function $$(elem){ opacity: 0, } opacity: 0; -moz-transform: scale(1); width: 340px; -moz-transform: scale(1.1); Bootstrap 4 and CSS3 product cards with transition. The segmented design helps you to organize the contents and hover effects are used to show more contents in one place.
Bootstrap cards to improve the user experience. top: 60px; The entire code structure used to create these 24 different animated cards are shared with you on CodePen editor. tl.set(imagesCtr[x], { The developer of this card design has not only used swipe gestures but also used taps to expand the card details. opacity: 0; width: 100%; transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275); You might need to fix this navigation option issue if you plan to use this design on your project. You can use this design as a base and create your custom cards.
opacity: 1, y: 0,
It looks like material design cards. } Even the card flipping animation uses the hover trigger. -moz-transform-style: preserve-3d; } Just pick the card you like and start editing it. } } The creator of this design has fused the slider and cards to help you make an interactive element. Code is also available on https://github.com/alexdevero/Card-design-with-Bootstrap-4, Code Examples for the BootstrapBay 24 Days of Bootstrap series (https://bootstrapbay.com/blog/), based on code snippet found on Bootstrap Snippet (http://bootsnipp.com/snippets/featured/a-better-blockquote#comments). closeBtn.addEventListener("click", function(){ -webkit-transform: scale(1.2); }, -.15) Since this design is made purely using the CSS3 script, you can use any modern color schemes in this design. Bootstrap cards tutorial for article on blog.alexdevero.com. All these funky elements and creative animation effects are made using the CSS3 script. this.children[0].classList.remove("light-on"); } Shadow movements are also calibrated smartly in this template to give a realistic feel to the design.
cursor: pointer; Though it is a concept model, the details are done with care, as you would see in a final website or application. A space for a text link is given at the bottom right corner, which will be useful for you to direct the user to the corresponding pages. Since it is just a concept model, the options are not fully functional and fewer animation effects are used. Create elegant cards for your team members' photos, names, positions, and social network icons. The design includes avatar photos, job titles, descriptions, and social links. var imagesCtr = $$(".image-ctr"), yAnim = -40, display: table;
eius veniam maxime?
})
} This simple CSS3 based card design is easy to edit and use on your website. .slider-scroll .image.twelveangrymen { Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content. y: yAnim * (-1), Shawshank Redemption Create elegant cards for your team members' photos, names, positions, and social network icons.
}); The cards are made longer and wider, so you can add any type of content in this card. Hence, you can incorporate this code in your existing design. When you see the same contents on mobile devices, they arrange themselves in a vertical format for a t Bootstrap cards in tile formation. var index = parseInt(imageSelected.children[0].getAttribute("data-index"));
a = 9 - e.offsetY / h * 18, Ideal for blog posts. -o-transform: scale(1.2); Deadpool Even though this design doesnt have images, the designer has used geometrical shapes and typography to present the content engagingly to the user. border-radius: 5px;
.video-bg button:focus { tl }); line-height: 1.5; Plus, the big image background makes the card appealing. Please take a look at the following Bootstrap animations examples: Click on the button to launch the animation. Whether you are looking for a small card design to show bite-sized contents or a full-length expanded card to give brief information, there is a design for you in this bootstrap cards examples list. Thanks for stopping by and have a great day ;), Universal is a clean and stylish Bootstrap 5 HTML5 template, with a beautiful multipurpose layout, Italiano is my free Bootstrap 5HTML responsive template. tlAdditional = new TimelineMax(); As the name implies, the creator has used bootstrap cards for the carousel. transform: scale(1); 2016 - 2022 uiCookies. function prevSiblings(x){ z-index: 9; pointer-events: auto; this.style.WebkitTransform = "none";
.to(imagesCtr[x], .15, { transform: scale(1.1); opacity: .5; font-family: "San Francisco"; Bootstrap product cards are used extensively in modern online store designs to make the shopping experience easier for users. Statistics on minimal cards. top: 0; prevSiblings(index).map(function(x){ } Custom creative shapes are extensively used in modern web design. Plus, you have a call-to-action button to take the users to the related pages. y: yAnim * (-1), $('div.flip-container').toggleClass('flip'); You signed in with another tab or window. Little hover effects are also used to liven the element. h = this.offsetHeight, Except for the arrows, every other thing works smoothly in this design. } this.style.MozTransform = "none"; height: 417px;
Swiping gestures seem to be the most natural way to interact with the application on modern smartphones. font-size: 16px;
Scroll horizontally to navigate
You will find here a great collection of exclusive Bootstrap templates and themes ready to be used in your next project.
-o-transform: perspective(1600px); 12 new items. An awesome Bootstrap 4 cards collection with variant content. Bootstrapious is a project by Ondrej Svestka. Coming to this design, the developer has optimized this design for desktops. Hence you can use this toggle and animation effects on professional websites without hesitation.
The Godfather In this card design, you have a separate space to highlight and show the image. I have published Bootstrap tutorials and freebies here since 2015. Build a nicely styled quote in Bootstrap 4. Bootstrap cards in tile formation. .slider-scroll {
You can add scroll and swipe gesture support to make it more intuitive.
position: absolute; .slider-ctr .text-content { return arr; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/goodbadugly.jpg"); In this card design, the developer has used animated characters in the card to show information related to them. color: #fff; It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. transition: .15s opacity ease .1s;
The Most Popular WordPress Theme In The World And The Ultimate WordPress Page Builder, https://www.bootdey.com/snippets/view/bs4-card-widget, https://bbbootstrap.com/snippets/news-card-animation-28849510, https://bbbootstrap.com/snippets/bootstrap-5-bootstrap-5-ecommerce-cards-70379369, https://bbbootstrap.com/snippets/bootstrap-5-jobs-card-listing-59188500, https://codepen.io/nikki-peel/pen/RwavQer, https://codepen.io/MattRuddick/pen/xaZXgE, https://codepen.io/lesliesamafful/pen/oNXgmBG, https://bootstrapious.com/p/bootstrap-cards, https://codepen.io/ebekirbayar/pen/pxbqmm, https://www.bootdey.com/snippets/view/events-card-widget, https://www.bootdey.com/snippets/view/Gradients-dashboard-cards, https://www.bootdey.com/snippets/view/Note-cards, https://bootstrapious.com/p/bootstrap-quote, https://codepen.io/aqeelfrontend/pen/yRPoYR, https://epicbootstrap.com/snippets/team-cards, Universal - Business & E-commerce Template, How Good UX Design Contributes to Website Security, Cathedral - Bootstrap Church & Charity Template, stack-responsive-bootstrap-4-admin-template.css.
