Image for post
Image for post

Collection of free Bootstrap grid code examples: grid system, grid layout, image grid, flexbox, etc.

Bootstrap Grid Examples
Bootstrap Image Gallery
Bootstrap Grid List View
Material Design — Responsive Card
Grid Zoom
Responsive Scrollable / Grid Cards
Animate a Bootstrap Grid (JS/CSS)
Cards Hover Effects

More examples of Bootstrap grids: https://freefrontend.com/bootstrap-grid-examples/


Image for post
Image for post

Collection of free jQuery form examples and plugins. More examples: https://freefrontend.com/jquery-forms/

Multistep Form
UI Design: Send A Postcard
Anthropologie Email Sign Up Form
NESubscribe
subscribercoaster
Dynamic focus
Pinball Wizard
Head for the Hills
Notify me — Interactive newslatter form

Image for post
Image for post

Collection of free jQuery menu examples and plugins.
More examples: https://freefrontend.com/jquery-menus/

Menu
Hamburger Menu Interaction
Pasta Menu (GSAP Animation)
Full Screen Nav
Full Page Nav Hand Grab
Full-Page Navigation
Animated Menu
Just Another Nav
Menu Effect

Image for post
Image for post

Collection of free jQuery carousel examples and plugins.
More examples: https://freefrontend.com/jquery-carousels/

Modern Carousel with Flickity
Variable Fonts Experiment
Portfolio Carousel
Spotify Style Carousel
Camera Showroom
Directional Carousel
3D Carousel with GSAP
Mouse Driven Carrousel Concept

Image for post
Image for post

A collection of hand-picked jQuery card code examples: 3d, animated, flip, expanding, stacked, unfolding.

More examples: https://freefrontend.com/jquery-cards/

UI Media Card
Smart Card Holder
Interactive UI Cards
Blog Preview Modal
Expanding Flex Cards
Cards
Spread Cards
Contact Me Card Animation
Info Cards
Planets App SVG Animation

Image for post
Image for post

A collection of hand-picked jQuery buttons code examples.
More examples: https://freefrontend.com/jquery-buttons/

Button Slide
Social Share Buttons
Particles Button
Activate Button
Liquid Button
UI // Button Selection Type
UI // Payment Approval
Social Icon Gooey Effects
Add to Cart Animation
Liquid Button

Image for post
Image for post

Collection of free vertical and horizontal jQuery accordion examples and plugins.

More examples: https://freefrontend.com/jquery-accordions/

Dropdown Vorteile
Custom Accordion for Right
jQuery Accordion
Accordion Scroll Top
Accordion and Google Schema
jQuery Accordion (styles)
Simple Sliding Accordion
Accordion Slider
Image Accordions
Accordion on HTML“Details” with Close Button

Image for post
Image for post

Collection of hand-picked free HTML and CSS search box code examples. More examples: https://freefrontend.com/css-search-boxes/

Custom Search
Search Animation — Only CSS
Animated Search Interaction
Skeuomorphic Search Input
placeholder-shown Selector
Search Box v.2
Search Box Focus Effect
Search Input Animation
Pure CSS Animated Search Bar
Search Form With Animated Search Button

Image for post
Image for post

Collection of free HTML and CSS <figure> & <figcaption> code examples (with little JS). More examples: https://freefrontend.com/html-figure-figcaption-css/

Sticky Figcaption with Protruding Figure
A <figure> with a <figcaption>… and .date that all:hovers
Figure & Figcaption
Figure & Figcaption
Playful CSS figure & figcaption
Figure & Figcaption
Responsive Image Labels
Playful Figure/Figcaption

Image for post
Image for post

Collection of hand-picked free HTML and CSS border animation code examples. More examples: https://freefrontend.com/css-border-animations/

Framed
Dashed Border Icon Animations
Gradient Border
Fancy Border Radius
CSS Border (Using an SVG)
Rotating Border
Gold Border Shimmer
mix-blend-mode: Luminosity & Animating border-radius on CSS

About

freefrontend.com

Code snippets, CSS libraries, jQuery plugins and tutorials for web developers: https://freefrontend.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store