HTML Layouts CSS Example
-
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
backgroundCSS Animatable Properties
background-colorbackground-positionbackground-sizeborderborder-colorborder-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-spacingborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthbottombox-shadowcaret-colorclipcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnscontentfilterflexflex-basisflex-growflex-shrinkfontfont-sizefont-size-adjustfont-stretchfont-weightgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-column-endgrid-column-gapgrid-column-startgrid-columngrid-gapgrid-row-endgrid-row-gapgrid-row-startgrid-rowgrid-template-areasgrid-template-columnsgrid-template-rowsgrid-templategridheightleftletter-spacingline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityorderoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originquotesrighttab-sizetext-decorationtext-decoration-colortext-indenttext-shadowtoptransformvertical-alignvisibilitywidthword-spacingz-indexFunctions
attr()blur()brightness()calc()calc()— Calculate marginscalc()— Position background imagecircle()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 withprependTo() - The
clone()Method withappendTo() - 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
.tableclass) - 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
ulelement - Base nav on
navelement - 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