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