Bootstrap Examples






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



Bootstrap Examples



❮ Previous
Next ❯




Bootstrap Get Started



Container
Fluid container


Examples explained



Bootstrap Grid Basic



Three equal columns
Two unequal columns


Examples explained



Bootstrap Typography



Headings <h1> to <h6>
The <small> element
The <mark> element
The <abbr> element
The <blockquote> element
Reversed blockquote
The <dl> element
The <code> element
The <kbd> element
The <pre> element
Contextual text colors
Contextual background colors


Examples explained



Bootstrap Tables



Basic table
Striped rows
Bordered table
Hover rows
Condensed table
Contextual classes
Responsive tables


Examples explained






<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Bootstrap Images



Rounded image
Circle image
Thumbnail image
Responsive images
Image gallery
Responsive embeds


Examples explained



Bootstrap Jumbotron



Jumbotron inside container
Jumbotron outside container
Creating a page header


Examples explained



Bootstrap Wells



Basic well
Well size


Examples explained



Bootstrap Alerts



Alerts
Closing alerts
Animated alerts


Examples explained



Bootstrap Buttons



Button styles
Button tags
Button sizes
Block level buttons
Active/disabled buttons


Examples explained



Bootstrap Button Groups



Button group
Button group sizes
Vertical button group
Justified button group
Justified button group 2
Nesting button groups and dropdown menus
Split buttons


Examples explained



Bootstrap Glyphicons



Glyphicons


Examples explained



Bootstrap Badges and Labels



Badges
Badge inside a button
Labels
Contextual labels


Examples explained



Bootstrap Progress Bars



Progress bar
Progress bar with label
Colored progress bar
Striped progress bar
Animated progress bar
Stacked progress bar


Examples explained



Bootstrap Pagination



Pagination
Active pagination link
Disabled pagination link
Pagination sizing
Breadcrumbs


Examples explained



Bootstrap Pager



Pager
Align buttons


Examples explained



Bootstrap List Groups



List group
List group with badges
List group with links
Active list item
Disabled list item
Contextual classes
Custom content


Examples explained



Bootstrap Panels



Panels
Panel heading
Panel footer
Panel group
Contextual panel classes


Examples explained



Bootstrap Dropdowns



Dropdown
Dropdown divider
Dropdown header
Disabled dropdown item
Right-aligned dropdown menu
Dropup
Dropdown accessibility


Examples explained



Bootstrap Collapsible



Collapsible button
Collapsible link
Collapsible "in" (show by default)
Collapsible panel
Collapsible list group
Accordion


Examples explained



Bootstrap Tabs and Pills



Inline list
Tabs
Tabs with dropdown menu
Pills
Vertical pills
Vertical pills in a row
Pills with dropdown menu
Centered tabs and pills
Toggleable/dynamic tabs
Toggleable/dynamic pills


Examples explained



Bootstrap Navbar



Navbar
Inverted navbar
Fixed top navbar
Fixed bottom navbar
Navbar with dropdown
Right-aligned navbar
Collapsible navbar


Examples explained



Bootstrap Forms



Vertical form
Inline form
Inline form without labels
Horizontal form


Examples explained



Bootstrap Inputs



Input
Textarea
Checkbox
Inline checkbox
Radio buttons
Inline radio buttons
Select menu


Examples explained



Bootstrap Inputs 2



Static control
Control states
Inline form: control states


Examples explained



Bootstrap Input Sizing



Input sizing
Input sizing horizontal label
Input width (columns)
Input help text


Examples explained



Bootstrap Media Objects



Left and right-aligned media object
Top, middle and bottom-aligned media object
Nested media object
Nested media object II


Examples explained



Bootstrap Carousel



Carousel
Caption slides


Examples explained



Bootstrap Modal



Modal
Small modal
Large modal


Examples explained



Bootstrap Tooltip



Tooltip
Positioning tooltips


Examples explained



Bootstrap Popover



Popover
Positioning popovers
Dismissable popover
Hoverable popover


Examples explained



Bootstrap Scrollspy



Horizontal scrollspy
Vertical scrollspy


Examples explained



Bootstrap Affix



Horizontal affix
Vertical affix
Scrollspy and affix (horizontal)
Scrollspy and affix (vertical)


Examples explained



Bootstrap Filters



Filter table
Filter list
Filter dropdown
Filter anything


Examples explained



Bootstrap Grid: Stacked to Horizontal



Stacked to horizontal grid
Stacked to horizontal grid with fluid container


Examples explained



Bootstrap Grid: Small Devices



Small grid
Small grid


Examples explained



Bootstrap Grid: Medium Devices



Medium grid
Medium grid 2


Examples explained



Bootstrap Grid: Large Devices



Medium grid
Medium grid 2


Examples explained



Bootstrap Grid Examples



Three equal columns
Three unequal columns
Two unequal columns
Two columns with two nested columns
Mixed columns: mobile and desktop
Mixed columns: mobile, tablet and desktop
Clear floats
Offsetting columns
Push and Pull - Change column order


Examples explained







❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more