Quackit Logo
  • Home
  • HTML
  • CSS
  • Scripting
  • Database

  • CSS Examples

    • Color

    • Background color
    • Text color
    • Border color
    • Caret color
    • Column rule color
    • Outline color
    • Text decoration color
    • Text shadow color
    • Filter
    • Opacity/transparency
    • Lists

    • List with circle bullets
    • List with image bullets
    • List style position
    • List style shorthand
    • Unstyled lists
    • Inline lists
    • Backgrounds

    • Background image — whole page
    • Background image — all instances of an element
    • Background image — using a class
    • Background image — using an ID
    • Background image — non-repeating
    • Background image — blended with background color
    • Mix an element with the backdrop
    • Background color — whole page
    • Background color — all instances of an element
    • Background color — using a class
    • Background color — using an ID
    • Gradients

    • Linear gradient — default, 2 colors
    • Linear gradient — 3 colors inc transparent
    • Linear gradient — offset
    • Linear gradient — to bottom
    • Linear gradient — to top
    • Linear gradient — to right
    • Linear gradient — to left
    • Linear gradient — to bottom, right
    • Linear gradient — to bottom, left
    • Linear gradient — specific angle
    • Repeating linear gradient
    • Repeating linear gradient — diagonal
    • Radial gradient
    • Radial gradient — circle
    • Repeating radial gradient
    • Repeating radial gradient — circle
    • Borders

    • Border color
    • Border style
    • Border width
    • Border radius (rounded corners)
    • Border image
    • Border collapse
    • Margins

    • Same margin on all sides
    • Different margin on all sides
    • Margin — top
    • Margin — right
    • Margin — bottom
    • Margin — left
    • Margin — auto
    • Padding

    • Same padding on all sides
    • Different padding on all sides
    • Padding — top
    • Padding — right
    • Padding — bottom
    • Padding — left
    • Text

    • Font size
    • Bold text
    • Italic text
    • Font family
    • Font family — using Google Fonts
    • Small-caps
    • Small-caps vs all-small-caps
    • Font shortcut property
    • Text color
    • Text background color
    • Text shadows
    • Text indent
    • Line height
    • Letter spacing
    • Word spacing
    • Text decoration
    • Text alignment — center
    • Text alignment — right
    • Text alignment — justify
    • CSS Grid — Photo Gallery Examples

    • Responsive - Using same-size images
    • Responsive - Align items to stretch (default)
    • Responsive - Align items to start
    • Responsive - Align items to center
    • Responsive - Align items to end
    • Responsive - Span 5 columns
    • Responsive - Span 3 columns, 2 rows
    • Responsive - Span 3 columns, 3 rows
    • Fluid - Using same-size images
    • Fluid - Align & justify items stretch
    • Fluid - Align & justify items start
    • Fluid - Align & justify items center
    • Fluid - Align & justify items end
    • Fluid - Span 5 columns
    • Fluid - Span 3 columns, 2 rows
    • Fluid - Span 3 columns, 3 rows
    • CSS Grid — Card Examples

    • Responsive cards — Align items to stretch (default)
    • Responsive cards — Align items to start
    • Responsive cards — Align items to center
    • Responsive cards — Align items to end
    • Responsive cards — Span 2 columns
    • Responsive cards — Span 2 rows
    • Responsive cards — Span 2 columns, 2 rows
    • Fluid cards — Align items to stretch (default)
    • Fluid cards — Align items to start
    • Fluid cards — Align items to center
    • Fluid cards — Align items to end
    • Fluid cards — Span 2 columns
    • Fluid cards — Span 2 rows
    • Fluid cards — Span 2 columns, 2 rows
    • CSS Grid — Forms

    • Auto-placement form example 1
    • Auto-placement form example 2
    • Auto-placement form example 3
    • Explicitly placed form example 1
    • Explicitly placed form example 2
    • Explicitly placed form example 3
    • CSS Grid — Website Layouts

    • Website layout template 1
    • Website layout template 2
    • Website layout template 3
    • Website layout template 4
    • Website layout template 5
    • Website layout template 6
    • Website layout template 7
    • Website layout template 8
    • Website layout template 9
    • Website layout template 10
    • Website layout template 11
    • Website layout template 12
    • CSS Grid — 12 Column Grids

    • 12 column grid - Basic example
    • 12 column grid - Responsive (media query)
    • 12 column grid - Mobile first
    • 12 column grid - Vertical
    • 12 column grid - Vertical responsive (media query)
    • 12 column grid - Vertical mobile first
    • 12 column grid - Example 2
    • 12 column grid Example 2 - Responsive (media query)
    • 12 column grid example 2 - Mobile first
    • Flexbox — Photo Gallery Examples

    • Flex-direction row
    • Flex-direction column
    • Align items stretch
    • Align items flex-start
    • Align items flex-end
    • Flexbox — Align items center
    • Flexbox — Card Examples

    • Cards — Align items stretch
    • Cards — Align items flex-start
    • Cards — Align items flex-end
    • Cards — Align items center
    • Cards — Double-width
    • Cards — Flex direction column
    • Flexbox — Grids

    • Random grid
    • 12 column grid 1
    • 12 column grid 2
    • Vertical 12 column grid 1
    • Vertical 12 column grid 2
    • Nested grid
    • Flexbox — Media Objects

    • Image on left
    • Image on right
    • Nested media objects
    • Using HTML entity instead of image
    • Using Unicode emoji instead of image
    • Flexbox — Website Layout Examples

    • Layout 1
    • Layout 2
    • Layout 3
    • Layout 4
    • Holy grail layout (method 1)
    • Holy grail layout (method 2)
    • Flexbox — Form Examples

    • Navbar form with adjacent search
    • Basic form 1
    • Basic form 2
    • Form with stretchy textarea
    • Form with stretchy textarea 2
    • More form elements
    • background
    • CSS Animatable Properties

    • background-color
    • background-position
    • background-size
    • border
    • border-color
    • border-width
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-width
    • border-left
    • border-left-color
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-width
    • border-spacing
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-width
    • bottom
    • box-shadow
    • caret-color
    • clip
    • color
    • column-count
    • column-gap
    • column-rule
    • column-rule-color
    • column-rule-width
    • column-width
    • columns
    • content
    • filter
    • flex
    • flex-basis
    • flex-grow
    • flex-shrink
    • font
    • font-size
    • font-size-adjust
    • font-stretch
    • font-weight
    • grid-area
    • grid-auto-columns
    • grid-auto-flow
    • grid-auto-rows
    • grid-column-end
    • grid-column-gap
    • grid-column-start
    • grid-column
    • grid-gap
    • grid-row-end
    • grid-row-gap
    • grid-row-start
    • grid-row
    • grid-template-areas
    • grid-template-columns
    • grid-template-rows
    • grid-template
    • grid
    • height
    • left
    • letter-spacing
    • line-height
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • max-height
    • max-width
    • min-height
    • min-width
    • opacity
    • order
    • outline
    • outline-color
    • outline-offset
    • outline-width
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • perspective
    • perspective-origin
    • quotes
    • right
    • tab-size
    • text-decoration
    • text-decoration-color
    • text-indent
    • text-shadow
    • top
    • transform
    • vertical-align
    • visibility
    • width
    • word-spacing
    • z-index
    • Functions

    • attr()
    • blur()
    • brightness()
    • calc()
    • calc() — Calculate margins
    • calc() — Position background image
    • circle()
    • contrast()
    • counter()
    • counters()
    • cubic-bezier()
    • drop-shadow()
    • ellipse()
    • grayscale()
    • hsl()
    • hsla()
    • hue-rotate()
    • hwb()
    • image()
    • inset()
    • invert()
    • linear-gradient()
    • matrix()
    • matrix3d()
    • opacity()
    • perspective()
    • polygon()
    • radial-gradient()
    • repeating-linear-gradient()
    • repeating-radial-gradient()
    • rgb()
    • rgba()
    • rotate()
    • rotate3d()
    • rotateX()
    • rotateY()
    • rotateZ()
    • saturate()
    • sepia()
    • scale()
    • scale3d()
    • scaleX()
    • scaleY()
    • scaleZ()
    • skew()
    • skewX()
    • skewY()
    • symbols()
    • translate()
    • translate3d()
    • translateX()
    • translateY()
    • translateZ()
    • url()
    • Selectors

    • Universal selector
    • Element selector
    • Element selector — list of elements
    • Attribute selector — attribute presence
    • Attribute selector — exact value
    • Attribute selector — find a word within a list
    • Attribute selector — multiple attributes
    • Attribute selector — language subcode matching
    • Attribute selector substring matching — starts with value
    • Attribute selector substring matching — ends with value
    • Attribute selector substring matching — contains value
    • Class selector
    • Class selector — limited to a specific element
    • Class selector — match multiple classes
    • ID selector
    • ID selector — limited to a selected element
    • Pseudo-class
    • Pseudo-class — target
    • Pseudo-class — language
    • Pseudo-class — enabled/disabled
    • Pseudo-class — checked
    • Pseudo-class — negation
    • Pseudo-class — nth-child alternating rows (odd/even)
    • Pseudo-class — nth-child alternating three rows
    • Pseudo-class — nth-child (specific child)
    • Pseudo-class — first-child
    • Pseudo-class — last-child
    • Pseudo-class — nth-last-child
    • Pseudo-class — nth-last-child alternating rows (odd/even)
    • Pseudo-class — nth-of-type
    • Pseudo-class — nth-of-type alternating odd/even images
    • Pseudo-class — nth-of-type alternating three images
    • Pseudo-class — nth-last-of-type
    • Pseudo-class — nth-last-of-type alternating odd/even images
    • Pseudo-class — nth-last-of-type alternating three images
    • Pseudo-class — first-of-type
    • Pseudo-class — last-of-type
    • Pseudo-class — only-child
    • Pseudo-class — only-of-type
    • Pseudo-class — empty
    • Pseudo-class — adjacent sibling combinator
    • Pseudo-element — first-line
    • Pseudo-element — first-letter
    • Pseudo-element — before (unicode)
    • Pseudo-element — after (unicode)
    • Pseudo-element — before/after (open and closing quotes)
    • Adjacent sibling combinator selector
    • General sibling combinator selector
    • Descendant combinator selector
    • Child combinator selector
  • JQuery Examples

    • Show/Hide

    • Hide Current Item
    • Hide Another Item
    • Show Content
    • Show & Hide Content
    • Toggle Content
    • Toggle Content - Fast
    • Toggle Content - Slow
    • Toggle Content - Really Slow
    • Fade In/Fade Out

    • Fade Out Current Item
    • Fade Out Another Item
    • Fade In Content
    • Fade In & Fade Out Content
    • Toggle Fade In/Fade Out
    • Toggle Fade In/Fade Out - Fast
    • Toggle Fade In/Fade Out - Slow
    • Toggle Fade In/Fade Out - Really Slow
    • Fade To
    • jQuery Slide

    • Slide Down
    • Slide Up
    • Slide Toggle
    • Slide Toggle - Fast
    • Slide Toggle - Slow
    • Slide Toggle - Really Slow
    • Slide Toggle - Ease Linear
    • jQuery Animation

    • jQuery Animate
    • jQuery Animate - Relative Values
    • jQuery Animate - Toggle
    • jQuery Animate - Chained
    • jQuery Animate - Stop/Start
    • jQuery & CSS

    • Get an Element's CSS Property Value
    • Set CSS - Basic Example
    • Set CSS - Multiple Declarations
    • Set CSS - Increment a Value
    • Set CSS - Add a Class
    • Set CSS - Remove a Class
    • Set CSS - Toggle a Class
    • AJAX with jQuery

    • AJAX Example using load()
    • AJAX Example using load() with a Callback Function
    • AJAX Example - Load only a part of the Remote Page
    • AJAX Example using getJSON()
    • DOM Traversal

    • The find() Method
    • The has() Method
    • The eq() Method
    • The filter() Method
    • The not() Method
    • The siblings() Method
    • Add/Remove Content

    • The before() Method
    • The after() Method
    • The prepend() Method
    • The append() Method
    • The prependTo() Method
    • The appendTo() Method
    • The clone() Method with prependTo()
    • The clone() Method with appendTo()
    • The empty() Method
    • The remove() Method
    • The detach() Method
    • Set Content

    • The html() Method (add HTML)
    • The text() Method (add text)
    • The val() Method (populate a form element)
    • The attr() Method (change an attribute value)
    • The attr() Method (change multiple attribute values)
    • Get Content

    • The html() Method (get HTML)
    • The text() Method (get text)
    • The val() Method (get value from a form element)
    • The attr() Method (get an attribute value)
    • Set Dimensions

    • width() & height() - Excludes padding, margins, and borders.
    • innerWidth() & innerHeight() - Includes padding.
    • outerWidth() & outerHeight() - Includes padding and borders.
    • Get Dimensions

    • width() & height() - Excludes padding, margins, and borders.
    • innerWidth() & innerHeight() - Includes padding.
    • outerWidth() & outerHeight() - Includes padding and borders.
    • outerWidth( true ) & outerHeight( true ) - Includes padding, margins, and borders.
    • Get window width & height.
  • Bootstrap 4 Examples

    • Containers

    • Fixed Layout
    • Fluid Layout
    • Grids

    • Grid maintained on small devices (.col-xs-*)
    • Grid stacked on small devices (.col-md-*)
    • Typography

    • Headings
    • Heading classes (where normal text can mimic a heading)
    • Sub-headings
    • Display Headings
    • Lead text
    • Marked text
    • Abbreviations
    • Initialism
    • Blockquotes
    • Blockquotes with source
    • Blockquotes, reversed (right aligned)
    • Unordered list, unstyled
    • Unordered list, inline
    • Description list
    • Description list, horizontal
    • Computer code
    • Keyboard input
    • Preformatted text
    • Sample text
    • Variables
    • Tables

    • Default table (using Bootstrap's .table class)
    • Inverse table
    • Striped table
    • Bordered table
    • Table with the "hover over" effect on its rows
    • Table header style — Default
    • Table header style — Inverse
    • Small/Condensed table
    • Contextual classes on tables
    • Responsive tables
    • Reflow tables
    • Forms

    • Basic form
    • Inline form
    • Hidden labels
    • Horizontal form
    • Control size
    • Input control size
    • Help text
    • Validation styles
    • Static control
    • Disabled checkboxes & radio buttons
    • Inline checkboxes & radio buttons
    • Custom Forms

    • Checkboxes
    • Radio buttons
    • Stacked controls
    • Select control
    • File upload control
    • Buttons

    • Contextual styles
    • The four button elements
    • Outline buttons
    • Button size
    • Block level button
    • Disabled buttons
    • Toggle checkboxes
    • Toggle radio buttons
    • Images

    • Responsive image
    • Image shapes
    • Left/right alignment
    • Center alignment (using .center-block)
    • Center alignment (using .text-center)
    • Dropdowns

    • Basic dropdown menu
    • Dropup menu
    • Align dropdown items to the right
    • Menu headers
    • Dividers
    • Disabled menu items
    • Button Groups

    • Horizontal button group
    • Vertical button group
    • Button group size
    • Button group toolbar
    • Button group with dropdown
    • Split dropdown
    • Input Groups

    • Basic input group
    • Text on both sides
    • Input group size
    • Input group with checkboxes & radio buttons
    • Button addons
    • Input group with dropdown
    • Input group with split dropdown
    • Collapsible Content

    • Collapse/expand by clicking a link
    • Collapse/expand by clicking a button
    • Accordion example
    • Navs

    • Base nav on ul element
    • Base nav on nav element
    • Tabs
    • Pills
    • Vertical pills
    • Disabled nav link
    • Tabs with dropdown menu
    • Pills with dropdown menu
    • Tabbable panes
    • Navbars

    • Basic navbar
    • Navbar with dropdown
    • Active navbar item (current page)
    • Navbar with form control
    • Navbar items aligned right
    • Inverted navbar
    • Navbar in primary color
    • Navbar with custom color
    • Fixed navbar
    • Fixed navbar (top)
    • Fixed navbar (bottom)
    • Navbar with collapsible content
    • Responsive navbar
    • Breadcrumbs

    • Basic breadcrumbs
    • Pagination

    • Default pagination
    • Active state (for current page)
    • Disabled pagination item
    • Pagination size
    • Pagers (eg "Previous/Next")
    • Pager alignment
    • Disabled pager
    • Tags

    • Default tag example
    • Tags with contextual classes
    • Pill tags
    • Jumbotron

    • Default jumbotron
    • Full width jumbotron
    • Alerts

    • Default alerts
    • Dismissible alert
    • Dissmissible alert, fade-in effect
    • Alert with a link
    • Modal Dialog Boxes

    • Basic modal example
    • Small modal
    • Large modal
    • Modal without the fade effect
    • Progress Bars

    • Default progress bar
    • Contextual classes
    • Striped progress bars
    • Animated stripes
    • Media Objects

    • Basic media object example
    • Nested media objects
    • Horizontal aligment — aligned right
    • Vertical alignment — aligned middle
    • Vertical alignment — aligned bottom
    • Two images stacked vertically
    • Two images side by side
    • Two images left and right aligned (text in the middle)
    • Media list (media objects placed inside a list)
    • List Groups

    • Default list group
    • List group with labels
    • Linked list group items
    • Buttons in a list group
    • Disabled items
    • Custom content inside a list group
    • Cards

    • Basic card example
    • Card with header & footer
    • Images flush against the sides of the card
    • Images flush with the top and sides
    • List group inside a card
    • Links inside a card
    • Text alignment — center
    • Contextual color applied to a card
    • Image overlay
    • Card width — Cards inside the grid
    • Card width — Card group
    • Card width — Card decks
    • Card width — Card columns
    • Responsive Embed

    • Responsive embed example
    • Bootstrap Carousels

    • Basic carousel
    • Carousel with captions
    • Tooltips

    • Basic tooltip example
    • Button with a tooltip
    • Tooltip placement
    • Popovers

    • Basic popover example
    • Popover positioning
    • Popover with a title
    • Close popover by clicking outside the popover
    • Popover on hover
    • Scrollspy

    • Basic scrollspy example
  • Popular

    • CSS Color Codes
    • Online Editor
    • HTML Codes
    • Microsoft Access Tutorial
    • Database Tutorial
    • SQL Server Tutorial
    • Marquee Code
    • Table Generator
    • HTML Templates
    • HTML Tags
    • CSS Properties
  • HTML

    • HTML Tutorial
    • HTML Tags
    • HTML Codes
    • HTML Editors
    • HTML Templates
    • Character Set Reference
    • Bootstrap Tutorial
  • CSS & Design

    • CSS Examples
    • CSS Reference
    • CSS Properties
    • CSS Functions
    • CSS Data Types
    • CSS Selectors
    • Animatable Properties
    • CSS Color
    • CSS Color Codes
    • CSS Tutorial
    • Flexbox Tutorial
    • Grid Tutorial
    • Sass Tutorial
    • Web Graphics Tutorial
  • Scripting

    • JavaScript Tutorial
    • JavaScript Examples
    • jQuery Tutorial
    • jQuery Examples
    • JSON Tutorial
    • Python Tutorial
    • ColdFusion Tutorial
    • PHP Tutorial
    • VBScript Tutorial
  • Database

    • Database Tutorial
    • Microsoft Access Tutorial
    • MongoDB Tutorial
    • MySQL Tutorial
    • Neo4j Tutorial
    • SQL Tutorial
    • SQLite Tutorial
    • SQL Server Tutorial
  • Web Hosting

    • Create a Website
    • Web Hosting Tutorial
    • Find a Web Host
    • Domain Names
    • Web Server Tutorial
  • XML

    • XML Tutorial
    • DTD Tutorial
    • XSLT Tutorial
    • XPath Tutorial

Home | About | Contact | Terms of Use | Privacy Policy

© Copyright 2000 - 2025 Quackit.com