![\"Material-UI](\"https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb.png\"){kind=logo}
\n
Components in the newest Bootstrap 5 and Fluent Design. Completely new design using the latest Bootstrap
\n\n# Highlights \n\n**Free for personal and commercial use** \nOur license is user friendly. Feel free to use Fluent Kit for both private as well as commercial projects. \n\n**Components** \nChoose **among 100+ predefined components**. Each component is ready to use and fits perfectly with each other like LEGO bricks. Take, combine, enjoy!. \n\n**Modularity** \nFluent Design for Bootstrap comes with both, compiled, ready to use libraries including all features as well as modules for CSS (SASS files) and JS. That allows you to create your custom library including only elements which you really use in your project. \n\n**10 fresh ready to use templates** \nWe are going further and giving to you ready to use templates! Use them as you like, as an inspiration, prototype or final product for your customers. \n\n**Cross-browser compatibility** \nChrome, Firefox, IE, Safari, Opera, Microsoft Edge - Fluent Kit loves all browsers, all browsers love Fluent Kit. \n\n**Modularity** \nFluent Design for Bootstrap comes with both, compiled, ready to use libraries including all features as well as modules for CSS (SASS files) and JS. That allows you to create your custom library including only elements which you really use in your project. \n\n**Active community** \nOur society grows day by day. Visit **our forum** and check how it is to be a part of our family. \n\n**Flex box** \nFluent Kit fully suppports Flex Box. You can forget about alignment issues. \n\n**jQuery 3.x and 2.x** \nFluent Kit is integrated with newest jQuery. Therefore you can use all the latest features which come along with it.\n\n**SASS files** \nArrenged and well documented .scss files can't wait until you compile them. \n\n**Detailed documentation** \nWe give you detailed documentation at your disposal. It will help you to implement your ideas easily. \n\n\n# Live Preview\n\n[Main demo](https://mdbgo.io/marta-szymanska/mdb5-demo-free-fluent/free/components/full-demo.html) - check visual guide of components in the newest Bootstrap 5 and Fluent Design\n\n\n# Cards\n\nCard is a responsive content container with an extensible option for headers, footers, images, and a wide variety of content.
\n\n\n\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/fluent-cards.png\")
\n
A slideshow component for cycling through elements—images or slides of text—like a carousel.
\n\n\n\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/demo-carousel.gif\")
\n
Buttons provide predefined styles (warning, info, danger) for multiple button types: outline, rounded, social, floating, fixed, tags, etc.
\n\n\n\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/fluent-buttons.png\")
\n
Button group wraps a series of buttons together into a single line (navbar) or stack in a vertical column.
\n\n\n\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/fluent-button-group.png\")
\n
Progress bar is an indicator showing the completion progress, i.e. task or time. Use it with percents, steps & other options.
\n\n\n\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/fluent-progress.png\")
\n
A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.
\n\n\n\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/fluent-footer.png\")
\n
Bootstrap Toast component is a non-disruptive message in the corner of the interface. It provides quick \"at-a-glance\" feedback on the outcome of an action.
\n\n\n\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/fluent-toasts.png\")
\n
\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/fluent-blur-1.png\")
\n
\n ![](\"https://mdbootstrap.com/img/Marketing/campaigns/fluent-blur-2.png\")
\n
which is activating the plugin\n * @type {String}\n */\n var PLUGIN_NAME = 'line-numbers';\n\n /**\n * Regular expression used for determining line breaks\n * @type {RegExp}\n */\n var NEW_LINE_EXP = /\\n(?!$)/g;\n\n /**\n * Resizes line numbers spans according to height of line of code\n * @param {Element} element element\n */\n var _resizeElement = function (element) {\n var codeStyles = getStyles(element);\n var whiteSpace = codeStyles['white-space'];\n\n if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {\n var codeElement = element.querySelector('code');\n var lineNumbersWrapper = element.querySelector('.line-numbers-rows');\n var lineNumberSizer = element.querySelector('.line-numbers-sizer');\n var codeLines = codeElement.textContent.split(NEW_LINE_EXP);\n\n if (!lineNumberSizer) {\n lineNumberSizer = document.createElement('span');\n lineNumberSizer.className = 'line-numbers-sizer';\n\n codeElement.appendChild(lineNumberSizer);\n }\n\n lineNumberSizer.style.display = 'block';\n\n codeLines.forEach(function (line, lineNumber) {\n lineNumberSizer.textContent = line || '\\n';\n var lineSize = lineNumberSizer.getBoundingClientRect().height;\n lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';\n });\n\n lineNumberSizer.textContent = '';\n lineNumberSizer.style.display = 'none';\n }\n };\n\n /**\n * Returns style declarations for the element\n * @param {Element} element\n */\n var getStyles = function (element) {\n if (!element) {\n return null;\n }\n\n return window.getComputedStyle ? getComputedStyle(element) : element.currentStyle || null;\n };\n\n window.addEventListener('resize', function () {\n Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_NAME), _resizeElement);\n });\n\n Prism.hooks.add('complete', function (env) {\n if (!env.code) {\n return;\n }\n\n // works only for wrapped inside (not inline)\n var pre = env.element.parentNode;\n var clsReg = /\\s*\\bline-numbers\\b\\s*/;\n if (\n !pre ||\n !/pre/i.test(pre.nodeName) ||\n // Abort only if nor the nor the have the class\n (!clsReg.test(pre.className) && !clsReg.test(env.element.className))\n ) {\n return;\n }\n\n if (env.element.querySelector('.line-numbers-rows')) {\n // Abort if line numbers already exists\n return;\n }\n\n if (clsReg.test(env.element.className)) {\n // Remove the class 'line-numbers' from the \n env.element.className = env.element.className.replace(clsReg, ' ');\n }\n if (!clsReg.test(pre.className)) {\n // Add the class 'line-numbers' to the \n pre.className += ' line-numbers';\n }\n\n var match = env.code.match(NEW_LINE_EXP);\n var linesNum = match ? match.length + 1 : 1;\n var lineNumbersWrapper;\n\n var lines = new Array(linesNum + 1);\n lines = lines.join('');\n\n lineNumbersWrapper = document.createElement('span');\n lineNumbersWrapper.setAttribute('aria-hidden', 'true');\n lineNumbersWrapper.className = 'line-numbers-rows';\n lineNumbersWrapper.innerHTML = lines;\n\n if (pre.hasAttribute('data-start')) {\n pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);\n }\n\n env.element.appendChild(lineNumbersWrapper);\n\n _resizeElement(pre);\n\n Prism.hooks.run('line-numbers', env);\n });\n\n Prism.hooks.add('line-numbers', function (env) {\n env.plugins = env.plugins || {};\n env.plugins.lineNumbers = true;\n });\n\n /**\n * Global exports\n */\n Prism.plugins.lineNumbers = {\n /**\n * Get node for provided line number\n * @param {Element} element pre element\n * @param {Number} number line number\n * @return {Element|undefined}\n */\n getLine: function (element, number) {\n if (element.tagName !== 'PRE' || !element.classList.contains(PLUGIN_NAME)) {\n return;\n }\n\n var lineNumberRows = element.querySelector('.line-numbers-rows');\n var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;\n var lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);\n\n if (number < lineNumberStart) {\n number = lineNumberStart;\n }\n if (number > lineNumberEnd) {\n number = lineNumberEnd;\n }\n\n var lineIndex = number - lineNumberStart;\n\n return lineNumberRows.children[lineIndex];\n },\n };\n})();\n(function () {\n if (typeof self === 'undefined' || !self.Prism || !self.document) {\n return;\n }\n\n var callbacks = [];\n var map = {};\n var noop = function () {};\n\n Prism.plugins.toolbar = {};\n\n /**\n * Register a button callback with the toolbar.\n *\n * @param {string} key\n * @param {Object|Function} opts\n */\n var registerButton = (Prism.plugins.toolbar.registerButton = function (key, opts) {\n var callback;\n\n if (typeof opts === 'function') {\n callback = opts;\n } else {\n callback = function (env) {\n var element;\n\n if (typeof opts.onClick === 'function') {\n element = document.createElement('button');\n element.type = 'button';\n element.addEventListener('click', function () {\n opts.onClick.call(this, env);\n });\n } else if (typeof opts.url === 'string') {\n element = document.createElement('a');\n element.href = opts.url;\n } else {\n element = document.createElement('span');\n }\n\n element.textContent = opts.text;\n\n return element;\n };\n }\n\n callbacks.push((map[key] = callback));\n });\n\n /**\n * Post-highlight Prism hook callback.\n *\n * @param env\n */\n var hook = (Prism.plugins.toolbar.hook = function (env) {\n // Check if inline or actual code block (credit to line-numbers plugin)\n var pre = env.element.parentNode;\n if (!pre || !/pre/i.test(pre.nodeName)) {\n return;\n }\n\n // Autoloader rehighlights, so only do this once.\n if (pre.parentNode.classList.contains('code-toolbar')) {\n return;\n }\n\n // Create wrapper for to prevent scrolling toolbar with content\n var wrapper = document.createElement('div');\n wrapper.classList.add('code-toolbar');\n pre.parentNode.insertBefore(wrapper, pre);\n wrapper.appendChild(pre);\n\n // Setup the toolbar\n var toolbar = document.createElement('div');\n toolbar.classList.add('toolbar');\n\n if (document.body.hasAttribute('data-toolbar-order')) {\n callbacks = document.body\n .getAttribute('data-toolbar-order')\n .split(',')\n .map(function (key) {\n return map[key] || noop;\n });\n }\n\n callbacks.forEach(function (callback) {\n var element = callback(env);\n\n if (!element) {\n return;\n }\n\n var item = document.createElement('div');\n item.classList.add('toolbar-item');\n\n item.appendChild(element);\n toolbar.appendChild(item);\n });\n\n // Add our toolbar to the currently created wrapper of tag\n wrapper.appendChild(toolbar);\n });\n\n registerButton('label', function (env) {\n var pre = env.element.parentNode;\n if (!pre || !/pre/i.test(pre.nodeName)) {\n return;\n }\n\n if (!pre.hasAttribute('data-label')) {\n return;\n }\n\n var element, template;\n var text = pre.getAttribute('data-label');\n try {\n // Any normal text will blow up this selector.\n template = document.querySelector('template#' + text);\n } catch (e) {}\n\n if (template) {\n element = template.content;\n } else {\n if (pre.hasAttribute('data-url')) {\n element = document.createElement('a');\n element.href = pre.getAttribute('data-url');\n } else {\n element = document.createElement('span');\n }\n\n element.textContent = text;\n }\n\n return element;\n });\n\n /**\n * Register the toolbar with Prism.\n */\n Prism.hooks.add('complete', hook);\n})();\n\n(function () {\n if ((typeof self !== 'undefined' && !self.Prism) || !self.document || !Function.prototype.bind) {\n return;\n }\n\n var previewers = {\n // gradient must be defined before color and angle\n gradient: {\n create: (function () {\n // Stores already processed gradients so that we don't\n // make the conversion every time the previewer is shown\n var cache = {};\n\n /**\n * Returns a W3C-valid linear gradient\n * @param {string} prefix Vendor prefix if any (\"-moz-\", \"-webkit-\", etc.)\n * @param {string} func Gradient function name (\"linear-gradient\")\n * @param {string[]} values Array of the gradient function parameters ([\"0deg\", \"red 0%\", \"blue 100%\"])\n */\n var convertToW3CLinearGradient = function (prefix, func, values) {\n // Default value for angle\n var angle = '180deg';\n\n if (/^(?:-?\\d*\\.?\\d+(?:deg|rad)|to\\b|top|right|bottom|left)/.test(values[0])) {\n angle = values.shift();\n if (angle.indexOf('to ') < 0) {\n // Angle uses old keywords\n // W3C syntax uses \"to\" + opposite keywords\n if (angle.indexOf('top') >= 0) {\n if (angle.indexOf('left') >= 0) {\n angle = 'to bottom right';\n } else if (angle.indexOf('right') >= 0) {\n angle = 'to bottom left';\n } else {\n angle = 'to bottom';\n }\n } else if (angle.indexOf('bottom') >= 0) {\n if (angle.indexOf('left') >= 0) {\n angle = 'to top right';\n } else if (angle.indexOf('right') >= 0) {\n angle = 'to top left';\n } else {\n angle = 'to top';\n }\n } else if (angle.indexOf('left') >= 0) {\n angle = 'to right';\n } else if (angle.indexOf('right') >= 0) {\n angle = 'to left';\n } else if (prefix) {\n // Angle is shifted by 90deg in prefixed gradients\n if (angle.indexOf('deg') >= 0) {\n angle = 90 - parseFloat(angle) + 'deg';\n } else if (angle.indexOf('rad') >= 0) {\n angle = Math.PI / 2 - parseFloat(angle) + 'rad';\n }\n }\n }\n }\n\n return func + '(' + angle + ',' + values.join(',') + ')';\n };\n\n /**\n * Returns a W3C-valid radial gradient\n * @param {string} prefix Vendor prefix if any (\"-moz-\", \"-webkit-\", etc.)\n * @param {string} func Gradient function name (\"linear-gradient\")\n * @param {string[]} values Array of the gradient function parameters ([\"0deg\", \"red 0%\", \"blue 100%\"])\n */\n var convertToW3CRadialGradient = function (prefix, func, values) {\n if (values[0].indexOf('at') < 0) {\n // Looks like old syntax\n\n // Default values\n var position = 'center';\n var shape = 'ellipse';\n var size = 'farthest-corner';\n\n if (/\\bcenter|top|right|bottom|left\\b|^\\d+/.test(values[0])) {\n // Found a position\n // Remove angle value, if any\n position = values.shift().replace(/\\s*-?\\d+(?:rad|deg)\\s*/, '');\n }\n if (/\\bcircle|ellipse|closest|farthest|contain|cover\\b/.test(values[0])) {\n // Found a shape and/or size\n var shapeSizeParts = values.shift().split(/\\s+/);\n if (\n shapeSizeParts[0] &&\n (shapeSizeParts[0] === 'circle' || shapeSizeParts[0] === 'ellipse')\n ) {\n shape = shapeSizeParts.shift();\n }\n if (shapeSizeParts[0]) {\n size = shapeSizeParts.shift();\n }\n\n // Old keywords are converted to their synonyms\n if (size === 'cover') {\n size = 'farthest-corner';\n } else if (size === 'contain') {\n size = 'clothest-side';\n }\n }\n\n return (\n func + '(' + shape + ' ' + size + ' at ' + position + ',' + values.join(',') + ')'\n );\n }\n return func + '(' + values.join(',') + ')';\n };\n\n /**\n * Converts a gradient to a W3C-valid one\n * Does not support old webkit syntax (-webkit-gradient(linear...) and -webkit-gradient(radial...))\n * @param {string} gradient The CSS gradient\n */\n var convertToW3CGradient = function (gradient) {\n if (cache[gradient]) {\n return cache[gradient];\n }\n var parts = gradient.match(\n /^(\\b|\\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/\n );\n // \"\", \"-moz-\", etc.\n var prefix = parts && parts[1];\n // \"linear-gradient\", \"radial-gradient\", etc.\n var func = parts && parts[2];\n\n var values = gradient\n .replace(/^(?:\\b|\\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\\(|\\)$/g, '')\n .split(/\\s*,\\s*/);\n\n if (func.indexOf('linear') >= 0) {\n return (cache[gradient] = convertToW3CLinearGradient(prefix, func, values));\n } else if (func.indexOf('radial') >= 0) {\n return (cache[gradient] = convertToW3CRadialGradient(prefix, func, values));\n }\n return (cache[gradient] = func + '(' + values.join(',') + ')');\n };\n\n return function () {\n new Prism.plugins.Previewer(\n 'gradient',\n function (value) {\n this.firstChild.style.backgroundImage = '';\n this.firstChild.style.backgroundImage = convertToW3CGradient(value);\n return !!this.firstChild.style.backgroundImage;\n },\n '*',\n function () {\n this._elt.innerHTML = '';\n }\n );\n };\n })(),\n tokens: {\n gradient: {\n pattern: /(?:\\b|\\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\\((?:(?:rgb|hsl)a?\\(.+?\\)|[^\\)])+\\)/gi,\n inside: {\n function: /[\\w-]+(?=\\()/,\n punctuation: /[(),]/,\n },\n },\n },\n languages: {\n css: true,\n less: true,\n sass: [\n {\n lang: 'sass',\n before: 'punctuation',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['variable-line'],\n },\n {\n lang: 'sass',\n before: 'punctuation',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['property-line'],\n },\n ],\n scss: true,\n stylus: [\n {\n lang: 'stylus',\n before: 'func',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,\n },\n {\n lang: 'stylus',\n before: 'func',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,\n },\n ],\n },\n },\n angle: {\n create: function () {\n new Prism.plugins.Previewer(\n 'angle',\n function (value) {\n var num = parseFloat(value);\n var unit = value.match(/[a-z]+$/i);\n var max, percentage;\n if (!num || !unit) {\n return false;\n }\n unit = unit[0];\n\n switch (unit) {\n case 'deg':\n max = 360;\n break;\n case 'grad':\n max = 400;\n break;\n case 'rad':\n max = 2 * Math.PI;\n break;\n case 'turn':\n max = 1;\n }\n\n percentage = (100 * num) / max;\n percentage %= 100;\n\n this[(num < 0 ? 'set' : 'remove') + 'Attribute']('data-negative', '');\n this.querySelector('circle').style.strokeDasharray = Math.abs(percentage) + ',500';\n return true;\n },\n '*',\n function () {\n this._elt.innerHTML =\n '';\n }\n );\n },\n tokens: {\n angle: /(?:\\b|\\B-|(?=\\B\\.))\\d*\\.?\\d+(?:deg|g?rad|turn)\\b/i,\n },\n languages: {\n css: true,\n less: true,\n markup: {\n lang: 'markup',\n before: 'punctuation',\n inside: 'inside',\n root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value'],\n },\n sass: [\n {\n lang: 'sass',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['property-line'],\n },\n {\n lang: 'sass',\n before: 'operator',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['variable-line'],\n },\n ],\n scss: true,\n stylus: [\n {\n lang: 'stylus',\n before: 'func',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,\n },\n {\n lang: 'stylus',\n before: 'func',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,\n },\n ],\n },\n },\n color: {\n create: function () {\n new Prism.plugins.Previewer('color', function (value) {\n this.style.backgroundColor = '';\n this.style.backgroundColor = value;\n return !!this.style.backgroundColor;\n });\n },\n tokens: {\n color: {\n pattern: /\\B#(?:[0-9a-f]{3}){1,2}\\b|\\b(?:rgb|hsl)\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}%?\\s*,\\s*\\d{1,3}%?\\s*\\)\\B|\\b(?:rgb|hsl)a\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}%?\\s*,\\s*\\d{1,3}%?\\s*,\\s*(?:0|0?\\.\\d+|1)\\s*\\)\\B|\\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGray|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGray|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGray|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gray|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGray|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGray|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGray|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\\b/i,\n inside: {\n function: /[\\w-]+(?=\\()/,\n punctuation: /[(),]/,\n },\n },\n },\n languages: {\n css: true,\n less: true,\n markup: {\n lang: 'markup',\n before: 'punctuation',\n inside: 'inside',\n root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value'],\n },\n sass: [\n {\n lang: 'sass',\n before: 'punctuation',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['variable-line'],\n },\n {\n lang: 'sass',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['property-line'],\n },\n ],\n scss: true,\n stylus: [\n {\n lang: 'stylus',\n before: 'hexcode',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,\n },\n {\n lang: 'stylus',\n before: 'hexcode',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,\n },\n ],\n },\n },\n easing: {\n create: function () {\n new Prism.plugins.Previewer(\n 'easing',\n function (value) {\n value =\n {\n linear: '0,0,1,1',\n ease: '.25,.1,.25,1',\n 'ease-in': '.42,0,1,1',\n 'ease-out': '0,0,.58,1',\n 'ease-in-out': '.42,0,.58,1',\n }[value] || value;\n\n var p = value.match(/-?\\d*\\.?\\d+/g);\n\n if (p.length === 4) {\n p = p.map(function (p, i) {\n return (i % 2 ? 1 - p : p) * 100;\n });\n\n this.querySelector('path').setAttribute(\n 'd',\n 'M0,100 C' + p[0] + ',' + p[1] + ', ' + p[2] + ',' + p[3] + ', 100,0'\n );\n\n var lines = this.querySelectorAll('line');\n lines[0].setAttribute('x2', p[0]);\n lines[0].setAttribute('y2', p[1]);\n lines[1].setAttribute('x2', p[2]);\n lines[1].setAttribute('y2', p[3]);\n\n return true;\n }\n\n return false;\n },\n '*',\n function () {\n this._elt.innerHTML =\n '';\n }\n );\n },\n tokens: {\n easing: {\n pattern: /\\bcubic-bezier\\((?:-?\\d*\\.?\\d+,\\s*){3}-?\\d*\\.?\\d+\\)\\B|\\b(?:linear|ease(?:-in)?(?:-out)?)(?=\\s|[;}]|$)/i,\n inside: {\n function: /[\\w-]+(?=\\()/,\n punctuation: /[(),]/,\n },\n },\n },\n languages: {\n css: true,\n less: true,\n sass: [\n {\n lang: 'sass',\n inside: 'inside',\n before: 'punctuation',\n root: Prism.languages.sass && Prism.languages.sass['variable-line'],\n },\n {\n lang: 'sass',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['property-line'],\n },\n ],\n scss: true,\n stylus: [\n {\n lang: 'stylus',\n before: 'hexcode',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,\n },\n {\n lang: 'stylus',\n before: 'hexcode',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,\n },\n ],\n },\n },\n\n time: {\n create: function () {\n new Prism.plugins.Previewer(\n 'time',\n function (value) {\n var num = parseFloat(value);\n var unit = value.match(/[a-z]+$/i);\n if (!num || !unit) {\n return false;\n }\n unit = unit[0];\n this.querySelector('circle').style.animationDuration = 2 * num + unit;\n return true;\n },\n '*',\n function () {\n this._elt.innerHTML =\n '';\n }\n );\n },\n tokens: {\n time: /(?:\\b|\\B-|(?=\\B\\.))\\d*\\.?\\d+m?s\\b/i,\n },\n languages: {\n css: true,\n less: true,\n markup: {\n lang: 'markup',\n before: 'punctuation',\n inside: 'inside',\n root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value'],\n },\n sass: [\n {\n lang: 'sass',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['property-line'],\n },\n {\n lang: 'sass',\n before: 'operator',\n inside: 'inside',\n root: Prism.languages.sass && Prism.languages.sass['variable-line'],\n },\n ],\n scss: true,\n stylus: [\n {\n lang: 'stylus',\n before: 'hexcode',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,\n },\n {\n lang: 'stylus',\n before: 'hexcode',\n inside: 'rest',\n root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,\n },\n ],\n },\n },\n };\n\n /**\n * Returns the absolute X, Y offsets for an element\n * @param {HTMLElement} element\n * @returns {{top: number, right: number, bottom: number, left: number}}\n */\n var getOffset = function (element) {\n var left = 0,\n top = 0,\n el = element;\n\n if (el.parentNode) {\n do {\n left += el.offsetLeft;\n top += el.offsetTop;\n } while ((el = el.offsetParent) && el.nodeType < 9);\n\n el = element;\n\n do {\n left -= el.scrollLeft;\n top -= el.scrollTop;\n } while ((el = el.parentNode) && !/body/i.test(el.nodeName));\n }\n\n return {\n top: top,\n right: innerWidth - left - element.offsetWidth,\n bottom: innerHeight - top - element.offsetHeight,\n left: left,\n };\n };\n\n var tokenRegexp = /(?:^|\\s)token(?=$|\\s)/;\n var activeRegexp = /(?:^|\\s)active(?=$|\\s)/g;\n var flippedRegexp = /(?:^|\\s)flipped(?=$|\\s)/g;\n\n /**\n * Previewer constructor\n * @param {string} type Unique previewer type\n * @param {function} updater Function that will be called on mouseover.\n * @param {string[]|string=} supportedLanguages Aliases of the languages this previewer must be enabled for. Defaults to \"*\", all languages.\n * @param {function=} initializer Function that will be called on initialization.\n * @constructor\n */\n var Previewer = function (type, updater, supportedLanguages, initializer) {\n this._elt = null;\n this._type = type;\n this._clsRegexp = RegExp('(?:^|\\\\s)' + type + '(?=$|\\\\s)');\n this._token = null;\n this.updater = updater;\n this._mouseout = this.mouseout.bind(this);\n this.initializer = initializer;\n\n var self = this;\n\n if (!supportedLanguages) {\n supportedLanguages = ['*'];\n }\n if (Prism.util.type(supportedLanguages) !== 'Array') {\n supportedLanguages = [supportedLanguages];\n }\n supportedLanguages.forEach(function (lang) {\n if (typeof lang !== 'string') {\n lang = lang.lang;\n }\n if (!Previewer.byLanguages[lang]) {\n Previewer.byLanguages[lang] = [];\n }\n if (Previewer.byLanguages[lang].indexOf(self) < 0) {\n Previewer.byLanguages[lang].push(self);\n }\n });\n Previewer.byType[type] = this;\n };\n\n /**\n * Creates the HTML element for the previewer.\n */\n Previewer.prototype.init = function () {\n if (this._elt) {\n return;\n }\n this._elt = document.createElement('div');\n this._elt.className = 'prism-previewer prism-previewer-' + this._type;\n document.body.appendChild(this._elt);\n if (this.initializer) {\n this.initializer();\n }\n };\n\n Previewer.prototype.isDisabled = function (token) {\n do {\n if (token.hasAttribute && token.hasAttribute('data-previewers')) {\n var previewers = token.getAttribute('data-previewers');\n return (previewers || '').split(/\\s+/).indexOf(this._type) === -1;\n }\n } while ((token = token.parentNode));\n return false;\n };\n\n /**\n * Checks the class name of each hovered element\n * @param token\n */\n Previewer.prototype.check = function (token) {\n if (tokenRegexp.test(token.className) && this.isDisabled(token)) {\n return;\n }\n do {\n if (tokenRegexp.test(token.className) && this._clsRegexp.test(token.className)) {\n break;\n }\n } while ((token = token.parentNode));\n\n if (token && token !== this._token) {\n this._token = token;\n this.show();\n }\n };\n\n /**\n * Called on mouseout\n */\n Previewer.prototype.mouseout = function () {\n this._token.removeEventListener('mouseout', this._mouseout, false);\n this._token = null;\n this.hide();\n };\n\n /**\n * Shows the previewer positioned properly for the current token.\n */\n Previewer.prototype.show = function () {\n if (!this._elt) {\n this.init();\n }\n if (!this._token) {\n return;\n }\n\n if (this.updater.call(this._elt, this._token.textContent)) {\n this._token.addEventListener('mouseout', this._mouseout, false);\n\n var offset = getOffset(this._token);\n this._elt.className += ' active';\n\n if (offset.top - this._elt.offsetHeight > 0) {\n this._elt.className = this._elt.className.replace(flippedRegexp, '');\n this._elt.style.top = offset.top + 'px';\n this._elt.style.bottom = '';\n } else {\n this._elt.className += ' flipped';\n this._elt.style.bottom = offset.bottom + 'px';\n this._elt.style.top = '';\n }\n\n this._elt.style.left = offset.left + Math.min(200, this._token.offsetWidth / 2) + 'px';\n } else {\n this.hide();\n }\n };\n\n /**\n * Hides the previewer.\n */\n Previewer.prototype.hide = function () {\n this._elt.className = this._elt.className.replace(activeRegexp, '');\n };\n\n /**\n * Map of all registered previewers by language\n * @type {{}}\n */\n Previewer.byLanguages = {};\n\n /**\n * Map of all registered previewers by type\n * @type {{}}\n */\n Previewer.byType = {};\n\n /**\n * Initializes the mouseover event on the code block.\n * @param {HTMLElement} elt The code block (env.element)\n * @param {string} lang The language (env.language)\n */\n Previewer.initEvents = function (elt, lang) {\n var previewers = [];\n if (Previewer.byLanguages[lang]) {\n previewers = previewers.concat(Previewer.byLanguages[lang]);\n }\n if (Previewer.byLanguages['*']) {\n previewers = previewers.concat(Previewer.byLanguages['*']);\n }\n elt.addEventListener(\n 'mouseover',\n function (e) {\n var target = e.target;\n previewers.forEach(function (previewer) {\n previewer.check(target);\n });\n },\n false\n );\n };\n Prism.plugins.Previewer = Previewer;\n\n Prism.hooks.add('before-highlight', function (env) {\n for (var previewer in previewers) {\n var languages = previewers[previewer].languages;\n if (env.language && languages[env.language] && !languages[env.language].initialized) {\n var lang = languages[env.language];\n if (Prism.util.type(lang) !== 'Array') {\n lang = [lang];\n }\n lang.forEach(function (lang) {\n var before, inside, root, skip;\n if (lang === true) {\n before = 'important';\n inside = env.language;\n lang = env.language;\n } else {\n before = lang.before || 'important';\n inside = lang.inside || lang.lang;\n root = lang.root || Prism.languages;\n skip = lang.skip;\n lang = env.language;\n }\n\n if (!skip && Prism.languages[lang]) {\n Prism.languages.insertBefore(inside, before, previewers[previewer].tokens, root);\n env.grammar = Prism.languages[lang];\n\n languages[env.language] = { initialized: true };\n }\n });\n }\n }\n });\n\n // Initialize the previewers only when needed\n Prism.hooks.add('after-highlight', function (env) {\n if (Previewer.byLanguages['*'] || Previewer.byLanguages[env.language]) {\n Previewer.initEvents(env.element, env.language);\n }\n });\n\n for (var previewer in previewers) {\n previewers[previewer].create();\n }\n})();\n(function () {\n var assign =\n Object.assign ||\n function (obj1, obj2) {\n for (var name in obj2) {\n if (obj2.hasOwnProperty(name)) obj1[name] = obj2[name];\n }\n return obj1;\n };\n\n function NormalizeWhitespace(defaults) {\n this.defaults = assign({}, defaults);\n }\n\n function toCamelCase(value) {\n return value.replace(/-(\\w)/g, function (match, firstChar) {\n return firstChar.toUpperCase();\n });\n }\n\n function tabLen(str) {\n var res = 0;\n for (var i = 0; i < str.length; ++i) {\n if (str.charCodeAt(i) == '\\t'.charCodeAt(0)) res += 3;\n }\n return str.length + res;\n }\n\n NormalizeWhitespace.prototype = {\n setDefaults: function (defaults) {\n this.defaults = assign(this.defaults, defaults);\n },\n normalize: function (input, settings) {\n settings = assign(this.defaults, settings);\n\n for (var name in settings) {\n var methodName = toCamelCase(name);\n if (\n name !== 'normalize' &&\n methodName !== 'setDefaults' &&\n settings[name] &&\n this[methodName]\n ) {\n input = this[methodName].call(this, input, settings[name]);\n }\n }\n\n return input;\n },\n\n /*\n * Normalization methods\n */\n leftTrim: function (input) {\n return input.replace(/^\\s+/, '');\n },\n rightTrim: function (input) {\n return input.replace(/\\s+$/, '');\n },\n tabsToSpaces: function (input, spaces) {\n spaces = spaces | 0 || 4;\n return input.replace(/\\t/g, new Array(++spaces).join(' '));\n },\n spacesToTabs: function (input, spaces) {\n spaces = spaces | 0 || 4;\n return input.replace(new RegExp(' {' + spaces + '}', 'g'), '\\t');\n },\n removeTrailing: function (input) {\n return input.replace(/\\s*?$/gm, '');\n },\n // Support for deprecated plugin remove-initial-line-feed\n removeInitialLineFeed: function (input) {\n return input.replace(/^(?:\\r?\\n|\\r)/, '');\n },\n removeIndent: function (input) {\n var indents = input.match(/^[^\\S\\n\\r]*(?=\\S)/gm);\n\n if (!indents || !indents[0].length) return input;\n\n indents.sort(function (a, b) {\n return a.length - b.length;\n });\n\n if (!indents[0].length) return input;\n\n return input.replace(new RegExp('^' + indents[0], 'gm'), '');\n },\n indent: function (input, tabs) {\n return input.replace(/^[^\\S\\n\\r]*(?=\\S)/gm, new Array(++tabs).join('\\t') + '$&');\n },\n breakLines: function (input, characters) {\n characters = characters === true ? 80 : characters | 0 || 80;\n\n var lines = input.split('\\n');\n for (var i = 0; i < lines.length; ++i) {\n if (tabLen(lines[i]) <= characters) continue;\n\n var line = lines[i].split(/(\\s+)/g),\n len = 0;\n\n for (var j = 0; j < line.length; ++j) {\n var tl = tabLen(line[j]);\n len += tl;\n if (len > characters) {\n line[j] = '\\n' + line[j];\n len = tl;\n }\n }\n lines[i] = line.join('');\n }\n return lines.join('\\n');\n },\n };\n\n // Support node modules\n if (typeof module !== 'undefined' && module.exports) {\n module.exports = NormalizeWhitespace;\n }\n\n // Exit if prism is not loaded\n if (typeof Prism === 'undefined') {\n return;\n }\n\n Prism.plugins.NormalizeWhitespace = new NormalizeWhitespace({\n 'remove-trailing': true,\n 'remove-indent': true,\n 'left-trim': true,\n 'right-trim': true,\n /*'break-lines': 80,\n\t'indent': 2,\n\t'remove-initial-line-feed': false,\n\t'tabs-to-spaces': 4,\n\t'spaces-to-tabs': 4*/\n });\n\n Prism.hooks.add('before-sanity-check', function (env) {\n var Normalizer = Prism.plugins.NormalizeWhitespace;\n\n // Check settings\n if (env.settings && env.settings['whitespace-normalization'] === false) {\n return;\n }\n\n // Simple mode if there is no env.element\n if ((!env.element || !env.element.parentNode) && env.code) {\n env.code = Normalizer.normalize(env.code, env.settings);\n return;\n }\n\n // Normal mode\n var pre = env.element.parentNode;\n var clsReg = /\\bno-whitespace-normalization\\b/;\n if (\n !env.code ||\n !pre ||\n pre.nodeName.toLowerCase() !== 'pre' ||\n clsReg.test(pre.className) ||\n clsReg.test(env.element.className)\n )\n return;\n\n var children = pre.childNodes,\n before = '',\n after = '',\n codeFound = false;\n\n // Move surrounding whitespace from the tag into the tag\n for (var i = 0; i < children.length; ++i) {\n var node = children[i];\n\n if (node == env.element) {\n codeFound = true;\n } else if (node.nodeName === '#text') {\n if (codeFound) {\n after += node.nodeValue;\n } else {\n before += node.nodeValue;\n }\n\n pre.removeChild(node);\n --i;\n }\n }\n\n if (!env.element.children.length || !Prism.plugins.KeepMarkup) {\n env.code = before + env.code + after;\n env.code = Normalizer.normalize(env.code, env.settings);\n } else {\n // Preserve markup for keep-markup plugin\n var html = before + env.element.innerHTML + after;\n env.element.innerHTML = Normalizer.normalize(html, env.settings);\n env.code = env.element.textContent;\n }\n });\n})();\n(function () {\n if (typeof self === 'undefined' || !self.Prism || !self.document) {\n return;\n }\n\n if (!Prism.plugins.toolbar) {\n console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.');\n\n return;\n }\n\n var ClipboardJS = window.ClipboardJS || undefined;\n\n if (!ClipboardJS && typeof require === 'function') {\n ClipboardJS = require('clipboard');\n }\n\n var callbacks = [];\n\n if (!ClipboardJS) {\n var script = document.createElement('script');\n var head = document.querySelector('head');\n\n script.onload = function () {\n ClipboardJS = window.ClipboardJS;\n\n if (ClipboardJS) {\n while (callbacks.length) {\n callbacks.pop()();\n }\n }\n };\n\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js';\n head.appendChild(script);\n }\n\n Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {\n var linkCopy = document.createElement('button');\n linkCopy.innerHTML = 'Copy';\n linkCopy.classList = 'btn-copy-code btn btn-dark btn-sm';\n\n if (!ClipboardJS) {\n callbacks.push(registerClipboard);\n } else {\n registerClipboard();\n }\n\n return linkCopy;\n\n function registerClipboard() {\n var clip = new ClipboardJS(linkCopy, {\n text: function () {\n return env.code;\n },\n });\n\n clip.on('success', function () {\n linkCopy.textContent = 'Copied!';\n\n resetText();\n });\n clip.on('error', function () {\n linkCopy.textContent = 'Press Ctrl+C to copy';\n\n resetText();\n });\n }\n\n function resetText() {\n setTimeout(function () {\n linkCopy.innerHTML = 'Copy';\n }, 5000);\n }\n });\n})();\n"
},
{
"path": "dev/js/src/mdbsnippet.js",
"content": "const Entities = require('html-entities').AllHtmlEntities;\nconst entities = new Entities();\n\nclass MdbSnippet {\n constructor(el) {\n this.el = el;\n this.data = [];\n }\n\n init() {\n this._getData();\n this._encode();\n this._replaceContent();\n }\n\n _getData() {\n const codeElements = Array.from(this.el.getElementsByTagName('code'));\n\n codeElements.forEach((codeElement) => {\n this.data.push({\n lang: codeElement.dataset.lang,\n name: codeElement.dataset.name,\n content: codeElement.innerHTML,\n });\n });\n }\n\n _encode() {\n this.data.forEach((data, index, arr) => {\n arr[index].content = entities.encode(data.content);\n });\n }\n\n _createContent() {\n const docsPills = document.createElement('div');\n const toolbar = document.createElement('div');\n const ul = document.createElement('ul');\n const tabContent = document.createElement('div');\n\n docsPills.setAttribute('class', 'docs-pills border');\n toolbar.setAttribute('class', 'd-flex justify-content-between py-2');\n toolbar.style.paddingLeft = '.6rem';\n ul.setAttribute('class', 'nav nav-pills');\n tabContent.setAttribute('class', 'tab-content');\n\n this.data.forEach((data, index) => {\n const li = document.createElement('li');\n const a = document.createElement('a');\n\n const tabPane = document.createElement('div');\n const codeWrapper = document.createElement('code');\n const preWrapper = document.createElement('pre');\n\n const id = Math.floor((Math.random() + Math.floor(Math.random() * 9) + 1) * Math.pow(10, 8));\n\n li.setAttribute('class', 'nav-item');\n a.setAttribute('role', 'tab');\n a.setAttribute('href', `#mdb${id}`);\n a.setAttribute('class', 'nav-link');\n a.dataset.toggle = 'tab';\n a.innerHTML = data.name;\n\n li.appendChild(a);\n ul.appendChild(li);\n\n codeWrapper.setAttribute('class', `line-numbers language-${data.lang}`);\n codeWrapper.innerHTML = data.content;\n preWrapper.appendChild(codeWrapper);\n preWrapper.setAttribute('class', 'mb-0');\n\n tabPane.setAttribute('role', 'tabpanel');\n tabPane.setAttribute('id', `mdb${id}`);\n\n if (index === 0) {\n a.setAttribute('class', 'nav-link active show');\n tabPane.setAttribute('class', 'tab-pane fade active show');\n } else {\n a.setAttribute('class', 'nav-link');\n tabPane.setAttribute('class', 'tab-pane');\n }\n\n tabPane.appendChild(preWrapper);\n tabContent.appendChild(tabPane);\n });\n\n toolbar.appendChild(ul);\n docsPills.appendChild(toolbar);\n docsPills.appendChild(tabContent);\n this.el.appendChild(docsPills);\n }\n\n _replaceContent() {\n this._removeContent();\n this._createContent();\n }\n\n _removeContent() {\n this.el.innerHTML = '';\n }\n}\n\nconst mdbsnippets = Array.from(document.getElementsByTagName('mdbsnippet'));\nmdbsnippets.forEach((mdbsnippet) => {\n new MdbSnippet(mdbsnippet).init();\n});\n"
},
{
"path": "free/components/accordion.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Basic
\n\n
\n\n \n \n \n \n Accordion Item #1\n \n
\n \n \n This is the first item's accordion body. It is hidden by default,\n until the collapse plugin adds the appropriate classes that we use to style each\n element. These classes control the overall appearance, as well as the showing and\n hiding via CSS transitions. You can modify any of this with custom CSS or overriding\n our default variables. It's also worth noting that just about any HTML can go within\n the .accordion-body, though the transition does limit overflow.\n \n \n \n \n \n \n Accordion Item #2\n \n
\n \n \n This is the second item's accordion body. It is hidden by default,\n until the collapse plugin adds the appropriate classes that we use to style each\n element. These classes control the overall appearance, as well as the showing and\n hiding via CSS transitions. You can modify any of this with custom CSS or overriding\n our default variables. It's also worth noting that just about any HTML can go within\n the .accordion-body, though the transition does limit overflow.\n \n \n \n \n \n \n Accordion Item #3\n \n
\n \n \n This is the third item's accordion body. It is hidden by default,\n until the collapse plugin adds the appropriate classes that we use to style each\n element. These classes control the overall appearance, as well as the showing and\n hiding via CSS transitions. You can modify any of this with custom CSS or overriding\n our default variables. It's also worth noting that just about any HTML can go within\n the .accordion-body, though the transition does limit overflow.\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/alert.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Alerts
\n\n \n Bootstrap 5 Alerts
\n\n \n \n Provide contextual feedback messages for typical user actions with the handful\n of available and flexible alert messages.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n \n A simple primary alert—check it out!\n \n \n A simple secondary alert—check it out!\n \n \n A simple success alert—check it out!\n \n \n A simple danger alert—check it out!\n \n \n A simple warning alert—check it out!\n \n \n A simple info alert—check it out!\n \n \n A simple light alert—check it out!\n \n \n A simple dark alert—check it out!\n \n \n \n \n\n \n \n \n \n \n A simple primary alert—check it out!\n \n \n A simple secondary alert—check it out!\n \n \n A simple success alert—check it out!\n \n \n A simple danger alert—check it out!\n \n \n A simple warning alert—check it out!\n \n \n A simple info alert—check it out!\n \n \n A simple light alert—check it out!\n \n \n A simple dark alert—check it out!\n \n \n \n \n \n \n \n\n
\n\n \n \n \n Link Color
\n\n \n \n \n \n A simple primary alert with\n an example link. Give it a click if you\n like.\n \n \n A simple secondary alert with\n an example link. Give it a click if you\n like.\n \n \n A simple success alert with\n an example link. Give it a click if you\n like.\n \n \n A simple danger alert with\n an example link. Give it a click if you\n like.\n \n \n A simple warning alert with\n an example link. Give it a click if you\n like.\n \n \n A simple info alert with an example link.\n Give it a click if you like.\n \n \n A simple light alert with\n an example link. Give it a click if you\n like.\n \n \n A simple dark alert with an example link.\n Give it a click if you like.\n \n \n \n \n\n \n \n \n \n \n A simple primary alert with\n an example link. Give it a click if you\n like.\n \n \n A simple secondary alert with\n an example link. Give it a click if you\n like.\n \n \n A simple success alert with\n an example link. Give it a click if you\n like.\n \n \n A simple danger alert with\n an example link. Give it a click if you\n like.\n \n \n A simple warning alert with\n an example link. Give it a click if you\n like.\n \n \n A simple info alert with\n an example link. Give it a click if you\n like.\n \n \n A simple light alert with\n an example link. Give it a click if you\n like.\n \n \n A simple dark alert with\n an example link. Give it a click if you\n like.\n \n \n \n \n \n \n \n\n
\n\n \n \n \n Additional Content
\n\n \n \n \n \n Well done!
\n \n Aww yeah, you successfully read this important alert message. This example\n text is going to run a bit longer so that you can see how spacing within\n an alert works with this kind of content.\n
\n
\n \n Whenever you need to, be sure to use margin utilities to keep things nice\n and tidy.\n
\n \n \n \n \n\n \n \n \n \n \n Well done!
\n \n Aww yeah, you successfully read this important alert message. This\n example text is going to run a bit longer so that you can see how\n spacing within an alert works with this kind of content.\n
\n
\n \n Whenever you need to, be sure to use margin utilities to keep things\n nice and tidy.\n
\n \n \n \n \n \n \n \n\n
\n\n \n \n \n Dismissing
\n\n \n Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.\n Here’s how:\n
\n \n - \n Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.\n
\n - \n Add a close button and the
.alert-dismissible class, which adds\n extra padding to the right of the alert and positions the close button.\n \n - \n On the close button, add the
data-mdb-dismiss=\"alert\" attribute,\n which triggers the JavaScript functionality. Be sure to use the\n button element with it for proper behavior across all devices.\n \n - \n To animate alerts when dismissing them, be sure to add the\n
.fade and .show classes.\n \n
\n You can see this in action with a live demo:
\n\n \n \n \n \n Holy guacamole! You should check in on some of those fields\n below.\n \n \n \n \n \n\n \n \n \n \n \n Holy guacamole! You should check in on some of those\n fields below.\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n - \n Introduction\n
\n - \n Basic example\n
\n - \n Link Color\n
\n - \n Additional Content\n
\n - \n Dismissing\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/badge.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Example
\n\n Example heading New
\n Example heading New
\n Example heading New
\n Example heading New
\n Example heading New
\n Example heading New
\n\n Notifications
\n\n \n\n \n\n \n\n Background colors
\n\n Primary\n Secondary\n Success\n Danger\n Warning\n Info\n Light\n Dark\n\n Pill badges
\n\n Primary\n Secondary\n Success\n Danger\n Warning\n Info\n Light\n Dark\n\n Material badges
\n\n \n \n \n \n\n
\n
\n\n \n \n 1\n \n\n
\n
\n\n \n \n 999+\n \n \n \n\n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/breadcrumb.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Basic
\n\n
\n\n \n\n \n\n \n\n
\n \n\n \n\n
\n
\n\n \n\n
\n \n\n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/button-group.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n
\n
\n
\n\n \n\n
\n
\n
\n\n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n \n\n
\n
\n
\n \n\n Button standard
\n\n \n \n Button standard i standard rounded
\n\n \n \n \n \n \n Button z borderem i z borderem rounded (dałam btn-light zeby lepiej było defaultowy\n bootstrapowy border widac)\n
\n\n \n \n \n \n\n Button toolbar
\n\n \n\n
\n
\n
\n\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n\n \n \n Dropdown\n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n \n \n Dropdown\n \n \n \n \n \n \n \n Dropdown\n \n \n \n \n \n Dropdown\n \n \n \n \n \n Dropdown\n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/buttons-2.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n \n\n
\n
\n \n \n \n \n \n \n\n
\n
\n\n \n \n \n\n
\n
\n\n \n\n
\n
\n\n \n\n
\n
\n\n \n\n
\n
\n\n \n \n \n \n \n \n \n \n\n \n\n
\n
\n\n \n \n \n \n \n \n \n \n\n \n\n
\n
\n\n \n \n \n \n \n \n \n \n\n \n\n
\n
\n\n \n \n \n \n \n \n \n \n\n \n\n
\n
\n\n \n \n \n \n \n \n \n \n\n \n\n
\n
\n\n \n \n \n \n \n \n \n \n\n \n\n
\n
\n \n\n \n \n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n \n\n
\n\n Primary link\n Link\n Primary link\n Link\n Primary link\n Link\n\n
\n
\n\n \n \n \n \n \n \n\n
\n
\n\n Primary link \n Link \n Primary link \n Link \n Primary link \n Link \n\n
\n
\n\n \n \n \n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n \n\n \n\n \n \n\n
\n
\n\n \n \n \n \n \n \n\n \n\n \n \n\n
\n
\n\n \n \n \n \n \n \n\n \n\n \n \n\n
\n
\n\n \n\n \n \n \n \n\n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/buttons.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Buttons
\n\n \n Buttons - Bootstrap 5 & Fluent Design component
\n\n \n \n Use MDB custom button styles for actions in forms, dialogs, and more with\n support for multiple sizes, states, and more.\n
\n\n \n Note: Read the API tab to find all available\n options and advanced customization\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n Disable text wrapping
\n \n If you don’t want the button text to wrap, you can add the\n .text-nowrap class to the button. In Sass, you can set\n $btn-white-space: nowrap to disable text wrapping for each button.\n
\n \n \n\n
\n\n \n \n \n Colors
\n\n \n \n MDB includes several predefined button styles, each serving its own semantic\n purpose, with a few extras thrown in for more control.\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Conveying meaning to assistive technologies:\n
\n Using color to add meaning only provides a visual indication, which will not be\n conveyed to users of assistive technologies – such as screen readers. Ensure\n that information denoted by the color is either obvious from the content itself\n (e.g. the visible text), or is included through alternative means, such as\n additional text hidden with the\n .visually-hidden class.\n
\n \n \n\n
\n\n \n \n \n Outline
\n\n \n \n In need of a button, but not the hefty background colors they bring? Replace the\n default modifier classes with the .btn-outline-* ones to remove all\n background images and colors on any button.\n
\n\n \n In the outline buttons, we recommend adding\n data-mdb-ripple-color=\"dark\" to change the color of the\n ripple effect. The default light color of the ripple (applied\n automatically to every button) may not be well visible in the case of light and\n outline buttons.\n
\n\n \n To learn more about the ripple effect and all the available options have a look\n at\n Ripple Docs.\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n Some of the button styles use a relatively light foreground color, and should\n only be used on a dark background in order to have sufficient contrast.\n
\n \n \n\n
\n\n \n \n \n Rounded
\n\n \n Add .btn-rounded class to make the button rounded.
\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Rounded outline
\n\n \n \n You can use .btn-outline-* and .btn-rounded together\n to make the button outline and rounded at the same time.\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Floating
\n\n \n Use .btn-floating class to make a circle button.
\n\n \n To make it works properly you have to put an icon inside. The\n text will not fit in. You can find hundreds of available icons in our\n icons docs.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n You can apply almost all the same classes and attributes to the floating buttons\n as to the regular buttons - colors, ripples, sizes, outline, etc.\n
\n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n Sizes
\n\n \n \n Fancy larger or smaller buttons? Add .btn-lg or\n .btn-sm for additional sizes.\n
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Active state
\n\n \n Add .active class to make the button look pressed.
\n\n \n \n Primary link\n Link\n \n \n\n \n \n \n \n Primary\n link\n Link\n \n \n \n \n \n \n\n
\n\n \n \n \n Disabled state
\n\n \n \n Make buttons look inactive by adding the disabled boolean attribute\n to any <button> element. Disabled buttons have\n pointer-events: none applied to, preventing hover and active states\n from triggering.\n
\n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n Disabled buttons using the <a> element behave a bit\n different:\n
\n\n \n - \n
<a>s don’t support the disabled attribute, so\n you must add the .disabled class to make it visually appear\n disabled.\n \n - \n Some future-friendly styles are included to disable all\n
pointer-events on anchor buttons. In browsers which support that\n property, you won’t see the disabled cursor at all.\n \n - \n Disabled buttons should include the\n
aria-disabled=\"true\" attribute to indicate the state of the\n element to assistive technologies.\n \n
\n\n \n \n Primary link\n Link\n \n \n\n \n \n \n \n Primary link\n Link\n \n \n \n \n \n Link functionality caveat:\n
\n The .disabled class uses pointer-events: none to try\n to disable the link functionality of <a>s, but that CSS\n property is not yet standardized. In addition, even in browsers that do support\n pointer-events: none, keyboard navigation remains unaffected,\n meaning that sighted keyboard users and users of assistive technologies will\n still be able to activate these links. So to be safe, add a\n tabindex=\"-1\" attribute on these links (to prevent them from\n receiving keyboard focus) and use custom JavaScript to disable their\n functionality.\n
\n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n Toggle states
\n\n \n \n Add data-mdb-toggle=\"button\" to toggle a button’s\n active state. If you’re pre-toggling a button, you must manually\n add the .active class and\n aria-pressed=\"true\" to the <button>.\n
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n Toggle link\n Active toggle link\n Disabled toggle\n link\n \n \n\n \n \n \n \n Toggle link\n Active toggle link\n Disabled\n toggle link\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n - \n Introduction\n
\n - \n Basic example\n
\n - \n Colors\n
\n - \n Outline\n
\n - \n Rounded\n
\n - \n Rounded outline\n
\n - \n Floating\n
\n - \n Fixed buttons\n
\n - \n Social\n
\n - \n Sample brands\n
\n - \n Floating social\n
\n - \n Text\n
\n - \n Only icon\n
\n - \n Notifications\n
\n
\n \n - \n Tags\n
\n - \n Sizes\n
\n - \n Active state\n
\n - \n Disabled state\n
\n - \n Block buttons\n
\n - \n Toggle states\n
\n \n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Buttons - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n For all buttons except fixed buttons
\n \n \n \n \n \n \n\n Via JavaScript
\n\n \n \n \n const exampleEl = document.querySelector('example');\n const myButton = new mdb.Button(exampleEl);\n \n \n\n Via jQuery
\n\n \n Note: By default, MDB does not include jQuery\n and you have to add it to the project on your own.\n
\n\n \n \n \n $('#exampleID').button('methodName');\n \n \n \n \n\n
\n\n \n \n \n Methods
\n\n You can create a button instance with the button constructor, for example:
\n\n \n \n \n const button = document.querySelector('#myButton')\n const bsButton = new mdb.Button(button)\n \n \n\n \n \n \n Method \n Description \n Example \n \n \n \n \n \n dispose\n \n Destroys an element's button. \n instance.dispose() \n \n \n \n toggle\n \n \n Toggles push state. Gives the button the appearance that it has been\n activated.\n \n instance.toggle() \n \n \n \n show\n \n Manually opens fixed button list. \n instance.show() \n \n \n \n hide\n \n Manually hides fixed button list. \n instance.hide() \n \n \n
\n\n For example, to toggle all buttons
\n\n \n \n\n \n const buttons = document.querySelectorAll('.btn')\n buttons.forEach((button) => {\n const button = new mdb.Button(button)\n button.toggle()\n })\n \n\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.mdb.button\n \n \n This event fires immediately when the fixed button\n show method has been called.\n \n \n \n \n shown.mdb.button\n \n \n This event is fired when a fixed button list has been made visible to\n the user (will wait for CSS transitions to complete).\n \n \n \n \n hide.mdb.button\n \n \n This event is fired immediately when the fixed button\n hide method has been called.\n \n \n \n \n hidden.mdb.button\n \n \n This event is fired when a fixed button list has been hidden from the\n user (will wait for CSS transitions to complete).\n \n \n \n
\n \n\n \n \n \n const myFixedButton = document.getElementById('myFixedButton')\n myFixedButton.addEventListener('show.mdb.button', function (e) {\n // do something...\n })\n \n \n \n \n\n
\n\n \n \n \n Import
\n\n \n \n MDB UI KIT also works with module bundlers. Use the following\n code to import this component:\n
\n\n \n \n \n import { Button } from 'mdb-ui-kit';\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/card.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the bulk of the\n card's content.\n
\n \n \n \n \n\n \n \n Card title
\n \n Some quick example text to build on the card title and make up the bulk of the\n card's content.\n
\n Button\n \n \n \n\n \n \n Featured\n \n Special title treatment
\n \n With supporting text below as a natural lead-in to additional content.\n
\n Button\n \n \n \n \n \n\n \n \n \n Large_file_name_…s_truncating.pptx
\n \n Annie Lindqvist
\n Created a few minutes ago
\n \n \n \n \n \n \n\n \n \n \n \n Revenue stream proposal fiscal year 2016 version02.pptx
\n \n Roko Kolar
\n Created a few minutes ago
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n View and share files
\n \n Aaron Reid
\n Created a few minutes ago
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n Conversation about takeaways from annual SharePoint conference\n
\n \n Christina Bergqvist
\n Sent a few minutes ago
\n \n \n \n \n \n \n \n \n\n \n \n\n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the bulk of the\n card's content.\n
\n Call to action\n \n \n \n \n \n\n \n \n Jim Lohan
\n UX Designer
\n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, deserunt.\n
\n \n \n - \n \n Ellsworth , ME\n
\n - \n \n 123 456 789\n
\n - \n \n exmaple@exmaple.com\n
\n
\n \n \n \n \n\n \n \n \n \n \n \n Lorem, ipsum.
\n Lorem, ipsum.
\n
\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere facilis ullam est\n velit corporis corrupti nisi dolore soluta fugit provident!\n
\n \n \n - \n Lorem ipsum dolor sit.\n
\n - \n Lorem ipsum dolor sit.\n
\n - \n Lorem ipsum dolor sit.\n
\n - \n Lorem ipsum dolor sit.\n
\n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/carousel.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Placeholder \n First slide \n \n \n \n \n Placeholder \n Second slide \n \n \n \n \n Placeholder \n Third slide \n \n \n \n \n\n
\n\n \n \n \n \n Placeholder \n First slide \n \n \n \n \n Placeholder \n Second slide \n \n \n \n \n Placeholder \n Third slide \n \n \n \n \n \n Previous\n \n \n \n Next\n \n \n\n
\n\n \n \n \n \n \n
\n \n \n \n Placeholder \n First slide \n \n \n \n \n Placeholder \n Second slide \n \n \n \n \n Placeholder \n Third slide \n \n \n \n \n \n Previous\n \n \n \n Next\n \n \n\n
\n\n \n \n \n \n \n
\n \n \n \n Placeholder \n First slide \n \n\n \n First slide label
\n Nulla vitae elit libero, a pharetra augue mollis interdum.
\n \n \n \n \n Placeholder \n Second slide \n \n\n \n Second slide label
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\n \n \n \n \n Placeholder \n Third slide \n \n\n \n Third slide label
\n Praesent commodo cursus magna, vel scelerisque nisl consectetur.
\n \n \n \n \n \n Previous\n \n \n \n Next\n \n \n\n
\n\n \n \n \n \n Placeholder \n First slide \n \n \n \n \n Placeholder \n Second slide \n \n \n \n \n Placeholder \n Third slide \n \n \n \n \n \n Previous\n \n \n \n Next\n \n \n\n
\n\n \n \n \n \n Placeholder \n First slide \n \n \n \n \n Placeholder \n Second slide \n \n \n \n \n Placeholder \n Third slide \n \n \n \n \n \n Previous\n \n \n \n Next\n \n \n\n
\n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/close.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Basic
\n\n
\n\n \n \n\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/collapse.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Basic
\n\n
\n\n \n \n Link with href\n \n \n Button with data-mdb-target\n \n
\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad\n squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente\n ea proident.\n \n\n
\n
\n\n \n \n Toggle first element\n \n \n Toggle second element\n \n \n Toggle both elements\n \n
\n \n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad\n squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident.\n \n \n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad\n squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident.\n \n \n \n\n
\n
\n\n \n \n \n \n \n \n Collapsible Group Item #1\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson\n ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck\n quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on\n it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh\n helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan\n excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim\n aesthetic synth nesciunt you probably haven't heard of them accusamus labore\n sustainable VHS.\n \n\n \n \n \n Collapsible Group Item #2\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson\n ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck\n quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on\n it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh\n helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan\n excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim\n aesthetic synth nesciunt you probably haven't heard of them accusamus labore\n sustainable VHS.\n \n\n \n \n \n Collapsible Group Item #3\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson\n ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck\n quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on\n it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh\n helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan\n excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim\n aesthetic synth nesciunt you probably haven't heard of them accusamus labore\n sustainable VHS.\n \n \n \n\n \n \n \n \n \n \n Collapsible Group Item #1\n \n
\n \n\n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,\n sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch\n et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat\n craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't\n heard of them accusamus labore sustainable VHS.\n \n \n \n \n \n \n \n Collapsible Group Item #2\n \n
\n \n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,\n sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch\n et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat\n craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't\n heard of them accusamus labore sustainable VHS.\n \n \n \n \n \n \n \n Collapsible Group Item #3\n \n
\n \n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,\n sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch\n et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat\n craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't\n heard of them accusamus labore sustainable VHS.\n \n \n \n \n \n\n \n \n \n \n \n \n Collapsible Group Item #1\n \n
\n \n\n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,\n sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch\n et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat\n craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't\n heard of them accusamus labore sustainable VHS.\n \n \n \n \n \n \n \n Collapsible Group Item #2\n \n
\n \n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,\n sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch\n et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat\n craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't\n heard of them accusamus labore sustainable VHS.\n \n \n \n \n \n \n \n Collapsible Group Item #3\n \n
\n \n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,\n sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch\n et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat\n craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't\n heard of them accusamus labore sustainable VHS.\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/dropdown.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Basic
\n\n
\n\n \n \n \n \n\n
\n\n \n \n 1\n \n\n
\n\n \n \n 999+\n \n\n
\n
\n\n Hidden arrow
\n\n \n \n Dropdown button\n \n \n \n\n
\n\n \n \n Dropdown button\n \n \n \n\n
\n\n \n \n Dropdown link\n \n\n \n \n\n
\n\n \n \n \n Primary\n \n \n \n \n \n \n Secondary\n \n \n \n \n \n \n Success\n \n \n \n \n \n \n Info\n \n \n \n \n \n \n Warning\n \n \n \n \n \n \n Danger\n \n \n \n \n \n\n
\n\n \n \n \n \n Toggle Dropdown\n \n \n \n \n \n \n \n Toggle Dropdown\n \n \n \n \n \n \n \n Toggle Dropdown\n \n \n \n \n \n \n \n Toggle Dropdown\n \n \n \n \n \n \n \n Toggle Dropdown\n \n \n \n \n \n \n \n Toggle Dropdown\n \n \n \n \n \n\n
\n\n \n \n \n\n
\n\n \n\n \n \n\n
\n\n \n \n \n Dropup\n \n \n \n \n \n \n Toggle Dropdown\n \n \n \n \n\n
\n\n \n \n \n Dropend\n \n \n \n \n \n \n Toggle Dropend\n \n \n \n \n\n
\n\n \n \n \n Dropstart\n \n \n \n \n \n \n Toggle Dropstart\n \n \n \n \n \n \n\n
\n\n \n \n \n Dropdown\n \n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n Right-aligned menu\n \n \n \n \n\n
\n\n \n \n \n Left-aligned but right aligned when large screen\n \n \n \n \n\n
\n\n \n \n \n Right-aligned but left aligned when large screen\n \n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n \n Offset\n \n \n \n \n \n \n Toggle Dropdown\n \n \n \n \n \n\n
\n\n \n \n Dropdown button - animation off\n \n \n \n\n \n\n
\n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/footer.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Footer
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Supported content
\n\n \n \n \n \n \n\n
\n\n \n \n \n \n \n\n
\n\n \n \n \n \n \n\n
\n\n \n \n \n \n \n\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/full-demo.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n Demo
\n FD Bootstrap Components
\n \n Visual guide of components in the newest Bootstrap 5 and Fluent Design\n
\n
\n \n\n \n Cards
\n\n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the bulk of the\n card's content.\n
\n Button\n \n \n \n \n \n \n \n Title of the news
\n \n Roko Kolar
\n \n Created a few minutes ago
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n View and share files
\n \n Aaron Reid
\n \n Created a few minutes ago
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n Conversation about takeaways from annual SharePoint conference\n
\n \n Christina Bergqvist
\n \n Sent a few minutes ago
\n \n \n \n \n \n \n \n \n \n \n \n Large_file_name_…s_truncating.pptx
\n \n Annie Lindqvist
\n \n Created a few minutes ago
\n \n \n \n \n \n \n \n \n\n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the bulk of the\n card's content.\n
\n Call to action\n \n \n \n \n \n\n \n \n Jim Lohan
\n UX Designer
\n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, deserunt.\n
\n \n \n - \n \n Ellsworth , ME\n
\n - \n \n 123 456 789\n
\n - \n \n exmaple@exmaple.com\n
\n
\n \n \n \n \n\n \n \n \n \n \n \n Lorem, ipsum.
\n Lorem, ipsum.
\n
\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere facilis ullam est\n velit corporis corrupti nisi dolore soluta fugit provident!\n
\n \n \n - \n Lorem ipsum dolor sit.\n
\n - \n Lorem ipsum dolor sit.\n
\n - \n Lorem ipsum dolor sit.\n
\n - \n Lorem ipsum dolor sit.\n
\n
\n \n \n \n \n \n \n\n
\n\n \n Carousel
\n\n \n \n \n \n \n \n \n
\n\n \n \n \n \n First slide label
\n Nulla vitae elit libero, a pharetra augue mollis interdum.
\n \n \n\n \n \n Second slide label
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\n \n \n\n \n \n Third slide label
\n \n Praesent commodo cursus magna, vel scelerisque nisl consectetur.\n
\n \n \n \n \n\n \n \n \n Previous\n \n \n \n Next\n \n \n \n \n\n
\n\n \n Buttons
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n Primary\n \n \n Secondary\n \n \n Success\n \n \n Danger\n \n \n Warning\n \n \n Info\n \n \n Dark\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n
\n\n \n Progress
\n\n \n \n \n \n \n \n 25%\n \n \n \n \n\n \n \n \n \n 25%\n \n \n \n \n \n \n \n\n
\n\n \n Spinners
\n\n \n \n \n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n\n
\n
\n\n \n \n \n \n\n \n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n\n
\n
\n\n \n \n \n \n \n \n \n\n
\n\n \n Alerts
\n\n \n \n \n \n \n A simple primary alert—check it out!\n \n \n A simple secondary alert—check it out!\n \n \n A simple success alert—check it out!\n \n \n A simple danger alert—check it out!\n \n \n A simple warning alert—check it out!\n \n \n A simple info alert—check it out!\n \n \n A simple light alert—check it out!\n \n \n A simple dark alert—check it out!\n \n \n \n\n \n \n \n Holy guacamole! You should check in on some of those fields below.\n \n \n\n \n Well done!
\n \n Aww yeah, you successfully read this important alert message. This example text is\n going to run a bit longer so that you can see how spacing within an alert works with\n this kind of content.\n
\n
\n \n Whenever you need to, be sure to use margin utilities to keep things nice and tidy.\n
\n \n \n \n \n \n \n\n
\n\n \n Badges
\n\n \n \n \n \n Example heading New
\n Example heading New
\n Example heading New
\n Example heading New
\n Example heading New
\n Example heading New
\n \n \n\n \n \n \n\n \n \n Primary\n Secondary\n Success\n Danger\n Warning\n Info\n Light\n Dark\n\n
\n
\n\n \n\n
\n
\n\n Primary\n Secondary\n Success\n Danger\n Warning\n Info\n Light\n Dark\n \n \n \n \n \n\n
\n\n \n Notes & typography
\n\n \n Note primary: Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus\n delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?\n
\n\n \n Note secondary: Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus\n delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?\n
\n\n \n Note success: Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus\n delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?\n
\n\n \n Note danger: Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus\n delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?\n
\n\n \n Note warning: Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus\n delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?\n
\n\n \n Note info: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum\n doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus\n placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?\n
\n\n \n Note light: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum\n doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus\n placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?\n
\n\n \n \n Main website heading (h1)
\n\n Website subheading (h4)
\n\n
\n\n Section heading (h3)
\n\n
\n\n \n \n \n \n Component heading (h5)
\n\n \n Component subheading\n
\n\n Component alternative subheading (h6)
\n\n \n Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio\n veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit\n saepe iure perspiciatis, veniam facilis asperiores deleniti at?\n
\n \n \n\n \n \n Component heading (h5)
\n\n \n Component subheading\n
\n\n Component alternative subheading (h6)
\n\n \n Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio\n veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit\n saepe iure perspiciatis, veniam facilis asperiores deleniti at?\n
\n \n \n\n \n \n Component heading (h5)
\n\n \n Component subheading\n
\n\n Component alternative subheading (h6)
\n\n \n Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio\n veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit\n saepe iure perspiciatis, veniam facilis asperiores deleniti at?\n
\n \n \n \n \n \n \n \n\n
\n\n \n Button group
\n\n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n \n\n
\n
\n\n \n \n \n\n \n \n Dropdown\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n\n
\n
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n Collapse
\n\n \n \n \n \n \n \n Link with href\n \n \n Button with data-mdb-target\n \n\n \n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson\n ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt\n sapiente ea proident.\n \n \n \n\n \n \n \n \n \n \n \n \n Collapsible Group Item #1\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt\n aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.\n Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente\n ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer\n farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them\n accusamus labore sustainable VHS.\n \n \n\n \n \n \n \n Collapsible Group Item #2\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt\n aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.\n Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente\n ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer\n farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them\n accusamus labore sustainable VHS.\n \n \n\n \n \n \n \n Collapsible Group Item #3\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry\n richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor\n brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt\n aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.\n Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente\n ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer\n farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them\n accusamus labore sustainable VHS.\n \n \n \n \n \n \n \n \n \n\n
\n\n \n Dropdowns
\n\n \n \n \n Action\n \n \n \n\n \n \n \n Action\n \n \n \n\n \n \n \n Action\n \n \n \n\n \n \n \n Action\n \n \n \n\n \n \n \n Action\n \n \n \n\n \n \n \n Action\n \n \n \n\n \n \n \n Action\n \n \n \n\n \n \n \n Action\n \n \n \n\n \n \n \n Action\n \n \n \n \n\n
\n\n \n Modal
\n\n \n \n \n Launch demo modal\n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n
\n\n \n Toasts
\n\n \n \n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n \n Hello, world! This is a toast message.\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n \n Hello, world! This is a toast message.\n \n \n \n \n\n \n \n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n \n Hello, world! This is a toast message.\n \n \n \n \n\n \n \n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n \n Hello, world! This is a toast message.\n \n \n \n \n\n \n \n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n \n Hello, world! This is a toast message.\n \n \n \n \n \n \n \n\n
\n\n \n Acrylic
\n\n \n \n \n \n \n \n \n \n \n Blur: 30px
\n \n \n \n \n \n \n \n \n Blur: 60px
\n \n \n \n \n \n \n Blur: 40px
\n \n \n \n \n \n \n Blur: 15px
\n \n \n \n \n \n \n Blur: 5px
\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n Blur: 30px
\n \n \n \n \n \n \n \n \n Blur: 60px
\n \n \n \n \n \n \n Blur: 40px
\n \n \n \n \n \n \n Blur: 15px
\n \n \n \n \n \n \n Blur: 5px
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n Tooltips
\n\n \n Tooltip on top\n \n \n Tooltip on right\n \n \n Tooltip on bottom\n \n \n Tooltip on left\n \n \n\n
\n\n \n Popovers
\n\n \n Popover on top\n \n\n \n Popover on right\n \n\n \n Popover on bottom\n \n\n \n Popover on left\n \n \n\n
\n\n \n Footer
\n\n \n\n \n \n\n
\n\n \n Breadcrumbs
\n\n \n\n \n\n \n\n \n \n\n
\n\n \n Pills
\n\n \n \n - \n
Home \n \n - \n
Profile \n \n - \n
Settings \n \n
\n \n\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque\n excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi\n eligendi nulla doloremque, et consequuntur! Fuga.\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque\n excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi\n eligendi nulla doloremque, et consequuntur! Fuga.\n\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque\n excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi\n eligendi nulla doloremque, et consequuntur! Fuga.\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque\n excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi\n eligendi nulla doloremque, et consequuntur! Fuga.\n \n \n \n \n\n
\n\n \n Tabs
\n\n \n \n - \n
Home \n \n - \n
Profile \n \n - \n
Settings \n \n
\n \n\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque\n excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi\n eligendi nulla doloremque, et consequuntur! Fuga.\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque\n excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi\n eligendi nulla doloremque, et consequuntur! Fuga.\n\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque\n excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi\n eligendi nulla doloremque, et consequuntur! Fuga.\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque\n excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi\n eligendi nulla doloremque, et consequuntur! Fuga.\n \n \n \n \n\n
\n\n \n Tables
\n\n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n
\n\n \n Shadows
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/list-group.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Basic
\n\n
\n\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n - Porta ac consectetur ac
\n - Vestibulum at eros
\n
\n\n
\n\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n - Porta ac consectetur ac
\n - Vestibulum at eros
\n
\n\n
\n\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n - Porta ac consectetur ac
\n - Vestibulum at eros
\n
\n\n
\n\n \n \n Cras justo odio\n \n Dapibus ac facilisis in\n Morbi leo risus\n Porta ac consectetur ac\n Vestibulum at eros \n \n\n
\n\n \n \n Cras justo odio\n \n \n \n \n \n \n\n
\n\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n - Porta ac consectetur ac
\n - Vestibulum at eros
\n
\n\n
\n\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n
\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n
\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n
\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n
\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n
\n \n - Cras justo odio
\n - Dapibus ac facilisis in
\n - Morbi leo risus
\n
\n\n
\n\n \n - Dapibus ac facilisis in
\n\n - A simple primary list group item
\n - \n A simple secondary list group item\n
\n - A simple success list group item
\n - A simple danger list group item
\n - A simple warning list group item
\n - A simple info list group item
\n - A simple light list group item
\n - A simple dark list group item
\n
\n\n
\n\n \n Dapibus ac facilisis in\n\n A simple primary list group item\n A simple secondary list group item\n A simple success list group item\n A simple danger list group item\n A simple warning list group item\n A simple info list group item\n A simple light list group item\n A simple dark list group item\n \n\n
\n\n \n - \n Cras justo odio\n 14\n
\n - \n Dapibus ac facilisis in\n 2\n
\n - \n Morbi leo risus\n 1\n
\n
\n\n
\n\n \n \n \n List group item heading
\n 3 days ago\n \n \n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius\n blandit.\n
\n Donec id elit non mi porta.\n \n \n \n List group item heading
\n 3 days ago\n \n \n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius\n blandit.\n
\n Donec id elit non mi porta.\n \n \n \n List group item heading
\n 3 days ago\n \n \n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius\n blandit.\n
\n Donec id elit non mi porta.\n \n \n\n
\n\n \n \n \n Home \n Profile \n Messages \n Settings \n \n \n \n \n \n ...\n \n \n ...\n \n \n ...\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/mega-menu.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Megamenu button\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/modal.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Basic
\n\n
\n\n \n \n Launch demo modal\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n \n Launch static backdrop modal\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n Launch demo modal\n \n\n \n \n \n \n \n\n
\n
\n\n Fade animation side
\n\n \n \n Launch demo modal top\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n \n Launch demo modal right\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n \n Launch demo modal bottom\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n \n Launch demo modal left\n \n\n \n \n \n \n \n \n\n
\n
\n\n Position
\n\n \n \n Launch demo modal top right\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n \n Launch demo modal top left\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n \n Launch demo modal bottom right\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n \n Launch demo modal bottom left\n \n\n \n \n \n \n \n \n\n
\n
\n\n Frame
\n\n \n \n Launch demo modal top\n \n\n \n \n \n \n \n \n\n
\n
\n\n \n \n Launch demo modal bottom\n \n\n \n \n \n \n \n \n\n
\n
\n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/navbar.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Basic
\n\n
\n\n \n\n
\n\n \n\n
\n\n \n \n\n
\n\n \n\n
\n\n \n \n
\n \n
\n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/navs.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Navs / Tabs / Pills
\n\n \n\n \n \n \n \n \n\n \n\n \n\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n - \n Active\n
\n - \n Much longer nav link\n
\n - \n Link\n
\n - \n Disabled\n
\n
\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n - \n Active\n
\n - \n Much longer nav link\n
\n - \n Link\n
\n - \n Disabled\n
\n
\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n PRZYKŁADy Z AKTYWNYMI LINKAMI
\n\n \n - \n
Home \n \n - \n
Profile \n \n - \n
Contact \n \n
\n \n \n Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu\n stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg\n carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby\n sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum\n iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n \n \n Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee\n squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes\n anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,\n commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo\n nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica\n VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio\n cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry\n richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui\n sapiente accusamus tattooed echo park.\n \n \n Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's\n organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify\n pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy\n hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred\n pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie\n etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl\n craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.\n \n \n \n \n \n\n \n \n \n \n \n \n Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee\n squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes\n anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,\n commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo\n nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica\n VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio\n cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry\n richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui\n sapiente accusamus tattooed echo park.\n \n \n Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's\n organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify\n pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy\n hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred\n pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie\n etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl\n craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.\n \n \n \n \n \n\n \n \n \n \n - \n
Home \n \n - \n
Profile \n \n - \n
Contact \n \n
\n \n \n Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu\n stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg\n carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby\n sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum\n iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n \n \n Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee\n squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes\n anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,\n commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo\n nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica\n VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio\n cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry\n richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui\n sapiente accusamus tattooed echo park.\n \n \n Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's\n organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify\n pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy\n hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred\n pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie\n etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl\n craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.\n \n \n \n \n \n\n \n \n \n \n \n \n Home \n Profile \n Messages \n Settings \n \n \n \n \n \n Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu\n stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg\n carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.\n Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat\n salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher\n voluptate nisi qui.\n \n \n Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee\n squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes\n anderson artisan four loko farm-to-table craft beer twee. Qui photo booth\n letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl\n cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus\n mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore\n stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean\n shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester\n stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.\n \n \n Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's\n organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag\n gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy\n salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify\n squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles\n pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably\n haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu\n synth chambray yr.\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute\n irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum.\n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/pagination.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Small
\n\n \n \n\n \n Standard
\n\n \n \n\n \n Large
\n\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/pills.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi\n before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon\n irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you\n probably haven't heard of them et cardigan trust fund culpa biodiesel wes\n anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh\n artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore.\n Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle\n rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie\n minim qui you probably haven't heard of them et cardigan trust fund culpa\n biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel\n keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit\n seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean\n shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed\n accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings\n keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater\n lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of\n them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil\n tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad\n leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi\n before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon\n irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you\n probably haven't heard of them et cardigan trust fund culpa biodiesel wes\n anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh\n artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore.\n Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle\n rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie\n minim qui you probably haven't heard of them et cardigan trust fund culpa\n biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel\n keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit\n seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean\n shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed\n accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings\n keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n
\n \n \n\n
\n\n \n \n \n Additional
\n\n \n Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi\n before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon\n irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you\n probably haven't heard of them et cardigan trust fund culpa biodiesel wes\n anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh\n artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore.\n Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle\n rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie\n minim qui you probably haven't heard of them et cardigan trust fund culpa\n biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel\n keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit\n seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean\n shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed\n accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings\n keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater\n lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of\n them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil\n tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad\n leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi\n before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon\n irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you\n probably haven't heard of them et cardigan trust fund culpa biodiesel wes\n anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh\n artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore.\n Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle\n rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie\n minim qui you probably haven't heard of them et cardigan trust fund culpa\n biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel\n keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit\n seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean\n shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed\n accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings\n keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n
\n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n - \n Introduction\n
\n - \n Basic examples\n
\n - \n Additional buttons\n
\n - \n Buttons outline\n
\n - \n Buttons rounded\n
\n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n API Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi\n before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon\n irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you\n probably haven't heard of them et cardigan trust fund culpa biodiesel wes\n anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh\n artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore.\n Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle\n rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie\n minim qui you probably haven't heard of them et cardigan trust fund culpa\n biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel\n keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit\n seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean\n shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed\n accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings\n keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater\n lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of\n them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil\n tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad\n leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi\n before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon\n irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you\n probably haven't heard of them et cardigan trust fund culpa biodiesel wes\n anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh\n artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore.\n Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle\n rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie\n minim qui you probably haven't heard of them et cardigan trust fund culpa\n biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel\n keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit\n seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean\n shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed\n accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings\n keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n
\n \n \n\n
\n\n \n \n \n Additional
\n\n \n Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi\n before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon\n irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you\n probably haven't heard of them et cardigan trust fund culpa biodiesel wes\n anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh\n artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore.\n Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle\n rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie\n minim qui you probably haven't heard of them et cardigan trust fund culpa\n biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel\n keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit\n seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean\n shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed\n accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings\n keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater\n lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of\n them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil\n tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad\n leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi\n before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon\n irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you\n probably haven't heard of them et cardigan trust fund culpa biodiesel wes\n anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh\n artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore.\n Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle\n rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie\n minim qui you probably haven't heard of them et cardigan trust fund culpa\n biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel\n keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit\n seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean\n shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed\n accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings\n keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n
\n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n - \n Introduction\n
\n - \n Basic examples\n
\n - \n Additional buttons\n
\n - \n Buttons outline\n
\n - \n Buttons rounded\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/popovers.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Popovers
\n\n \n \n Click to toggle popover\n \n \n\n \n \n Popover on top\n \n\n \n Popover on right\n \n\n \n Popover on bottom\n \n\n \n Popover on left\n \n \n\n \n Dismissible popover \n \n\n \n \n \n \n \n\n
\n\n \n button\n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/prism.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n\n \n \n \n \n - \n
HTML \n \n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/progress.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Progress bars
\n\n \n \n \n \n 25%\n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n Toggle animation\n \n\n \n ten button toggle animation nie działa jak w dokumentacji bootstrapa, ale zostawiam go\n bo moze w dokumentacji ktoś to ogarnie i będzie umiał zrobić tak aby ta animacja się\n włączała i wyłączała i nie zacinała strony tak jak wtedy gdy jest tylko włączona.\n
\n \n \n\n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/ripple.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Ripple effect
\n\n \n Subtitle
\n\n \n \n To apply a ripple effect to an element, it must have content, for example 'img'\n does not meet this condition, but 'button' already yes.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Colors
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Duration
\n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n Duration 1S\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Centered
\n\n \n \n \n \n \n Small\n \n \n \n Large\n \n \n\n \n Square\n \n \n \n \n\n \n \n \n \n \n \n \n Small\n \n \n \n Large\n \n \n\n \n Square\n \n \n \n \n .square { height: 100px; width: 100px; }\n \n \n \n \n \n \n\n
\n\n \n \n \n Unbound
\n\n \n \n \n \n \n Small\n \n \n Default\n \n \n Large\n \n \n\n \n Square\n \n \n \n \n\n \n \n \n \n \n \n \n Small\n \n \n Default\n \n \n Large\n \n \n\n \n Square\n \n \n \n \n .square { height: 100px; width: 100px; }\n \n \n \n \n \n \n\n
\n\n \n \n \n Radius
\n\n \n \n \n \n \n 10\n \n \n \n \n \n \n\n \n \n \n \n \n \n 10\n \n \n 25\n \n \n \n \n .square { height: 100px; width: 100px; }\n \n \n \n \n \n \n\n
\n\n \n \n \n Images Ripple effect
\n \n Adds ripple effect for image in card component via ripple class\n
\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n .square { height: 100px; width: 100px; }\n \n \n \n \n \n \n\n
\n\n \n \n \n Card - JavaScript implementation
\n \n Adds ripple effect for image in card component via JavaScript implementation\n
\n\n \n \n \n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the\n bulk of the card's content.\n
\n \n \n \n \n\n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the\n bulk of the card's content.\n
\n \n \n \n \n\n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the\n bulk of the card's content.\n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the\n bulk of the card's content.\n
\n \n \n \n \n\n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the\n bulk of the card's content.\n
\n \n \n \n \n\n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the\n bulk of the card's content.\n
\n \n \n \n \n \n \n \n document .querySelectorAll('.card-img-top') .forEach((cardImage) => new\n mdb.Ripple(cardImage, { color: 'light' }));\n \n \n \n \n \n \n\n
\n\n \n \n \n Card - jQuery implementation
\n Adds ripple effect for image in card component via jQuery implementation
\n\n \n \n \n \n \n \n Card title
\n \n This is a wider card with supporting text below as a natural lead-in\n to additional content. This content is a little bit longer.\n
\n \n Last updated 3 mins ago\n
\n \n \n \n \n\n \n \n \n Card title
\n \n This is a wider card with supporting text below as a natural lead-in\n to additional content. This content is a little bit longer.\n
\n \n Last updated 3 mins ago\n
\n \n \n \n \n\n \n \n \n Card title
\n \n This is a wider card with supporting text below as a natural lead-in\n to additional content. This content is a little bit longer.\n
\n \n Last updated 3 mins ago\n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n Card title
\n \n This is a wider card with supporting text below as a natural\n lead-in to additional content. This content is a little bit\n longer.\n
\n \n Last updated 3 mins ago\n
\n \n \n \n \n\n \n \n \n Card title
\n \n This is a wider card with supporting text below as a natural\n lead-in to additional content. This content is a little bit\n longer.\n
\n \n Last updated 3 mins ago\n
\n \n \n \n \n\n \n \n \n Card title
\n \n This is a wider card with supporting text below as a natural\n lead-in to additional content. This content is a little bit\n longer.\n
\n \n Last updated 3 mins ago\n
\n \n \n \n \n \n \n \n $('.card-img-left').ripple({color: 'light'})\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Ripple effect - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n \n By default elements with btn and ripple classes\n includes ripple effect\n
\n \n \n \n\n \n \n \n\n Via JavaScript
\n\n \n \n \n \n \n document .querySelectorAll('.example') .forEach((element => new\n mdb.Ripple(element, options));\n \n \n\n Via jQuery
\n\n \n \n \n \n $('.example').ripple(options); \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n \n rippleCentered\n \n Boolean \n falseCenters the position of wave \n \n \n \n rippleColor\n \n String \n ''Changes color of wave \n \n \n \n rippleDuration\n \n String \n '500ms'Sets duration of animation \n \n \n \n rippleRadius\n \n Number \n 0Sets radius value \n \n \n \n rippleUnbound\n \n Boolean \n falseSets whether the effect should go beyond the wrapper's boundaries \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n \n dispose\n \n Manually dispose of component \n ripple.dispose() \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/scrollspy.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Scrollspy
\n\n \n \n \n Introduction
\n \n Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before\n they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo\n jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,\n cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id\n art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan\n mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,\n williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust\n fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony\n biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table\n bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui\n you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson\n aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco\n consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim\n lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't\n heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil\n tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad\n leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo\n jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,\n cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id\n art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan\n mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,\n williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust\n fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony\n biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table\n bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui\n you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson\n aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco\n consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim\n lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n
\n Examples
\n \n Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan\n beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla\n carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi\n wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn\n adipisicing craft beer vice keytar deserunt. Veniam marfa mustache skateboard,\n adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's\n vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food\n truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non\n aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar\n deserunt. Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.\n Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea\n helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non\n freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis\n gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. Veniam marfa mustache\n skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat\n mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby\n sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1\n sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft\n beer vice keytar deserunt. Veniam marfa mustache skateboard, adipisicing fugiat velit\n pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko\n nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis\n non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation\n quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. Veniam marfa\n mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua\n cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles.\n Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes\n anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn\n adipisicing craft beer vice keytar deserunt. Veniam marfa mustache skateboard,\n adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's\n vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food\n truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non\n aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar\n deserunt. Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.\n Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea\n helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non\n freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis\n gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. Veniam marfa mustache\n skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat\n mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby\n sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1\n sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft\n beer vice keytar deserunt. Veniam marfa mustache skateboard, adipisicing fugiat velit\n pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko\n nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis\n non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation\n quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.\n
\n Basic MDB buttons
\n \n Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle\n rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in\n magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.\n Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,\n sustainable delectus consectetur fanny pack iphone. Occaecat commodo aliqua delectus.\n Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit\n ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl,\n echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing.\n Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur\n fanny pack iphone. Occaecat commodo aliqua delectus. Fap craft beer deserunt\n skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level\n locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat\n quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim\n messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.\n Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle\n rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in\n magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.\n Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,\n sustainable delectus consectetur fanny pack iphone. Occaecat commodo aliqua delectus.\n Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit\n ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl,\n echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing.\n Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur\n fanny pack iphone. Occaecat commodo aliqua delectus. Fap craft beer deserunt\n skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level\n locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat\n quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim\n messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.\n Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle\n rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in\n magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.\n Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,\n sustainable delectus consectetur fanny pack iphone. Occaecat commodo aliqua delectus.\n Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit\n ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl,\n echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing.\n Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur\n fanny pack iphone. Occaecat commodo aliqua delectus. Fap craft beer deserunt\n skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level\n locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat\n quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim\n messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.\n Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle\n rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in\n magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.\n Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,\n sustainable delectus consectetur fanny pack iphone. Occaecat commodo aliqua delectus.\n Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit\n ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl,\n echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing.\n Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur\n fanny pack iphone. Occaecat commodo aliqua delectus. Fap craft beer deserunt\n skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level\n locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat\n quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim\n messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.\n Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle\n rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in\n magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.\n Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,\n sustainable delectus consectetur fanny pack iphone. Occaecat commodo aliqua delectus.\n Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit\n ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl,\n echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing.\n Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur\n fanny pack iphone. Occaecat commodo aliqua delectus. Fap craft beer deserunt\n skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level\n locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat\n quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim\n messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.\n Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle\n rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in\n magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.\n Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,\n sustainable delectus consectetur fanny pack iphone. Occaecat commodo aliqua delectus.\n
\n Additional buttons
\n \n In incididunt echo park, officia deserunt mcsweeney's proident master cleanse\n thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel\n laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry\n richardson master cleanse. Assumenda you probably haven't heard of them art party\n fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial\n keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they\n sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. In incididunt echo\n park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente\n veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer.\n Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master\n cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed\n nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi\n sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko.\n Locavore enim nostrud mlkshk brooklyn nesciunt. In incididunt echo park, officia\n deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur\n VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee\n wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you\n probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor\n ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf\n voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud\n mlkshk brooklyn nesciunt. In incididunt echo park, officia deserunt mcsweeney's\n proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident\n shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four\n loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard\n of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf\n nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea\n portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn\n nesciunt. In incididunt echo park, officia deserunt mcsweeney's proident master\n cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1\n biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko,\n cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of\n them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt\n sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland\n before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. In\n incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats\n sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft\n beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson\n master cleanse. Assumenda you probably haven't heard of them art party fanny pack,\n tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh\n mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko.\n Locavore enim nostrud mlkshk brooklyn nesciunt. In incididunt echo park, officia\n deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur\n VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee\n wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you\n probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor\n ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf\n voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud\n mlkshk brooklyn nesciunt. In incididunt echo park, officia deserunt mcsweeney's\n proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident\n shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four\n loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard\n of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf\n nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea\n portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn\n nesciunt. In incididunt echo park, officia deserunt mcsweeney's proident master\n cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1\n biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko,\n cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of\n them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt\n sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland\n before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. In\n incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats\n sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft\n beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson\n master cleanse. Assumenda you probably haven't heard of them art party fanny pack,\n tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh\n mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko.\n Locavore enim nostrud mlkshk brooklyn nesciunt. In incididunt echo park, officia\n deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur\n VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee\n wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you\n probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor\n ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf\n voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud\n mlkshk brooklyn nesciunt. In incididunt echo park, officia deserunt mcsweeney's\n proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident\n shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four\n loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard\n of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf\n nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea\n portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn\n nesciunt. In incididunt echo park, officia deserunt mcsweeney's proident master\n cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1\n biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko,\n cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of\n them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt\n sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland\n before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. In\n incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats\n sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft\n beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson\n master cleanse. Assumenda you probably haven't heard of them art party fanny pack,\n tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh\n mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko.\n Locavore enim nostrud mlkshk brooklyn nesciunt. In incididunt echo park, officia\n deserunt mcsweeney's proident master cleanse thundercats sapiente veniam.\n
\n Gradient buttons
\n \n Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't\n heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil\n tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad\n leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo\n jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,\n cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id\n art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan\n mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,\n williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust\n fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony\n biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table\n bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui\n you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson\n aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco\n consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim\n lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't\n heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil\n tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad\n leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo\n jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,\n cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id\n art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan\n mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,\n williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust\n fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony\n biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table\n bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui\n you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson\n aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco\n consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim\n lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't\n heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil\n tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad\n leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they\n sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles\n cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo\n jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et\n cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,\n cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id\n art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr\n farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan\n mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,\n williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust\n fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony\n biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party\n dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table\n bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo\n booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui\n you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson\n aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco\n consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim\n lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim\n keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.\n Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't\n heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.\n
\n Examples 2
\n \n Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente\n synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably\n haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit\n placeat before they sold out, terry richardson proident brunch nesciunt quis cosby\n sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade\n velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan\n readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco\n thundercats. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.\n Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you\n probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore\n elit placeat before they sold out, terry richardson proident brunch nesciunt quis\n cosby sweater pariatur keffiyeh ut helvetica artisan.\n
\n \n \n\n \n \n \n - \n Introduction\n
\n - \n Examples\n
\n - \n Basic MDB buttons\n
\n - \n Additional buttons\n
\n - \n Gradient buttons\n
\n
\n \n - \n Examples 2\n
\n
\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/spinners.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Spinners
\n\n \n \n Loading...\n \n \n\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n\n \n \n Loading...\n \n \n\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n Loading...\n \n \n\n \n \n Loading...\n \n \n\n \n \n \n Loading...\n \n \n \n\n \n \n Loading...\n \n \n \n\n \n \n \n Loading...\n \n \n \n\n \n \n \n Loading...\n \n \n \n\n \n \n Loading...\n \n \n Loading...\n \n \n\n \n \n Loading...\n \n \n Loading...\n \n \n\n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/toasts.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Toasts
\n\n \n Bootstrap 5 Toasts
\n\n \n \n Push notifications to your visitors with a 'toast', a lightweight and easily\n customizable alert message. Toasts are designed to mimic the push notifications\n that have been popularized by mobile and desktop operating systems.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n \n \n \n \n \n Hello, world! This is a toast message.\n \n \n \n \n\n \n \n \n \n \n \n ![\"...\"](\"...\")
\n Bootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n var toastElList = [].slice.call(document.querySelectorAll('.toast')); var\n toastList = toastElList.map(function (toastEl) { return new\n mdb.Toast(toastEl); });\n \n \n \n \n \n \n\n
\n\n \n \n \n Colors
\n\n \n \n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n \n\n \n \n \n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n \n MDBootstrap\n 11 mins ago\n \n \n Hello, world! This is a toast message.\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n - \n Introduction\n
\n - \n Basic example\n
\n - \n Colors\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/components/tooltips.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Tooltips
\n\n \n \n Tooltip on top\n \n \n Tooltip on right\n \n \n Tooltip on bottom\n \n \n Tooltip on left\n \n \n\n \n \n \n Tight pants next level keffiyeh\n you probably\n haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag\n stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american\n apparel have a terry\n richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu\n biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really\n ironic artisan\n whatever keytar , scenester farm-to-table banksy Austin\n twitter handle freegan\n cred raw denim single-origin coffee viral.\n
\n \n \n\n \n \n \n \n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/css/colors.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n Theme colors
\n\n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n\n Blue colors
\n\n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n\n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n \n Aromateraphy ipsum
\n \n \n \n\n \n \n \n Aromateraphy ipsum
\n \n \n \n\n Buttons
\n\n \n \n \n \n \n \n \n \n \n \n \n\n Text colors
\n\n \n .text-primary
\n .text-secondary
\n .text-success
\n .text-danger
\n .text-warning
\n .text-info
\n .text-light
\n .text-dark
\n .text-body
\n .text-muted
\n .text-white
\n .text-black-50
\n .text-white-50
\n \n \n \n\n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/css/covers-2.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n This is title
\n \n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae\n laboriosam numquam expedita ullam saepe ipsam, deserunt provident corporis, sit non\n accusamus maxime, magni nulla quasi iste ipsa architecto? Autem!\n
\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/css/covers.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n This is title
\n \n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae\n laboriosam numquam expedita ullam saepe ipsam, deserunt provident corporis, sit non\n accusamus maxime, magni nulla quasi iste ipsa architecto? Autem!\n
\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/css/hover-effects.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Masks
\n \n \n Text
\n \n \n \n \n \n \n Text
\n \n \n \n \n \n \n Hover effect - hover-overlay
\n \n \n \n \n Text
\n \n \n \n \n \n \n Text
\n \n \n \n \n \n \n \n Hover effect - hover-zoom
\n \n Text
\n \n \n \n \n \n Hover effect - hover-shadow
\n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Icons
\n\n \n Icons - Bootstrap 5 & Fluent Design component
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n\n \n Note: Read the API tab to find all available\n options and advanced customization\n
\n \n \n\n
\n\n \n \n \n Icons
\n\n Examples of some icons
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n \n\n
\n\n \n \n \n Sizing
\n\n \n \n\n \n \n \n \n \n \n\n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n\n \n\n \n \n \n \n \n\n
\n\n \n \n \n Colors
\n\n \n \n\n \n \n \n \n \n \n\n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n\n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n - \n Introduction\n
\n - \n Basic example\n
\n \n - \n Section\n
\n - \n Subsection\n
\n - \n Subsection\n
\n
\n \n \n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n \n\n Via JavaScript
\n\n \n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n\n Via jQuery
\n\n \n Note: By default, MDB does not include jQuery\n and you have to add it to the project on your own.\n
\n\n \n \n \n $('.example-class').ripple(options);\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n\n \n \n \n var myModalEl = document.getElementById('myModal')\n var modal = new mdb.Modal(myModalEl)\n modal.toggle()\n \n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n\n \n \n \n var myModalEl = document.getElementById('myModal')\n myModalEl.addEventListener('show.bs.modal', function (e) {\n // do something...\n })\n \n \n \n \n\n
\n\n \n \n \n Import
\n\n \n \n MDB UI KIT also works with module bundlers. Use the following\n code to import this component:\n
\n\n \n \n \n import { Modal } from 'mdb-ui-kit';\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/css/images.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n ![](\"https://mdbootstrap.com/img/new/fluid/city/113.jpg\")
\n \n \n \n \n \n \n\n \n \n \n\n
\n\n \n\n
\n\n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/css/shadow.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n \n \n Blur: 30px
\n \n \n \n \n \n \n \n \n Blur: 60px
\n \n \n \n \n \n \n Blur: 40px
\n \n \n \n \n \n \n Blur: 15px
\n \n \n \n \n \n \n Blur: 5px
\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n Blur: 30px
\n \n \n \n \n \n \n \n \n Blur: 60px
\n \n \n \n \n \n \n Blur: 40px
\n \n \n \n \n \n \n Blur: 15px
\n \n \n \n \n \n \n Blur: 5px
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/css/typography.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Typography
\n\n \n Typography - Bootstrap 5 & Fluent Design component
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n\n \n Note: Read the API tab to find all available\n options and advanced customization\n
\n \n \n\n
\n\n \n \n \n Font
\n\n You should use one font throughout your app's UI, and we recommend sticking with the default font for\n Windows apps, Segoe UI. It's designed to maintain optimal legibility across sizes and pixel densities\n and offers a clean, light, and open aesthetic that complements the content of the system.
\n\n \n \n\n ABCDEFGHIJKLMNOPQRSTUVWXYZ
\n abcdefghijklmnopqrstuvwxyz
\n 1234567890
\n\n \n \n\n \n \n \n \n \n\n ABCDEFGHIJKLMNOPQRSTUVWXYZ
\n abcdefghijklmnopqrstuvwxyz
\n 1234567890
\n\n \n\n \n \n \n \n \n\n
\n\n \n \n \n Hierarchy
\n\n Users rely on visual hierarchy when scanning a page: headers summarize content, and body text\n provides more detail. To create a clear visual hierarchy in your app, follow the Windows type ramp.\n
\n\n \n \n\n Hierarchy
\n lets the reader know
\n where to look first.
\n\n \n \n\n \n \n \n \n \n\n Hierarchy
\n lets the reader know
\n where to look first.
\n\n \n\n \n \n \n \n \n\n
\n\n \n \n \n Type ramp
\n\n The Windows type ramp establishes crucial relationships between the type styles on a page, helping\n users read content easily. All sizes are in effective pixels and are optimized for UWP apps running on\n all devices.
\n\n \n \n\n Header
\n Subheader
\n Title
\n Subtitle
\n Base
\n Body
\n Caption
\n\n \n \n\n \n \n \n \n \n\n Header
\n Subheader
\n Title
\n Subtitle
\n Base
\n Body
\n Caption
\n\n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n - \n Introduction\n
\n - \n Basic example\n
\n \n - \n Section\n
\n - \n Subsection\n
\n - \n Subsection\n
\n
\n \n \n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n \n\n Via JavaScript
\n\n \n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n\n Via jQuery
\n\n \n Note: By default, MDB does not include jQuery\n and you have to add it to the project on your own.\n
\n\n \n \n \n $('.example-class').ripple(options);\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n\n \n \n \n var myModalEl = document.getElementById('myModal')\n var modal = new mdb.Modal(myModalEl)\n modal.toggle()\n \n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n\n \n \n \n var myModalEl = document.getElementById('myModal')\n myModalEl.addEventListener('show.bs.modal', function (e) {\n // do something...\n })\n \n \n \n \n\n
\n\n \n \n \n Import
\n\n \n \n MDB UI KIT also works with module bundlers. Use the following\n code to import this component:\n
\n\n \n \n \n import { Modal } from 'mdb-ui-kit';\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/data/tables.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n Extra small
\n <576px\n \n \n Small
\n ≥576px\n \n \n Medium
\n ≥768px\n \n \n Large
\n ≥992px\n \n \n X-Large
\n ≥1200px\n \n \n XX-Large
\n ≥1400px\n \n \n \n \n \n .container100% \n 540px \n 720px \n 960px \n 1140px \n 1320px \n \n \n .container-sm100% \n 540px \n 720px \n 960px \n 1140px \n 1320px \n \n \n .container-md100% \n 100% \n 720px \n 960px \n 1140px \n 1320px \n \n \n .container-lg100% \n 100% \n 100% \n 960px \n 1140px \n 1320px \n \n \n .container-xl100% \n 100% \n 100% \n 100% \n 1140px \n 1320px \n \n \n .container-xxl100% \n 100% \n 100% \n 100% \n 100% \n 1320px \n \n \n .container-fluid100% \n 100% \n 100% \n 100% \n 100% \n 100% \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n Class \n Heading \n Heading \n \n \n \n \n Default \n Cell \n Cell \n \n\n \n Primary \n Cell \n Cell \n \n \n Secondary \n Cell \n Cell \n \n \n Success \n Cell \n Cell \n \n \n Danger \n Cell \n Cell \n \n \n Warning \n Cell \n Cell \n \n \n Info \n Cell \n Cell \n \n \n Light \n Cell \n Cell \n \n \n Dark \n Cell \n Cell \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n Ta tabela jest z efektem na hover
\n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n \n \n \n \n Header \n Header \n Header \n \n \n \n \n A \n First \n Last \n \n \n B \n First \n Last \n \n \n C \n First \n Last \n \n \n
\n \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n \n \n Footer \n Footer \n Footer \n Footer \n \n \n
\n \n\n \n \n \n List of users\n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry the Bird \n @twitter \n \n \n
\n \n\n \n \n \n List of users\n \n \n \n # \n First \n Last \n Handle \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n \n\n \n \n \n \n \n # \n Heading \n Heading \n Heading \n Heading \n Heading \n Heading \n Heading \n Heading \n Heading \n \n \n \n \n 1 \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n \n \n 2 \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n \n \n 3 \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n Cell \n \n \n
\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/call-to-action.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Call to action
\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam vitae, fuga similique\n quos aperiam tenetur quo ut rerum debitis eum nemo exercitationem asperiores soluta\n blanditiis velit, dolores optio cumque facilis! Lorem ipsum dolor sit amet consectetur\n adipisicing elit.\n
\n \n \n \n \n\n
\n\n \n \n \n \n Lorem ipsum dolor sit amet consectetur
\n \n \n \n\n
\n\n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/content.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Lorem ipsum dolor sit amet
\n \n \n \n\n
\n\n \n \n \n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores repellendus, dolor\n possimus veniam officia sapiente ea, esse ducimus quod voluptatibus autem quam voluptas\n accusantium quae excepturi amet earum voluptatem fuga.\n
\n \n \n \n\n
\n\n \n \n \n \n \n Material Design Blocks
\n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores repellendus, dolor\n possimus veniam officia sapiente ea, esse ducimus quod voluptatibus autem quam\n voluptas accusantium quae excepturi amet earum voluptatem fuga.\n
\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/counters.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Counter
\n\n Attributes
\n\n \n - data-from : to change starting point
\n - data-to : to change ending point
\n - data-time : to change how long transition takes
\n
\n\n \n 0\n \n\n \n How long did you develop it?\n 0 hours\n
\n\n \n Was it worth it?\n 0 %\n \n\n \n This many ppl trusted I can deliver it in one day\n \n \n\n \n It works with huge numbers too\n \n \n\n ↓ Check this out ↓
\n\n \n You can animate it!\n 0 %\n \n \n \n \n\n
\n\n \n \n \n Counter
\n\n \n \n \n \n \n 42\n \n \n\n \n Projects
\n
\n \n \n \n\n \n \n \n \n 3,500\n \n \n\n \n Customers
\n
\n \n \n \n\n \n \n \n \n 0%\n \n \n\n \n Satisfaction
\n
\n \n \n \n \n \n \n \n\n
\n\n \n \n \n Counter
\n\n \n \n \n \n 100\n
\n Unique Page
\n \n\n \n \n \n 250\n
\n Block Variety
\n \n\n \n \n \n 330\n
\n Reusable Component
\n \n\n \n \n \n 430\n
\n Crafted Element
\n \n \n \n \n \n\n
\n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/customers.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Trusted by 1 000 000 + developers & designers
\n\n \n \n \n \n \n\n
\n\n \n \n \n Our clients
\n\n \n \n \n \n \n\n
\n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/download.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n Now Available
\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam\n iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum\n porro a pariatur veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam\n voluptas nostrum.\n
\n \n \n \n \n \n \n \n\n
\n\n \n \n \n \n \n Introducing an app for mdbootstrap
\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam\n iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum\n porro a pariatur veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam\n voluptas nostrum.\n
\n \n \n \n \n \n \n \n\n
\n\n \n \n \n \n \n \n Download now
\n \n Prepared is me marianne pleasure likewise debating. Wonder an unable except better\n stairs do ye admire.\n
\n
\n \n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n
\n Based on 3,000+ reviews
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/explore.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Help Center
\n\n \n Cards include various options for customizing their backgrounds, borders, and color.\n
\n\n \n \n \n \n
\n Outstanding Community
\n \n Now for manners use has company believe parlors. Least nor party who wrote while\n did. Excuse formed as is agreed admire so on result parish. Put use set uncommonly\n announcing and traveling.\n
\n \n \n \n \n \n \n \n \n \n
\n Powerful Extensions
\n \n Now for manners use has company believe parlors. Least nor party who wrote while\n did. Excuse formed as is agreed admire so on result parish. Put use set uncommonly\n announcing and traveling.\n
\n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Start a project now
\n\n \n Hire expert freelancers for any job to be done online or become a freelancer and earn\n money.\n
\n\n \n \n \n \n \n \n \n \n \n \n \n I'm a developer
\n \n Your web pages looks good on all devices and screen sizes, including desktop,\n tablet and mobile.\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n I need a developer
\n \n Your web pages looks good on all devices and screen sizes, including desktop,\n tablet and mobile.\n
\n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Unique Factors
\n\n It's really easy to create a landing page for your awesome product.
\n\n \n \n \n \n\n
\n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/faq.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Frequently Asked Questions
\n\n \n \n \n \n \n \n Collapsible Group Item #1\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad\n squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck\n quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it\n squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,\n craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur\n butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth\n nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n \n \n\n \n \n \n \n Collapsible Group Item #2\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad\n squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck\n quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it\n squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,\n craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur\n butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth\n nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n \n \n\n \n \n \n \n Collapsible Group Item #3\n \n
\n \n\n \n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad\n squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck\n quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it\n squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,\n craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur\n butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth\n nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n \n \n \n \n \n \n \n\n
\n\n \n \n \n Frequently Asked Questions
\n\n \n \n What payment services do you support?
\n We accept all major credit cards.
\n \n\n \n Can I update my card details?
\n \n Yes. Go to the billing section of your dashboard and update your payment information.\n
\n \n\n \n Is this a secure site for purchases?
\n \n Absolutely! We work with top payment companies which guarantees your safety and\n security. All billing information is stored on our payment processing partner which\n has the most stringent level of certification available in the payments industry.\n
\n \n\n \n Can I cancel my subscription?
\n \n You can cancel your subscription anytime in your account. Once the subscription is\n cancelled, you will not be charged next month. You will continue to have access to\n your account until your current subscription expires.\n
\n \n\n \n How long are your contracts?
\n \n Currently, we only offer monthly subscription. You can upgrade or cancel your monthly\n account at any time with no further obligation.\n
\n \n\n \n Can I request refund?
\n Unfortunately, not. We do not issue full or partial refunds for any reason.
\n \n \n \n \n \n\n
\n\n \n \n \n Frequently Asked Questions
\n\n \n \n Is this a secure site for purchases?
\n \n Absolutely! We work with top payment companies which guarantees your safety and\n security. All billing information is stored on our payment processing partner which\n has the most stringent level of certification available in the payments industry.\n
\n \n\n \n Can I cancel my subscription?
\n \n You can cancel your subscription anytime in your account. Once the subscription is\n cancelled, you will not be charged next month. You will continue to have access to\n your account until your current subscription expires.\n
\n \n\n \n How long are your contracts?
\n \n Currently, we only offer monthly subscription. You can upgrade or cancel your monthly\n account at any time with no further obligation.\n
\n \n\n \n Can I update my card details?
\n \n Yes. Go to the billing section of your dashboard and update your payment information.\n
\n \n\n \n Can I request refund?
\n Unfortunately, not. We do not issue full or partial refunds for any reason.
\n \n\n \n Can I try your service for free?
\n \n Of course! We’re happy to offer a free plan to anyone who wants to try our service.\n
\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/features.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Why is it so great?
\n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque\n nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt\n quia cumque consequatur perferendis hic.\n
\n\n \n \n \n - \n \n \n
Safety
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,\n quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda\n deleniti hic.\n
\n \n - \n \n \n
Technology
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,\n quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda\n deleniti hic.\n
\n \n - \n \n \n
Finance
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,\n quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda\n deleniti hic.\n
\n \n
\n \n \n \n \n \n\n
\n\n \n \n \n Why is it so great?
\n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque\n nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt\n quia cumque consequatur perferendis hic.\n
\n\n \n \n \n Analytics
\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores\n aperiam minima assumenda deleniti hic.\n
\n \n\n \n \n Tutorials
\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores\n aperiam minima assumenda deleniti hic.\n
\n \n\n \n \n Support
\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores\n aperiam minima assumenda deleniti hic.\n
\n \n \n \n \n \n\n
\n\n \n \n \n Why is it so great?
\n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque\n nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt\n quia cumque consequatur perferendis hic.\n
\n\n \n \n Feature 1
\n \n Absolutely! We work with top payment companies which guarantees your safety and\n security. All billing information is stored on our payment processing partner which\n has the most stringent level of certification available in the payments industry.\n
\n \n\n \n Feature 2
\n \n You can cancel your subscription anytime in your account. Once the subscription is\n cancelled, you will not be charged next month. You will continue to have access to\n your account until your current subscription expires.\n
\n \n\n \n Feature 3
\n \n Currently, we only offer monthly subscription. You can upgrade or cancel your monthly\n account at any time with no further obligation.\n
\n \n\n \n Feature 4
\n \n Yes. Go to the billing section of your dashboard and update your payment information.\n
\n \n\n \n Feature 5
\n Unfortunately, not. We do not issue full or partial refunds for any reason.
\n \n\n \n Feature 6
\n \n Of course! We’re happy to offer a free plan to anyone who wants to try our service.\n
\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/projects.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Our best projects
\n\n \n \n \n Winter travels
\n \n Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, adipisci velit\n cupidatat proident voluptatem quia numquam.\n
\n \n \n \n \n Summer trips
\n \n Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit\n laboriosam nisi ut aliquid, aspernatur aut odit aut fugit.\n
\n \n \n \n \n \n \n\n
\n\n \n \n \n Our best projects
\n\n \n \n \n ![](\"https://mdbootstrap.com/img/new/standard/city/082.jpg\")
\n \n \n \n \n Food culture
\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit molestias quas\n exercitationem velit alias int corrupti quis ullam earum soluta.\n
\n \n \n \n \n ![](\"https://mdbootstrap.com/img/new/standard/city/091.jpg\")
\n \n \n \n \n City break
\n \n Maiores placeat illo quod fugit optio ipsa inventore magni nulla esse? Quae explicabo\n iure sequi magnam expedita nostrum architecto maxime neque.\n
\n \n \n \n \n ![](\"https://mdbootstrap.com/img/new/standard/city/089.jpg\")
\n \n \n \n \n Creative workshops
\n \n Totam, dolores quam hic amet aliquid impedit architecto provident sint ipsam\n cupiditate nulla, recusandae provident corporis praesentium!\n
\n \n \n \n \n \n \n\n
\n\n \n \n \n Our best projects
\n\n \n \n \n ![](\"https://mdbootstrap.com/img/new/standard/city/012.jpg\")
\n \n \n \n \n - \n \n \n
Education
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,\n quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda\n deleniti hic.\n
\n \n - \n \n \n
Adventure
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,\n quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda\n deleniti hic.\n
\n \n - \n \n \n
Workshops
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,\n quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda\n deleniti hic.\n
\n \n
\n \n \n \n \n \n\n
\n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/service.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Our Services
\n\n Join thousands of satisfied customers using our template globally.
\n\n \n \n \n \n
\n Web Design
\n \n He polite be object change. Consider no overcame yourself sociable children.\n
\n \n \n \n\n \n \n \n
\n Mobile App
\n \n He polite be object change. Consider no overcame yourself sociable children.\n
\n \n \n \n\n \n \n \n
\n Digital Marketing
\n \n He polite be object change. Consider no overcame yourself sociable children.\n
\n \n \n \n\n \n \n \n
\n Branding Package
\n \n He polite be object change. Consider no overcame yourself sociable children.\n
\n \n \n \n \n \n \n \n\n
\n\n \n \n \n Our Services
\n\n Join thousands of satisfied customers using our template globally.
\n\n \n \n Website Design
\n Responsive, Minimalism
\n \n\n \n \n So delightful up dissimilar by unreserved it connection frequently. Do an high room so\n in paid. Up on cousin ye dinner should in. Sex stood tried walls manor truth shy and\n three his. Their to years so child truth. Honoured peculiar families sensible up\n likewise by on in.\n
\n \n\n \n Web Development
\n PHP, MySQL, Laravel
\n \n\n \n \n So delightful up dissimilar by unreserved it connection frequently. Do an high room so\n in paid. Up on cousin ye dinner should in. Sex stood tried walls manor truth shy and\n three his. Their to years so child truth. Honoured peculiar families sensible up\n likewise by on in.\n
\n \n\n \n Mobile App
\n Andriod, iOS
\n \n\n \n \n So delightful up dissimilar by unreserved it connection frequently. Do an high room so\n in paid. Up on cousin ye dinner should in. Sex stood tried walls manor truth shy and\n three his. Their to years so child truth. Honoured peculiar families sensible up\n likewise by on in.\n
\n \n \n \n \n \n\n
\n\n \n \n \n \n\n Our Services
\n\n Join thousands of satisfied customers using our template globally.
\n\n \n \n Website Design
\n \n Written enquire painful to offices forming it. Then so does over sent dull. Likewise\n offended humour mrs fat trifling answered. On ye position greatest so desirous enable\n performance based.\n
\n \n\n \n \n Application Development\n
\n \n Written enquire painful to offices forming it. Then so does over sent dull. Likewise\n offended humour mrs fat trifling answered. On ye position greatest so desirous enable\n performance based.\n
\n \n\n \n\n \n \n Branding Package\n
\n \n Written enquire painful to offices forming it. Then so does over sent dull. Likewise\n offended humour mrs fat trifling answered. On ye position greatest so desirous enable\n performance based.\n
\n \n\n \n Advertisement
\n \n Written enquire painful to offices forming it. Then so does over sent dull. Likewise\n offended humour mrs fat trifling answered. On ye position greatest so desirous enable\n performance based.\n
\n \n \n \n \n \n\n
\n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/teams.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Our Team
\n\n \n \n Alan Turing
\n Frontend Developer
\n \n \n Veronica Smith
\n Backend Developer
\n \n \n Tom Johnson
\n Digital Marketing Analyst
\n \n \n Emma Lovelace
\n Web Designer
\n \n \n \n \n \n\n
\n\n \n \n \n Our Team
\n\n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Our Team
\n\n \n \n Alan Turing
\n Frontend Developer
\n \n \n Veronica Smith
\n Backend Developer
\n \n \n Tom Johnson
\n Digital Marketing Analyst
\n \n \n Emma Lovelace
\n Web Designer
\n \n \n \n \n \n\n
\n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/design-blocks/testimonials.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n Testimonials
\n\n \n \n Anna Deynah
\n UX Designer
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic\n tenetur quae quaerat ad velit ab hic tenetur.\n
\n \n
\n \n \n John Doe
\n Web Developer
\n \n \n Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit\n laboriosam, nisi ut aliquid commodi.\n
\n \n
\n \n \n Maria Kate
\n Photographer
\n \n \n At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium\n voluptatum deleniti atque corrupti.\n
\n \n
\n \n \n \n \n \n\n
\n\n \n \n \n Testimonials
\n\n \n \n Anna Deynah
\n UX Designer
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic\n tenetur quae quaerat ad velit ab hic tenetur.\n
\n \n
\n \n \n \n \n \n\n
\n\n \n \n \n Testimonials
\n\n \n \n \n \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic\n tenetur quae quaerat ad velit tenetur.\"\n
\n - Anna Deynah
\n \n \n \n \"Neque cupiditate assumenda in maiores repudiandae eos id officiis hic tenetur\n mollitia architecto elit sed adipiscing elit.\"\n
\n - Mary Kate
\n \n \n \n \n \n\n
\n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/form-check.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n\n \n \n\n \n \n\n
\n
\n\n \n \n \n \n\n \n \n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n \n \n \n \n\n \n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n \n \n\n
\n\n \n \n \n\n
\n\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/form-control-2.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Sizing - input group
\n\n \n Small\n Sizing - standard bootstrap
\n\n Sizing - form file
\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n\n \n Sizing - form control
\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/form-control.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n Outline input
\n \n \n \n \n \n \n Outline bez labela
\n \n \n \n \n \n Bootstrap standard input
\n
\n
\n
\n \n
\n
\n
\n\n Outline input
\n\n \n \n \n \n\n Outline bez labela
\n\n \n\n \n \n \n\n Bootstrap standard input
\n\n \n \n\n \n \n \n \n To jest input z labelem
\n \n To jest input bez labela
\n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/form-file.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n @\n \n \n \n \n \n\n \n \n \n \n \n @\n \n \n \n \n\n .p { color: blue; } \n\n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'),\n options)\n \n \n \n \n\n \n Wrapping
\n\n \n \n \n @\n \n \n\n \n \n \n \n \n @\n \n\n .p { color: blue; } \n\n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'),\n options)\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n
\n
\n\n \n \n \n \n Custom file input
\n\n \n Upload\n \n \n Choose file...\n \n \n \n Upload\n \n\n \n \n \n Custom select
\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n Segmented buttons
\n\n \n \n \n Toggle Dropdown\n \n \n \n\n \n \n Toggle Dropdown\n \n \n \n \n\n \n Buttons with dropdowns
\n\n \n \n Dropdown\n \n \n \n\n \n \n Dropdown\n \n \n \n\n \n \n Dropdown\n \n \n \n Dropdown\n \n \n \n \n\n \n Buttons addons
\n\n \n \n Multiple addons
\n\n \n $\n 0.00\n Multiple inputs
\n\n \n First and last name\n \n \n \n \n \n\n \n \n Checkboxes and radios
\n\n \n \n Wrapping
\n\n \n @\n Sizing - input group
\n\n \n Small\n Sizing - form file
\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n\n \n Sizing - form control
\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n\n \n Z borderem
\n\n \n Input group
\n\n \n @\n File input
\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n\n \n Bez bordera
\n\n \n Input group
\n\n \n @\n File input
\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n \n\n \n Label
\n Input group
\n\n \n @\n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/input.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n White input
\n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n Basic example
\n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n
\n\n \n \n \n\n
\n\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \nTest \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n Ta opcja poniżej u nas nie ma zastosowania bo my nie rozdzielamy labela od\n inputa\n
\n\n \n Readonly plain text\n
\n\n \n If you want to have <input readonly> elements in your form\n styled as plain text, use the .form-control-plaintext class to\n remove the default form field styling and preserve the correct margin and\n padding.\n
\n\n \n \n \n
\n\n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n Czy chcemy coś zrobić z tą opcją?
\n\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n\n \n \n \n\n \n \n \n \n \n\n \n\n \n \n \n \n \n\n \n \n \n \n Launch demo modal\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n Dropdown button\n \n \n \n \n \n\n \n \n \n If any form parent is hidden, after displaying it, update the input to\n recalculate the width of the label using the following code:\n
\n \n \n document.querySelectorAll('.form-outline').forEach((formOutline) => { new\n mdb.Input(formOutline).update(); })\n \n \n\n Autofill
\n \n \n \n\n Input group
\n \n \n \n @\n \n \n \n\n \n \n \n \n \n \n\n Tabs
\n \n - \n
Home \n \n - \n
Profile \n \n - \n
Contact \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n Form reset
\n \n\n \n Helper text
\n \n \n \n \n \n \n Example helper\n \n \n \n \n \n \n \n \n \n \n \n Example helper\n \n \n \n \n \n
\n\n \n Character counter
\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n Icons
\n\n \n Trailing icon
\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/layout.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n Utilities
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Form grid
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Gutters
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n More complex layouts can also be created with the grid system.
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Horizontal form
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Horizontal form label sizing
\n\n \n \n \n \n Email
\n \n \n \n Email
\n \n \n \n Email
\n \n \n \n \n \n\n \n \n \n \n \n \n Email
\n \n \n \n Email
\n \n \n \n Email
\n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Column sizing
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Auto sizing
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n You can then remix that once again with size-specific column classes.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Inline forms
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/overview.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n Overview
\n \n Bootstrap’s form controls expand on our Rebooted form styles with classes. Use\n these classes to opt into their customized displays for a more consistent\n rendering across browsers and devices.\n
\n \n Be sure to use an appropriate type attribute on all inputs (e.g.,\n email for email address or number for numerical\n information) to take advantage of newer input controls like email verification,\n number selection, and more.\n
\n \n Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for\n documentation on required classes, form layout, and more.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Form text
\n \n Block-level or inline-level form text can be created using\n .form-text.\n
\n \n \n Associating form text with form controls\n
\n \n Form text should be explicitly associated with the form control it relates to\n using the aria-describedby attribute. This will ensure that\n assistive technologies—such as screen readers—will announce this form text\n when the user focuses or enters the control.\n
\n \n\n \n Form text below inputs can be styled with .form-text. If a\n block-level element will be used, a top margin is added for easy spacing from\n the inputs above.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n Inline text can use any typical inline HTML element (be it a\n <span>, <small>, or something else) with\n nothing more than the .form-text class.\n
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Disabled forms\n
\n\n \n Add the disabled boolean attribute on an input to prevent user\n interactions and make it appear lighter.\n
\n\n \n \n \n \n \n \n \n \n\n \n Add the disabled attribute to a <fieldset> to\n disable all the controls within.\n
\n\n \n By default, browsers will treat all native form controls\n (<input>, <select>, and\n <button> elements) inside a\n <fieldset disabled> as disabled, preventing both keyboard and\n mouse interactions on them. However, if your form also includes\n <a ... class=\"btn btn-*\"> elements, these will only be given\n a style of pointer-events: none.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/range.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Range
\n\n \n Range - Bootstrap 5 & Material Design 2.0 forms
\n\n \n \n A Range is an interactive component that lets the user swiftly slide through\n possible values spread over the desired range.\n
\n\n \n Note: Read the API tab to find all available\n options and advanced customization\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n Create custom <input type=\"range\"> controls with\n .form-range. The track (the background) and thumb (the value) are\n both styled to appear the same across browsers. As only Firefox supports\n “filling” their track from the left or right of the thumb as a means to visually\n indicate progress, we do not currently support it.\n
\n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Min and max
\n\n \n \n Range inputs have implicit values for min and\n max—0 and 100, respectively. You may\n specify new values for those using the min and\n max attributes.\n
\n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Steps
\n\n \n \n By default, range inputs “snap” to integer values. To change this, you can\n specify a step value. In the example below, we double the number of\n steps by using step=\"0.5\".\n
\n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n - \n Introduction\n
\n - \n Basic example\n
\n - \n Min and max\n
\n - \n Steps\n
\n \n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Range - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via JavaScript
\n\n \n \n \n const range = new bootstrap.Range(document.getElementById('range'), options)\n \n \n\n Via jQuery
\n\n \n Note: By default, MDB does not include jQuery\n and you have to add it to the project on your own.\n
\n \n $('#range').range('init'); \n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n initInitialize a range instance \n myRange.init() \n \n \n dispose\n \n Disposes a range instance \n \n myRange.dispose()\n \n \n \n \n getInstance\n \n \n Static method which allows you to get the range instance\n associated with a DOM element.\n \n \n mdb.Range.getInstance(element)\n \n \n \n
\n \n\n \n \n \n const range = document.getElementById('range');\n const instance = mdb.Range.getInstance(range);\n instance.dispose();\n \n \n \n \n\n
\n\n \n \n \n Import
\n\n \n \n MDB UI KIT also works with module bundlers. Use the following\n code to import this component:\n
\n\n \n \n \n import { Range } from 'mdb-ui-kit';\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/select.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Subtitle
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/forms/validation.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Validation
\n\n \n Validation - Bootstrap 5 & Material Design 2.0 forms
\n\n \n \n Provide valuable, actionable feedback to your users with HTML5 form validation,\n via browser default behaviors or custom styles and JavaScript.\n
\n\n \n Note: We currently recommend using custom validation styles, as\n native browser default validation messages are not consistently exposed to\n assistive technologies in all browsers (most notably, Chrome on desktop and\n mobile).\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n For custom MDB form validation messages, you’ll need to add the\n novalidate boolean attribute to your <form>.\n This disables the browser default feedback tooltips, but still provides access\n to the form validation APIs in JavaScript. Try to submit the form below; our\n JavaScript will intercept the submit button and relay feedback to you. When\n attempting to submit, you’ll see the :invalid and\n :valid styles applied to your form controls.\n
\n\n \n Custom feedback styles apply custom colors, borders, focus styles, and\n background icons to better communicate feedback.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n\n // Example starter JavaScript for disabling form submissions if there are invalid fields\n (function () {\n 'use strict';\n\n // Fetch all the forms we want to apply custom Bootstrap validation styles to\n var forms = document.querySelectorAll('.needs-validation');\n\n // Loop over them and prevent submission\n Array.prototype.slice.call(forms).forEach(function (form) {\n form.addEventListener(\n 'submit',\n function (event) {\n if (!form.checkValidity()) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n form.classList.add('was-validated');\n },\n false\n );\n });\n })();\n\n \n \n \n \n \n \n\n
\n\n \n \n \n How it works
\n\n Here’s how form validation works with MDB:
\n\n \n - \n HTML form validation is applied via CSS’s two pseudo-classes,\n
:invalid and :valid. It applies to\n <input> and <textarea> elements.\n \n - \n MDB scopes the
:invalid and :valid styles to parent\n .was-validated class, usually applied to the\n <form>. Otherwise, any required field without a value shows\n up as invalid on page load. This way, you may choose when to activate them\n (typically after form submission is attempted).\n \n - \n To reset the appearance of the form (for instance, in the case of dynamic form\n submissions using AJAX), remove the
.was-validated class from the\n <form> again after submission.\n \n - \n As a fallback,
.is-invalid and .is-valid classes may\n be used instead of the pseudo-classes for\n server-side validation. They do not require\n a .was-validated parent class.\n \n - \n Due to constraints in how CSS works, we cannot (at present) apply styles to a\n
<label> that comes before a form control in the DOM without\n the help of custom JavaScript.\n \n - \n All modern browsers support the\n
constraint validation API , a series of JavaScript methods for validating form controls.\n \n - \n Feedback messages may utilize the\n browser defaults (different for each\n browser, and unstylable via CSS) or our custom feedback styles with additional\n HTML and CSS.\n
\n - \n You may provide custom validity messages with\n
setCustomValidity in JavaScript.\n \n
\n\n \n With that in mind, consider the following demos for our custom form validation\n styles, optional server-side classes, and browser defaults.\n
\n \n \n\n
\n\n \n \n \n Browser defaults
\n\n \n Not interested in custom validation feedback messages or writing JavaScript to\n change form behaviors? All good, you can use the browser defaults. Try\n submitting the form below. Depending on your browser and OS, you’ll see a\n slightly different style of feedback.\n
\n\n \n While these feedback styles cannot be styled with CSS, you can still customize\n the feedback text through JavaScript.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Server side
\n\n \n We recommend using client-side validation, but in case you require server-side\n validation, you can indicate invalid and valid form fields with\n .is-invalid and .is-valid. Note that\n .invalid-feedback is also supported with these classes.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Supported elements
\n\n \n Validation styles are available for the following form controls and components:\n
\n\n \n - \n
<input>s and <textarea>s with\n .form-control (including up to one .form-control in\n input groups)\n \n .form-checks.form-file
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Tooltips
\n\n \n If your form layout allows it, you can swap the\n .{valid|invalid}-feedback classes for\n .{valid|invalid}-tooltip classes to display validation feedback in\n a styled tooltip. Be sure to have a parent with\n position: relative on it for tooltip positioning. In the example\n below, our column classes have this already, but your project may require an\n alternative setup.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n \n \n Customizing
\n\n \n Validation states can be customized via Sass with the\n $form-validation-states map. Located in our\n _variables.scss file, this Sass map is looped over to generate the\n default valid/invalid validation states. Included is a\n nested map for customizing each state’s color. While no other states are\n supported by browsers, those using custom styles can easily add more complex\n form feedback.\n
\n\n \n Please note that we do not recommend customizing these values without also\n modifying the form-validation-state mixin.\n
\n\n \n This is the Sass map from _variables.scss. Override this and\n recompile your Sass to generate different states:\n
\n\n \n \n \n \n $form-validation-states: ( \"valid\": ( \"color\": $form-feedback-valid-color,\n \"icon\": $form-feedback-icon-valid ), \"invalid\": ( \"color\":\n $form-feedback-invalid-color, \"icon\": $form-feedback-icon-invalid ) );\n \n \n \n \n\n \n This is the loop from forms/_validation.scss.scss. Any\n modifications to the above Sass map will be reflected in your compiled CSS via\n this loop:\n
\n\n \n \n \n \n @each $state, $data in $form-validation-states { @include\n form-validation-state($state, map-get($data, color), map-get($data, icon));\n }\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n\n Via JavaScript
\n\n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/template/playground-template.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n\n \n\n
\n\n \n\n \n Color (string)
\n \n \n \n \n \n \n \n\n \n\n
\n\n \n\n \n \n \n\n \n\n
\n\n \n \n \n \n\n \n\n
\n\n \n \n \n \n\n \n\n
\n\n \n \n \n \n \n \n \n \n\n \n \n Via JavaScript
\n\n \n \n \n new Component(element, { })\n \n \n \n \n\n \n \n Via data attributes
\n\n \n \n \n \n \n \n \n \n \n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "free/template/template.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n \n \n - \n
Overview \n \n \n\n \n - \n
API \n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Title
\n\n \n Title - Bootstrap 5 & Material Design 2.0 component
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n\n \n Note: Read the API tab to find all available\n options and advanced customization\n
\n \n \n\n
\n\n \n \n \n Basic example
\n\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui\n aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem\n sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.\n
\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n Card title
\n \n Some quick example text to build on the card title and make up the\n bulk of the card's content.\n
\n Go somewhere\n \n \n \n\n \n p {\n color: blue;\n }\n \n\n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n - \n Introduction\n
\n - \n Basic example\n
\n \n - \n Section\n
\n - \n Subsection\n
\n - \n Subsection\n
\n
\n \n \n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n Title - API
\n \n \n\n
\n\n \n \n \n Usage
\n\n Via data attributes
\n\n \n \n \n \n \n \n\n Via JavaScript
\n\n \n \n \n var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n \n \n\n Via jQuery
\n\n \n Note: By default, MDB does not include jQuery\n and you have to add it to the project on your own.\n
\n\n \n \n \n $('.example-class').ripple(options);\n \n \n \n \n\n
\n\n \n \n \n Options
\n\n \n \n \n \n Name \n Type \n Default \n Description \n \n \n \n \n tagString \n 'button'Changes button tag \n \n \n
\n \n \n \n\n
\n\n \n \n \n Methods
\n\n \n \n \n \n Name \n Description \n Example \n \n \n \n \n toggleManually toggles a modal \n myModal.toggle() \n \n
\n \n\n \n \n \n var myModalEl = document.getElementById('myModal')\n var modal = new mdb.Modal(myModalEl)\n modal.toggle()\n \n \n \n \n\n
\n\n \n \n \n Events
\n\n \n \n \n \n Name \n Description \n \n \n \n \n \n show.bs.modal\n \n \n This event fires immediately when the show instance method is called. If\n caused by a click, the clicked element is available as the relatedTarget\n property of the event.\n \n \n \n
\n \n\n \n \n \n var myModalEl = document.getElementById('myModal')\n myModalEl.addEventListener('show.bs.modal', function (e) {\n // do something...\n })\n \n \n \n \n\n
\n\n \n \n \n Import
\n\n \n \n MDB UI KIT also works with module bundlers. Use the following\n code to import this component:\n
\n\n \n \n \n import { Modal } from 'mdb-ui-kit';\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "index.html",
"content": "\n\n \n \n \n \n Material Design for Bootstrap \n \n \n \n \n \n ![](\"https://mdbootstrap.com/img/logo/mdb-transparent-250px.png\")
\n Welcome to Fluent UI Demo Free App
\n\n Components
\n\n Card\n Breadcrumb\n Collapse\n Accordion\n Alert\n Badge\n Buttons\n Buttons 2\n Button Group\n Navs\n Pagination\n Tooltips\n Toasts\n Progress\n Spinners\n Popovers\n Scrollspy\n Carousel\n Close\n Dropdown\n List group\n Modal\n Navbar\n Pills\n Footer\n Mega Menu\n Full demo\n\n\n CSS
\n\n Typography\n Icons\n Shadow\n Colors\n Prism\n Ripple\n Images\n Covers\n Covers 2\n Hover Effects\n\n\n Forms
\n\n Form control\n Form control 2\n Input\n Select\n Overview\n Form check\n Form file\n Form input group\n Form layout\n Validation\n Range\n\n\n Data
\n\n Tables\n\n\n Design Blocks
\n\n Content\n Call to action\n Teams\n Testimonials\n Features\n Projects\n Download\n Counters\n Explore\n Faq\n Customers\n Service\n\n
\n
\n
\n\n Template\n Playground template\n\n
\n
\n
\n\n \n \n \n\n \n \n \n \n\n"
},
{
"path": "license",
"content": "MIT License\n\nCopyright (c) 2022 MDBootstrap\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"bootstrap-fluent\",\n \"version\": \"1.0.0\",\n \"main\": \"js/mdb.min.js\",\n \"repository\": \"https://github.com/mdbootstrap/bootstrap-fluent-design.git\",\n \"author\": \"MDBootstrap\",\n \"license\": \"MIT\"\n}\n"
}
]