├── img └── mdb-favicon.ico ├── package.json ├── license ├── free ├── components │ ├── close.html │ ├── badge.html │ ├── tooltips.html │ ├── popovers.html │ ├── accordion.html │ ├── mega-menu.html │ ├── spinners.html │ ├── breadcrumb.html │ ├── pagination.html │ └── progress.html ├── css │ ├── covers-2.html │ ├── images.html │ ├── covers.html │ ├── hover-effects.html │ └── colors.html ├── design-blocks │ ├── content.html │ ├── call-to-action.html │ ├── customers.html │ ├── download.html │ ├── counters.html │ ├── testimonials.html │ ├── projects.html │ ├── explore.html │ ├── features.html │ ├── teams.html │ ├── service.html │ └── faq.html └── forms │ ├── form-file.html │ ├── form-control-2.html │ └── select.html ├── dev └── js │ └── src │ └── mdbsnippet.js ├── README.md └── index.html /img/mdb-favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/bootstrap-fluent-design/HEAD/img/mdb-favicon.ico -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-fluent", 3 | "version": "1.0.0", 4 | "main": "js/mdb.min.js", 5 | "repository": "https://github.com/mdbootstrap/bootstrap-fluent-design.git", 6 | "author": "MDBootstrap", 7 | "license": "MIT" 8 | } 9 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 MDBootstrap 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /free/components/close.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |

Basic

28 | 29 |
30 | 31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /free/css/covers-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
33 |
34 |
35 |
36 |

This is title

37 |

38 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae 39 | laboriosam numquam expedita ullam saepe ipsam, deserunt provident corporis, sit non 40 | accusamus maxime, magni nulla quasi iste ipsa architecto? Autem! 41 |

42 |
43 |
44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /free/css/images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 | 30 | 31 |
32 | 33 |
34 |
35 |
36 | 37 |
44 |
45 |
46 | 47 |
48 | 49 |
56 | 57 |
58 | 59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /free/css/covers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 30 |
31 |
32 |
33 |

This is title

34 |

35 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae 36 | laboriosam numquam expedita ullam saepe ipsam, deserunt provident corporis, sit non 37 | accusamus maxime, magni nulla quasi iste ipsa architecto? Autem! 38 |

39 |
40 |
41 |
42 |
43 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /free/design-blocks/content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Lorem ipsum dolor sit amet

30 |
31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 |
39 |

40 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores repellendus, dolor 41 | possimus veniam officia sapiente ea, esse ducimus quod voluptatibus autem quam voluptas 42 | accusantium quae excepturi amet earum voluptatem fuga. 43 |

44 |
45 | 46 |
47 | 48 |
49 | 50 |
51 | 52 |
53 |
54 |
55 | 59 |
60 |
61 |

Material Design Blocks

62 |

63 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores repellendus, dolor 64 | possimus veniam officia sapiente ea, esse ducimus quod voluptatibus autem quam 65 | voluptas accusantium quae excepturi amet earum voluptatem fuga. 66 |

67 | 68 |
69 |
70 |
71 | 72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /dev/js/src/mdbsnippet.js: -------------------------------------------------------------------------------- 1 | const Entities = require('html-entities').AllHtmlEntities; 2 | const entities = new Entities(); 3 | 4 | class MdbSnippet { 5 | constructor(el) { 6 | this.el = el; 7 | this.data = []; 8 | } 9 | 10 | init() { 11 | this._getData(); 12 | this._encode(); 13 | this._replaceContent(); 14 | } 15 | 16 | _getData() { 17 | const codeElements = Array.from(this.el.getElementsByTagName('code')); 18 | 19 | codeElements.forEach((codeElement) => { 20 | this.data.push({ 21 | lang: codeElement.dataset.lang, 22 | name: codeElement.dataset.name, 23 | content: codeElement.innerHTML, 24 | }); 25 | }); 26 | } 27 | 28 | _encode() { 29 | this.data.forEach((data, index, arr) => { 30 | arr[index].content = entities.encode(data.content); 31 | }); 32 | } 33 | 34 | _createContent() { 35 | const docsPills = document.createElement('div'); 36 | const toolbar = document.createElement('div'); 37 | const ul = document.createElement('ul'); 38 | const tabContent = document.createElement('div'); 39 | 40 | docsPills.setAttribute('class', 'docs-pills border'); 41 | toolbar.setAttribute('class', 'd-flex justify-content-between py-2'); 42 | toolbar.style.paddingLeft = '.6rem'; 43 | ul.setAttribute('class', 'nav nav-pills'); 44 | tabContent.setAttribute('class', 'tab-content'); 45 | 46 | this.data.forEach((data, index) => { 47 | const li = document.createElement('li'); 48 | const a = document.createElement('a'); 49 | 50 | const tabPane = document.createElement('div'); 51 | const codeWrapper = document.createElement('code'); 52 | const preWrapper = document.createElement('pre'); 53 | 54 | const id = Math.floor((Math.random() + Math.floor(Math.random() * 9) + 1) * Math.pow(10, 8)); 55 | 56 | li.setAttribute('class', 'nav-item'); 57 | a.setAttribute('role', 'tab'); 58 | a.setAttribute('href', `#mdb${id}`); 59 | a.setAttribute('class', 'nav-link'); 60 | a.dataset.toggle = 'tab'; 61 | a.innerHTML = data.name; 62 | 63 | li.appendChild(a); 64 | ul.appendChild(li); 65 | 66 | codeWrapper.setAttribute('class', `line-numbers language-${data.lang}`); 67 | codeWrapper.innerHTML = data.content; 68 | preWrapper.appendChild(codeWrapper); 69 | preWrapper.setAttribute('class', 'mb-0'); 70 | 71 | tabPane.setAttribute('role', 'tabpanel'); 72 | tabPane.setAttribute('id', `mdb${id}`); 73 | 74 | if (index === 0) { 75 | a.setAttribute('class', 'nav-link active show'); 76 | tabPane.setAttribute('class', 'tab-pane fade active show'); 77 | } else { 78 | a.setAttribute('class', 'nav-link'); 79 | tabPane.setAttribute('class', 'tab-pane'); 80 | } 81 | 82 | tabPane.appendChild(preWrapper); 83 | tabContent.appendChild(tabPane); 84 | }); 85 | 86 | toolbar.appendChild(ul); 87 | docsPills.appendChild(toolbar); 88 | docsPills.appendChild(tabContent); 89 | this.el.appendChild(docsPills); 90 | } 91 | 92 | _replaceContent() { 93 | this._removeContent(); 94 | this._createContent(); 95 | } 96 | 97 | _removeContent() { 98 | this.el.innerHTML = ''; 99 | } 100 | } 101 | 102 | const mdbsnippets = Array.from(document.getElementsByTagName('mdbsnippet')); 103 | mdbsnippets.forEach((mdbsnippet) => { 104 | new MdbSnippet(mdbsnippet).init(); 105 | }); 106 | -------------------------------------------------------------------------------- /free/design-blocks/call-to-action.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Call to action

30 |

31 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam vitae, fuga similique 32 | quos aperiam tenetur quo ut rerum debitis eum nemo exercitationem asperiores soluta 33 | blanditiis velit, dolores optio cumque facilis! Lorem ipsum dolor sit amet consectetur 34 | adipisicing elit. 35 |

36 | 37 |
38 | 39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 | 49 |

Lorem ipsum dolor sit amet consectetur

50 |
51 | 52 |
53 | 54 |
55 | 56 |
57 | 58 |
59 |
Follow us on:
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
70 | 71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /free/components/badge.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |

Example

28 | 29 |

Example heading New

30 |

Example heading New

31 |

Example heading New

32 |

Example heading New

33 |
Example heading New
34 |
Example heading New
35 | 36 |

Notifications

37 | 38 | 41 | 42 | 43 | 44 | 48 | 49 |

Background colors

50 | 51 | Primary 52 | Secondary 53 | Success 54 | Danger 55 | Warning 56 | Info 57 | Light 58 | Dark 59 | 60 |

Pill badges

61 | 62 | Primary 63 | Secondary 64 | Success 65 | Danger 66 | Warning 67 | Info 68 | Light 69 | Dark 70 | 71 |

Material badges

72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 |
80 | 81 | 82 | 83 | 1 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 999+ 92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /free/components/tooltips.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |

Tooltips

28 | 29 |
30 | 39 | 48 | 57 | 66 |
67 | 68 |
69 |
70 |

71 | Tight pants next level keffiyeh 72 | you probably 75 | haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag 76 | stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american 77 | apparel have a terry 78 | richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu 79 | biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really 80 | ironic artisan 81 | whatever keytar, scenester farm-to-table banksy Austin 88 | twitter handle freegan 89 | cred raw denim single-origin coffee viral. 90 |

91 |
92 |
93 | 94 |
95 | 101 | 104 | 105 |
106 | 107 |
108 | 109 |
110 | 111 |
112 | 113 |
114 | 115 |
116 | 117 |
118 | 119 |
120 |
121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /free/components/popovers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |

Popovers

28 | 29 |
30 | 39 |
40 | 41 |
42 | 52 | 53 | 63 | 64 | 75 | 76 | 86 |
87 | 88 |
89 | Dismissible popover 99 |
100 | 101 |
102 | 103 | 106 | 107 |
108 | 109 |
110 | 111 | 121 |
122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /free/forms/form-file.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 | 43 | 44 |
45 |
46 | 47 | 48 |
49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 |
60 | 61 | 62 |
63 |
64 | 65 | 66 |
67 |
68 | 69 | 70 |
71 |
72 |
73 |
74 | 75 | 76 |
77 |
78 | 79 | 80 |
81 |
82 | 83 | 84 |
85 |
86 | 87 | 88 |
89 |
90 | 91 | 92 |
93 |
94 |
95 |
96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /free/css/hover-effects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

Masks

29 |
30 |
31 | Sample 36 |
37 |
38 |

Text

39 |
40 |
41 |
42 |
43 |
44 |
45 | Sample 50 |
51 |
52 |

Text

53 |
54 |
55 |
56 |
57 |
58 |
59 |

Hover effect - hover-overlay

60 |
61 |
62 | Sample 67 |
77 |
78 |

Text

79 |
80 |
81 |
82 |
83 |
84 |
85 | Sample 90 |
91 |
92 |

Text

93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |

Hover effect - hover-zoom

101 |
102 | Sample 107 |
108 |
109 |

Text

110 |
111 |
112 |
113 |
114 |
115 |

Hover effect - hover-shadow

116 |
117 | Sample 122 |
123 |
124 |
125 |
126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /free/components/accordion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |

Basic

28 | 29 |
30 | 31 |
32 |
33 |

34 | 44 |

45 |
51 |
52 | This is the first item's accordion body. It is hidden by default, 53 | until the collapse plugin adds the appropriate classes that we use to style each 54 | element. These classes control the overall appearance, as well as the showing and 55 | hiding via CSS transitions. You can modify any of this with custom CSS or overriding 56 | our default variables. It's also worth noting that just about any HTML can go within 57 | the .accordion-body, though the transition does limit overflow. 58 |
59 |
60 |
61 |
62 |

63 | 73 |

74 |
80 |
81 | This is the second item's accordion body. It is hidden by default, 82 | until the collapse plugin adds the appropriate classes that we use to style each 83 | element. These classes control the overall appearance, as well as the showing and 84 | hiding via CSS transitions. You can modify any of this with custom CSS or overriding 85 | our default variables. It's also worth noting that just about any HTML can go within 86 | the .accordion-body, though the transition does limit overflow. 87 |
88 |
89 |
90 |
91 |

92 | 102 |

103 |
109 |
110 | This is the third item's accordion body. It is hidden by default, 111 | until the collapse plugin adds the appropriate classes that we use to style each 112 | element. These classes control the overall appearance, as well as the showing and 113 | hiding via CSS transitions. You can modify any of this with custom CSS or overriding 114 | our default variables. It's also worth noting that just about any HTML can go within 115 | the .accordion-body, though the transition does limit overflow. 116 |
117 |
118 |
119 |
120 |
121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | Material-UI logo

4 |

5 | 6 |

Fluent Design for the newest Bootstrap 5

7 | 8 |

Components in the newest Bootstrap 5 and Fluent Design. Completely new design using the latest Bootstrap

9 | 10 | # Highlights 11 | 12 | **Free for personal and commercial use** 13 | Our license is user friendly. Feel free to use Fluent Kit for both private as well as commercial projects. 14 | 15 | **Components** 16 | Choose **among 100+ predefined components**. Each component is ready to use and fits perfectly with each other like LEGO bricks. Take, combine, enjoy!. 17 | 18 | **Modularity** 19 | 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. 20 | 21 | **10 fresh ready to use templates** 22 | 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. 23 | 24 | **Cross-browser compatibility** 25 | Chrome, Firefox, IE, Safari, Opera, Microsoft Edge - Fluent Kit loves all browsers, all browsers love Fluent Kit. 26 | 27 | **Modularity** 28 | 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. 29 | 30 | **Active community** 31 | Our society grows day by day. Visit **our forum** and check how it is to be a part of our family. 32 | 33 | **Flex box** 34 | Fluent Kit fully suppports Flex Box. You can forget about alignment issues. 35 | 36 | **jQuery 3.x and 2.x** 37 | Fluent Kit is integrated with newest jQuery. Therefore you can use all the latest features which come along with it. 38 | 39 | **SASS files** 40 | Arrenged and well documented .scss files can't wait until you compile them. 41 | 42 | **Detailed documentation** 43 | We give you detailed documentation at your disposal. It will help you to implement your ideas easily. 44 | 45 | 46 | # Live Preview 47 | 48 | [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 49 | 50 | 51 | # Cards 52 | 53 |

Card is a responsive content container with an extensible option for headers, footers, images, and a wide variety of content.

54 | 55 | 56 |

57 | 58 |

59 | 60 | 61 | # Carousel 62 | 63 |

A slideshow component for cycling through elements—images or slides of text—like a carousel.

64 | 65 | 66 |

67 | 68 |

69 | 70 | 71 | # Buttons 72 | 73 |

Buttons provide predefined styles (warning, info, danger) for multiple button types: outline, rounded, social, floating, fixed, tags, etc.

74 | 75 | 76 |

77 | 78 |

79 | 80 | 81 | # Button Group 82 | 83 |

Button group wraps a series of buttons together into a single line (navbar) or stack in a vertical column.

84 | 85 | 86 |

87 | 88 |

89 | 90 | 91 | 92 | # Progress 93 | 94 |

Progress bar is an indicator showing the completion progress, i.e. task or time. Use it with percents, steps & other options.

95 | 96 | 97 |

98 | 99 |

100 | 101 | 102 | # Footer 103 | 104 |

A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.

105 | 106 | 107 |

108 | 109 |

110 | 111 | 112 | # Toasts 113 | 114 |

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.

115 | 116 | 117 |

118 | 119 |

120 | 121 | 122 | # Acrylic 123 | 124 | 125 |

126 | 127 |

128 | 129 | 130 | 131 |

132 | 133 |

134 | 135 | 136 | 137 | 138 | A big **thank you to all our users** who are working with us to improve the software. We wouldn't be where we are without you. 139 | -------------------------------------------------------------------------------- /free/design-blocks/customers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |
Trusted by 1 000 000 + developers & designers
30 | 31 |
32 |
33 | Logo 38 |
39 |
40 | Logo 45 |
46 |
47 | Logo 52 |
53 |
54 | Logo 59 |
60 |
61 |
62 | 63 |
64 | 65 |
66 | 67 |
68 | 69 |
70 |

Our clients

71 | 72 |
73 |
74 | Logo 79 | Logo 84 | Logo 89 | Logo 94 |
95 |
96 | Logo 101 | Logo 106 | Logo 111 | Logo 116 |
117 |
118 |
119 | 120 |
121 | 122 |
123 | 124 |
125 | 126 |
127 |
128 |
129 |
130 | Logo 135 |
136 |
137 | Logo 142 |
143 |
144 | Logo 149 |
150 |
151 | Logo 156 |
157 |
158 |
159 |
160 | 161 |
162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /free/design-blocks/download.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |
30 |
31 | Sample image 36 |
37 |
38 |

Now Available

39 |

40 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam 41 | iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum 42 | porro a pariatur veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 43 | Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam 44 | voluptas nostrum. 45 |

46 | 49 | 52 |
53 |
54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 |
64 |
65 |

Introducing an app for mdbootstrap

66 |

67 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam 68 | iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum 69 | porro a pariatur veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 70 | Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam 71 | voluptas nostrum. 72 |

73 | 76 | 79 |
80 |
81 | Sample image 86 |
87 |
88 |
89 | 90 |
91 | 92 |
93 | 94 |
95 | 96 |
97 |
98 |
99 | 100 |

Download now

101 |

102 | Prepared is me marianne pleasure likewise debating. Wonder an unable except better 103 | stairs do ye admire. 104 |

105 |
106 |
    107 |
  • 108 | 109 |
    • 110 |
  • 111 | 112 |
    • 113 |
  • 114 | 115 |
    • 116 |
  • 117 | 118 |
    • 119 |
  • 120 | 121 |
    • 122 |
123 |

Based on 3,000+ reviews

124 | 127 | 130 |
131 |
132 |
133 | 134 |
135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /free/components/mega-menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 122 | 123 |
124 |
125 | 134 | 139 |
140 |
141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /free/forms/form-control-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |

Sizing - input group

30 | 31 |
32 | Small 33 | 39 |
40 | 41 |
42 | Default 43 | 49 |
50 | 51 |
52 | Large 53 | 59 |
60 |
61 | 62 |
63 |

Sizing - standard bootstrap

64 | 65 | 71 | 72 | 73 | 74 | 80 |
81 | 82 |
83 |

Sizing - form file

84 | 85 |
86 | 87 | 91 |
92 | 93 |
94 | 95 | 99 |
100 | 101 |
102 | 103 | 107 |
108 |
109 | 110 |
111 |

Sizing - form control

112 | 113 |
114 | 115 | 116 |
117 | 118 |
119 | 120 | 121 |
122 | 123 |
124 | 125 | 126 |
127 |
128 |
129 |
130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /free/components/spinners.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 27 | 28 | 29 | 30 |
31 |

Spinners

32 | 33 |
34 | 37 |
38 | 39 |
40 | 43 | 46 | 49 | 52 | 55 | 58 | 61 | 64 |
65 | 66 |
67 | 70 |
71 | 72 |
73 | 76 | 79 | 82 | 85 | 88 | 91 | 94 | 97 |
98 | 99 |
100 | 103 |
104 | 105 |
106 |
107 | 110 |
111 |
112 | 113 |
114 |
115 | Loading... 116 | 117 |
118 |
119 | 120 |
121 |
122 | 125 |
126 |
127 | 128 |
129 |
130 | 133 |
134 |
135 | 136 |
137 | 140 | 143 |
144 | 145 |
146 | 149 | 152 |
153 | 154 |
155 | 159 | 163 |
164 | 165 |
166 | 170 | 174 |
175 |
176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 |

Welcome to Fluent UI Demo Free App

29 | 30 |

Components

31 | 32 | Card 33 | Breadcrumb 34 | Collapse 35 | Accordion 36 | Alert 37 | Badge 38 | Buttons 39 | Buttons 2 40 | Button Group 41 | Navs 42 | Pagination 43 | Tooltips 44 | Toasts 45 | Progress 46 | Spinners 47 | Popovers 48 | Scrollspy 49 | Carousel 50 | Close 51 | Dropdown 52 | List group 53 | Modal 54 | Navbar 55 | Pills 56 | Footer 57 | Mega Menu 58 | Full demo 59 | 60 | 61 |

CSS

62 | 63 | Typography 64 | Icons 65 | Shadow 66 | Colors 67 | Prism 68 | Ripple 69 | Images 70 | Covers 71 | Covers 2 72 | Hover Effects 73 | 74 | 75 |

Forms

76 | 77 | Form control 78 | Form control 2 79 | Input 80 | Select 81 | Overview 82 | Form check 83 | Form file 84 | Form input group 85 | Form layout 86 | Validation 87 | Range 88 | 89 | 90 |

Data

91 | 92 | Tables 93 | 94 | 95 |

Design Blocks

96 | 97 | Content 98 | Call to action 99 | Teams 100 | Testimonials 101 | Features 102 | Projects 103 | Download 104 | Counters 105 | Explore 106 | Faq 107 | Customers 108 | Service 109 | 110 |
111 |
112 |
113 | 114 | Template 115 | Playground template 116 | 117 |
118 |
119 |
120 | 121 |
122 |
123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /free/design-blocks/counters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Counter

30 | 31 |

Attributes

32 | 33 | 38 | 39 |
40 | 0 41 |
42 | 43 |

44 | How long did you develop it? 45 | 0 hours 46 |

47 | 48 |
49 | Was it worth it? 50 | 0 % 53 |
54 | 55 |
56 | This many ppl trusted I can deliver it in one day 57 | 58 |
59 | 60 |
61 | It works with huge numbers too 62 | 63 |
64 | 65 |

↓ Check this out ↓

66 | 67 |
68 | You can animate it! 69 | 0 % 72 |
73 |
74 | 75 |
76 | 77 |
78 | 79 |
80 | 81 |
82 |

Counter

83 | 84 |
85 |
86 |
87 |
88 |

94 | 42 95 |

96 |
97 | 98 |
99 |

Projects

100 |

101 |
102 |
103 |
104 | 105 |
106 |
107 |
108 |

114 | 3,500 115 |

116 |
117 | 118 |
119 |

Customers

120 |

121 |
122 |
123 |
124 | 125 |
126 |
127 |
128 |

134 | 0% 135 |

136 |
137 | 138 |
139 |

Satisfaction

140 |

141 |
142 |
143 |
144 |
145 |
146 | 147 |
148 | 149 |
150 | 151 |
152 | 153 |
154 |

Counter

155 | 156 |
157 |
158 |

159 | 160 | 100 163 |

164 |

Unique Page

165 |
166 | 167 |
168 |

169 | 170 | 250 173 |

174 |

Block Variety

175 |
176 | 177 |
178 |

179 | 180 | 330 183 |

184 |

Reusable Component

185 |
186 | 187 |
188 |

189 | 190 | 430 193 |

194 |

Crafted Element

195 |
196 |
197 |
198 | 199 |
200 | 201 |
202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | -------------------------------------------------------------------------------- /free/design-blocks/testimonials.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Testimonials

30 | 31 |
32 |
33 | avatar 39 |
Anna Deynah
40 |

UX Designer

41 |

42 | 43 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic 44 | tenetur quae quaerat ad velit ab hic tenetur. 45 |

46 |
    47 |
    • 48 |
    • 49 |
    • 50 |
    • 51 |
    • 52 |
53 |
54 |
55 | avatar 61 |
John Doe
62 |

Web Developer

63 |

64 | 65 | Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 66 | laboriosam, nisi ut aliquid commodi. 67 |

68 |
    69 |
    • 70 |
    • 71 |
    • 72 |
    • 73 |
    • 74 |
75 |
76 |
77 | avatar 83 |
Maria Kate
84 |

Photographer

85 |

86 | 87 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 88 | voluptatum deleniti atque corrupti. 89 |

90 |
    91 |
    • 92 |
    • 93 |
    • 94 |
    • 95 |
    • 96 |
97 |
98 |
99 |
100 | 101 |
102 | 103 |
104 | 105 |
106 | 107 |
108 |

Testimonials

109 | 110 |
111 |
112 | avatar 118 |
Anna Deynah
119 |

UX Designer

120 |

121 | 122 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic 123 | tenetur quae quaerat ad velit ab hic tenetur. 124 |

125 |
    126 |
    • 127 |
    • 128 |
    • 129 |
    • 130 |
    • 131 |
132 |
133 |
134 |
135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 |

Testimonials

144 | 145 |
146 |
147 | avatar 153 |

154 | "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic 155 | tenetur quae quaerat ad velit tenetur." 156 |

157 |
- Anna Deynah
158 |
159 |
160 | avatar 166 |

167 | "Neque cupiditate assumenda in maiores repudiandae eos id officiis hic tenetur 168 | mollitia architecto elit sed adipiscing elit." 169 |

170 |
- Mary Kate
171 |
172 |
173 |
174 | 175 |
176 | 177 |
178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /free/design-blocks/projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Our best projects

30 | 31 |
32 |
33 |
34 | 38 | 39 |
40 | 41 |
42 |
Winter travels
43 |

44 | Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, adipisci velit 45 | cupidatat proident voluptatem quia numquam. 46 |

47 | 48 |
49 |
50 |
51 | 55 | 56 |
57 | 58 |
59 |
Summer trips
60 |

61 | Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 62 | laboriosam nisi ut aliquid, aspernatur aut odit aut fugit. 63 |

64 | 65 |
66 |
67 |
68 | 69 |
70 | 71 |
72 | 73 |
74 | 75 |
76 |

Our best projects

77 | 78 |
79 |
80 |
81 | 82 | 83 |
84 | 85 |
86 |
Food culture
87 |

88 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit molestias quas 89 | exercitationem velit alias int corrupti quis ullam earum soluta. 90 |

91 | 92 |
93 |
94 |
95 | 96 | 97 |
98 | 99 |
100 |
City break
101 |

102 | Maiores placeat illo quod fugit optio ipsa inventore magni nulla esse? Quae explicabo 103 | iure sequi magnam expedita nostrum architecto maxime neque. 104 |

105 | 106 |
107 |
108 |
109 | 110 | 111 |
112 | 113 |
114 |
Creative workshops
115 |

116 | Totam, dolores quam hic amet aliquid impedit architecto provident sint ipsam 117 | cupiditate nulla, recusandae provident corporis praesentium! 118 |

119 | 120 |
121 |
122 |
123 | 124 |
125 | 126 |
127 | 128 |
129 | 130 |
131 |

Our best projects

132 | 133 |
134 |
135 |
136 | 137 |
138 |
139 |
140 |
    141 |
  • 142 |
    143 | 144 |
    Education
    145 |
    146 |

    147 | Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, 148 | quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda 149 | deleniti hic. 150 |

    151 |
    • 152 |
  • 153 |
    154 | 155 |
    Adventure
    156 |
    157 |

    158 | Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, 159 | quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda 160 | deleniti hic. 161 |

    162 |
    • 163 |
  • 164 |
    165 | 166 |
    Workshops
    167 |
    168 |

    169 | Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, 170 | quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda 171 | deleniti hic. 172 |

    173 |
    • 174 |
175 |
176 |
177 |
178 | 179 |
180 | 181 |
182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /free/design-blocks/explore.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Help Center

30 | 31 |

32 | Cards include various options for customizing their backgrounds, borders, and color. 33 |

34 | 35 |
36 |
37 |
38 |
39 |

40 |
Outstanding Community
41 |

42 | Now for manners use has company believe parlors. Least nor party who wrote while 43 | did. Excuse formed as is agreed admire so on result parish. Put use set uncommonly 44 | announcing and traveling. 45 |

46 | 47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |

56 |
Powerful Extensions
57 |

58 | Now for manners use has company believe parlors. Least nor party who wrote while 59 | did. Excuse formed as is agreed admire so on result parish. Put use set uncommonly 60 | announcing and traveling. 61 |

62 | 63 |
64 | 65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 | 73 |
74 | 75 |
76 | 77 |
78 |

Start a project now

79 | 80 |

81 | Hire expert freelancers for any job to be done online or become a freelancer and earn 82 | money. 83 |

84 | 85 |
86 |
87 |
88 |
89 |
90 |
91 |
95 | 96 |
97 |
98 |
99 |
I'm a developer
100 |

101 | Your web pages looks good on all devices and screen sizes, including desktop, 102 | tablet and mobile. 103 |

104 |
105 |
106 | 107 |
108 | 109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
121 | 122 |
123 |
124 |
125 |
I need a developer
126 |

127 | Your web pages looks good on all devices and screen sizes, including desktop, 128 | tablet and mobile. 129 |

130 |
131 |
132 | 133 |
134 | 135 |
136 |
137 |
138 |
139 |
140 | 141 |
142 | 143 |
144 | 145 |
146 | 147 |
148 |

Unique Factors

149 | 150 |

It's really easy to create a landing page for your awesome product.

151 | 152 |
153 |
154 |
155 |
156 |

157 |
Responsive
158 | 159 |
160 | 161 |
162 |
163 |
164 |
165 |
166 |
167 |

168 |
Customizable
169 | 170 |
171 | 172 |
173 |
174 |
175 |
176 |
177 |
178 |

179 |
UI Elements
180 | 181 |
182 | 183 |
184 |
185 |
186 |
187 |
188 |
189 |

190 |
Clean Code
191 | 192 |
193 | 194 |
195 |
196 |
197 |
198 |
199 | 200 |
201 | 202 |
203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | -------------------------------------------------------------------------------- /free/design-blocks/features.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Why is it so great?

30 |

31 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque 32 | nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt 33 | quia cumque consequatur perferendis hic. 34 |

35 | 36 |
37 |
38 | Sample image 43 |
44 |
45 |
    46 |
  • 47 |
    48 | 49 |
    Safety
    50 |
    51 |

    52 | Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, 53 | quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda 54 | deleniti hic. 55 |

    56 |
    • 57 |
  • 58 |
    59 | 60 |
    Technology
    61 |
    62 |

    63 | Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, 64 | quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda 65 | deleniti hic. 66 |

    67 |
    • 68 |
  • 69 |
    70 | 71 |
    Finance
    72 |
    73 |

    74 | Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, 75 | quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda 76 | deleniti hic. 77 |

    78 |
    • 79 |
80 |
81 |
82 |
83 | 84 |
85 | 86 |
87 | 88 |
89 | 90 |
91 |

Why is it so great?

92 |

93 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque 94 | nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt 95 | quia cumque consequatur perferendis hic. 96 |

97 | 98 |
99 |
100 | 101 |
Analytics
102 |

103 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores 104 | aperiam minima assumenda deleniti hic. 105 |

106 |
107 | 108 |
109 | 110 |
Tutorials
111 |

112 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores 113 | aperiam minima assumenda deleniti hic. 114 |

115 |
116 | 117 |
118 | 119 |
Support
120 |

121 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores 122 | aperiam minima assumenda deleniti hic. 123 |

124 |
125 |
126 |
127 | 128 |
129 | 130 |
131 | 132 |
133 | 134 |
135 |

Why is it so great?

136 |

137 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque 138 | nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt 139 | quia cumque consequatur perferendis hic. 140 |

141 | 142 |
143 |
144 |
Feature 1
145 |

146 | Absolutely! We work with top payment companies which guarantees your safety and 147 | security. All billing information is stored on our payment processing partner which 148 | has the most stringent level of certification available in the payments industry. 149 |

150 |
151 | 152 |
153 |
Feature 2
154 |

155 | You can cancel your subscription anytime in your account. Once the subscription is 156 | cancelled, you will not be charged next month. You will continue to have access to 157 | your account until your current subscription expires. 158 |

159 |
160 | 161 |
162 |
Feature 3
163 |

164 | Currently, we only offer monthly subscription. You can upgrade or cancel your monthly 165 | account at any time with no further obligation. 166 |

167 |
168 | 169 |
170 |
Feature 4
171 |

172 | Yes. Go to the billing section of your dashboard and update your payment information. 173 |

174 |
175 | 176 |
177 |
Feature 5
178 |

Unfortunately, not. We do not issue full or partial refunds for any reason.

179 |
180 | 181 |
182 |
Feature 6
183 |

184 | Of course! We’re happy to offer a free plan to anyone who wants to try our service. 185 |

186 |
187 |
188 |
189 | 190 |
191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /free/design-blocks/teams.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Our Team

30 | 31 |
32 |
33 | avatar 39 |
Alan Turing
40 |

Frontend Developer

41 |
42 |
43 | avatar 49 |
Veronica Smith
50 |

Backend Developer

51 |
52 |
53 | avatar 59 |
Tom Johnson
60 |

Digital Marketing Analyst

61 |
62 |
63 | avatar 69 |
Emma Lovelace
70 |

Web Designer

71 |
72 |
73 |
74 | 75 |
76 | 77 |
78 | 79 |
80 | 81 |
82 |

Our Team

83 | 84 |
85 |
86 | avatar 92 |
Alan Turing
93 |

Frontend Developer

94 | 105 |
106 |
107 | avatar 113 |
Veronica Smith
114 |

Backend Developer

115 | 126 |
127 |
128 | avatar 134 |
Tom Johnson
135 |

Digital Marketing Analyst

136 | 147 |
148 |
149 | avatar 155 |
Emma Lovelace
156 |

Web Designer

157 | 168 |
169 |
170 |
171 | 172 |
173 | 174 |
175 | 176 |
177 | 178 |
179 |

Our Team

180 | 181 |
182 |
183 | avatar 189 |
Alan Turing
190 |

Frontend Developer

191 |
192 |
193 | avatar 199 |
Veronica Smith
200 |

Backend Developer

201 |
202 |
203 | avatar 209 |
Tom Johnson
210 |

Digital Marketing Analyst

211 |
212 |
213 | avatar 219 |
Emma Lovelace
220 |

Web Designer

221 |
222 |
223 |
224 | 225 |
226 | 227 |
228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | -------------------------------------------------------------------------------- /free/design-blocks/service.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Our Services

30 | 31 |

Join thousands of satisfied customers using our template globally.

32 | 33 |
34 |
35 |
36 |
37 |

38 |
Web Design
39 |

40 | He polite be object change. Consider no overcame yourself sociable children. 41 |

42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 |

50 |
Mobile App
51 |

52 | He polite be object change. Consider no overcame yourself sociable children. 53 |

54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |

62 |
Digital Marketing
63 |

64 | He polite be object change. Consider no overcame yourself sociable children. 65 |

66 |
67 |
68 |
69 | 70 |
71 |
72 |
73 |

74 |
Branding Package
75 |

76 | He polite be object change. Consider no overcame yourself sociable children. 77 |

78 |
79 |
80 |
81 |
82 |
83 | 84 |
85 | 86 |
87 | 88 |
89 | 90 |
91 |

Our Services

92 | 93 |

Join thousands of satisfied customers using our template globally.

94 | 95 |
96 |
97 |
Website Design
98 |

Responsive, Minimalism

99 |
100 | 101 |
102 |

103 | So delightful up dissimilar by unreserved it connection frequently. Do an high room so 104 | in paid. Up on cousin ye dinner should in. Sex stood tried walls manor truth shy and 105 | three his. Their to years so child truth. Honoured peculiar families sensible up 106 | likewise by on in. 107 |

108 |
109 | 110 |
111 |
Web Development
112 |

PHP, MySQL, Laravel

113 |
114 | 115 |
116 |

117 | So delightful up dissimilar by unreserved it connection frequently. Do an high room so 118 | in paid. Up on cousin ye dinner should in. Sex stood tried walls manor truth shy and 119 | three his. Their to years so child truth. Honoured peculiar families sensible up 120 | likewise by on in. 121 |

122 |
123 | 124 |
125 |
Mobile App
126 |

Andriod, iOS

127 |
128 | 129 |
130 |

131 | So delightful up dissimilar by unreserved it connection frequently. Do an high room so 132 | in paid. Up on cousin ye dinner should in. Sex stood tried walls manor truth shy and 133 | three his. Their to years so child truth. Honoured peculiar families sensible up 134 | likewise by on in. 135 |

136 |
137 |
138 |
139 | 140 |
141 | 142 |
143 | 144 |
145 | 146 |
147 | 152 | 153 |

Our Services

154 | 155 |

Join thousands of satisfied customers using our template globally.

156 | 157 |
158 |
159 |
Website Design
160 |

161 | Written enquire painful to offices forming it. Then so does over sent dull. Likewise 162 | offended humour mrs fat trifling answered. On ye position greatest so desirous enable 163 | performance based. 164 |

165 |
166 | 167 |
168 |
169 | Application Development 170 |
171 |

172 | Written enquire painful to offices forming it. Then so does over sent dull. Likewise 173 | offended humour mrs fat trifling answered. On ye position greatest so desirous enable 174 | performance based. 175 |

176 |
177 | 178 |
179 | 180 |
181 |
182 | Branding Package 183 |
184 |

185 | Written enquire painful to offices forming it. Then so does over sent dull. Likewise 186 | offended humour mrs fat trifling answered. On ye position greatest so desirous enable 187 | performance based. 188 |

189 |
190 | 191 |
192 |
Advertisement
193 |

194 | Written enquire painful to offices forming it. Then so does over sent dull. Likewise 195 | offended humour mrs fat trifling answered. On ye position greatest so desirous enable 196 | performance based. 197 |

198 |
199 |
200 |
201 | 202 |
203 | 204 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | -------------------------------------------------------------------------------- /free/components/breadcrumb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |

Basic

28 | 29 |
30 | 31 | 36 | 37 | 43 | 44 | 51 | 52 |
53 |
54 | 55 | 111 | 112 |
113 |
114 | 115 | 221 | 222 |
223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /free/components/pagination.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 37 |
38 | 39 |
40 | 57 |
58 | 59 |
60 | 75 |
76 | 77 |
78 | 96 |
97 | 98 |
99 | 111 |
112 | 113 |
114 | 126 |
127 | 128 |
129 | 142 |
143 | 144 |
145 | 158 |
159 | 160 |
161 |

Small

162 | 163 | 178 |
179 | 180 |
181 |

Standard

182 | 183 | 198 |
199 | 200 |
201 |

Large

202 | 203 | 218 |
219 |
220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | -------------------------------------------------------------------------------- /free/components/progress.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 27 | 28 | 29 | 30 |
31 |

Progress bars

32 | 33 |
34 |
35 |
36 |
43 |
44 |
45 |
53 |
54 |
55 |
63 |
64 |
65 |
73 |
74 |
75 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
96 |
97 |
98 | 99 |
100 |
101 |
109 | 25% 110 |
111 |
112 |
113 | 114 |
115 |
116 |
117 |
125 |
126 |
127 |
135 |
136 |
137 |
138 | 139 |
140 |
141 |
142 |
150 |
151 |
152 |
160 |
161 |
162 |
170 |
171 |
172 |
180 |
181 |
182 |
183 | 184 |
185 |
186 |
194 |
202 |
210 |
211 |
212 | 213 |
214 |
215 |
216 |
224 |
225 |
226 |
234 |
235 |
236 |
244 |
245 |
246 |
254 |
255 |
256 |
264 |
265 |
266 |
267 | 268 |
269 |
270 |
271 |
279 |
280 | 290 | 291 |

292 | ten button toggle animation nie działa jak w dokumentacji bootstrapa, ale zostawiam go 293 | bo moze w dokumentacji ktoś to ogarnie i będzie umiał zrobić tak aby ta animacja się 294 | włączała i wyłączała i nie zacinała strony tak jak wtedy gdy jest tylko włączona. 295 |

296 |
297 |
298 | 299 |
300 |
301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | -------------------------------------------------------------------------------- /free/css/colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 41 | 42 | 43 | 44 |
45 |

Theme colors

46 | 47 |
48 |
49 |
53 |

Aromateraphy ipsum

54 |
55 |
56 |
57 |
61 |

Aromateraphy ipsum

62 |
63 |
64 |
65 |
69 |

Aromateraphy ipsum

70 |
71 |
72 |
73 |
77 |

Aromateraphy ipsum

78 |
79 |
80 |
81 |
85 |

Aromateraphy ipsum

86 |
87 |
88 |
89 |
93 |

Aromateraphy ipsum

94 |
95 |
96 |
97 |
101 |

Aromateraphy ipsum

102 |
103 |
104 |
105 |
109 |

Aromateraphy ipsum

110 |
111 |
112 |
113 | 114 |

Blue colors

115 | 116 |
117 |
118 |
128 |

Aromateraphy ipsum

129 |
130 |
131 |
132 |
142 |

Aromateraphy ipsum

143 |
144 |
145 |
146 |
156 |

Aromateraphy ipsum

157 |
158 |
159 |
160 |
170 |

Aromateraphy ipsum

171 |
172 |
173 |
174 | 175 |
176 |
177 |
187 |

Aromateraphy ipsum

188 |
189 |
190 |
191 |
201 |

Aromateraphy ipsum

202 |
203 |
204 |
205 |
215 |

Aromateraphy ipsum

216 |
217 |
218 |
219 |
229 |

Aromateraphy ipsum

230 |
231 |
232 |
233 | 234 |
235 |
236 |
246 |

Aromateraphy ipsum

247 |
248 |
249 |
250 | 251 |

Buttons

252 | 253 |
254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 |
264 | 265 |

Text colors

266 | 267 |
268 |

.text-primary

269 |

.text-secondary

270 |

.text-success

271 |

.text-danger

272 |

.text-warning

273 |

.text-info

274 |

.text-light

275 |

.text-dark

276 |

.text-body

277 |

.text-muted

278 |

.text-white

279 |

.text-black-50

280 |

.text-white-50

281 |
282 |
283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | -------------------------------------------------------------------------------- /free/design-blocks/faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

Frequently Asked Questions

30 | 31 | 32 |
33 | 34 |
35 |

36 | 46 |

47 |
48 | 49 |
55 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad 56 | squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck 57 | quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it 58 | squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, 59 | craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur 60 | butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth 61 | nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 62 |
63 | 64 | 65 | 66 |
67 |

68 | 78 |

79 |
80 | 81 |
87 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad 88 | squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck 89 | quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it 90 | squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, 91 | craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur 92 | butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth 93 | nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 94 |
95 | 96 | 97 | 98 |
99 |

100 | 110 |

111 |
112 | 113 |
119 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad 120 | squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck 121 | quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it 122 | squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, 123 | craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur 124 | butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth 125 | nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 126 |
127 | 128 |
129 | 130 |
131 | 132 |
133 | 134 |
135 | 136 |
137 | 138 |
139 |

Frequently Asked Questions

140 | 141 |
142 |
143 |
What payment services do you support?
144 |

We accept all major credit cards.

145 |
146 | 147 |
148 |
Can I update my card details?
149 |

150 | Yes. Go to the billing section of your dashboard and update your payment information. 151 |

152 |
153 | 154 |
155 |
Is this a secure site for purchases?
156 |

157 | Absolutely! We work with top payment companies which guarantees your safety and 158 | security. All billing information is stored on our payment processing partner which 159 | has the most stringent level of certification available in the payments industry. 160 |

161 |
162 | 163 |
164 |
Can I cancel my subscription?
165 |

166 | You can cancel your subscription anytime in your account. Once the subscription is 167 | cancelled, you will not be charged next month. You will continue to have access to 168 | your account until your current subscription expires. 169 |

170 |
171 | 172 |
173 |
How long are your contracts?
174 |

175 | Currently, we only offer monthly subscription. You can upgrade or cancel your monthly 176 | account at any time with no further obligation. 177 |

178 |
179 | 180 |
181 |
Can I request refund?
182 |

Unfortunately, not. We do not issue full or partial refunds for any reason.

183 |
184 |
185 |
186 | 187 |
188 | 189 |
190 | 191 |
192 | 193 |
194 |

Frequently Asked Questions

195 | 196 |
197 |
198 |
Is this a secure site for purchases?
199 |

200 | Absolutely! We work with top payment companies which guarantees your safety and 201 | security. All billing information is stored on our payment processing partner which 202 | has the most stringent level of certification available in the payments industry. 203 |

204 |
205 | 206 |
207 |
Can I cancel my subscription?
208 |

209 | You can cancel your subscription anytime in your account. Once the subscription is 210 | cancelled, you will not be charged next month. You will continue to have access to 211 | your account until your current subscription expires. 212 |

213 |
214 | 215 |
216 |
How long are your contracts?
217 |

218 | Currently, we only offer monthly subscription. You can upgrade or cancel your monthly 219 | account at any time with no further obligation. 220 |

221 |
222 | 223 |
224 |
Can I update my card details?
225 |

226 | Yes. Go to the billing section of your dashboard and update your payment information. 227 |

228 |
229 | 230 |
231 |
Can I request refund?
232 |

Unfortunately, not. We do not issue full or partial refunds for any reason.

233 |
234 | 235 |
236 |
Can I try your service for free?
237 |

238 | Of course! We’re happy to offer a free plan to anyone who wants to try our service. 239 |

240 |
241 |
242 |
243 | 244 |
245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | -------------------------------------------------------------------------------- /free/forms/select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design for Bootstrap 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 59 | 60 | 61 | 62 |
63 | 64 |
70 | 71 |
72 | 73 |
74 | 75 |
76 | 77 |
78 | 79 |

Title

80 | 81 | 82 |

Subtitle

83 | 84 | 85 |

86 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui 87 | aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem 88 | sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque. 89 |

90 |
91 | 92 | 93 |
94 | 95 | 96 |
97 | 98 |

Basic example

99 | 100 | 101 |
102 |
103 | 110 |
111 |
112 | 113 | 114 | 115 |
116 | 117 | 118 |
119 | 120 | 121 |
122 | 123 | 124 |
125 | 126 |
127 | 128 |
129 | 130 |
131 | 132 | 133 | 134 |
135 | 136 | 142 | 143 |
144 | 145 |
146 | 147 |
148 | 149 | 150 | 151 |
152 | 153 |
154 | 155 |
156 | 157 |
158 | 159 |
160 | 161 |

Title - API

162 |
163 | 164 | 165 |
166 | 167 | 168 |
169 | 170 |

Usage

171 | 172 |

Via data attributes

173 | 174 | 175 | 176 | 179 | 180 | 181 | 182 |

Via JavaScript

183 | 184 | 185 | 186 | var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) 187 | 188 | 189 |
190 | 191 | 192 |
193 | 194 | 195 |
196 | 197 |

Options

198 | 199 |
200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 |
NameTypeDefaultDescription
tagString'button'Changes button tag
218 |
219 |
220 | 221 | 222 |
223 | 224 | 225 |
226 | 227 |

Methods

228 | 229 |
230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 |
NameDescriptionExample
toggleManually toggles a modalmyModal.toggle()
246 |
247 |
248 | 249 | 250 |
251 | 252 | 253 |
254 | 255 |

Events

256 | 257 |
258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 270 | 275 | 276 | 277 |
NameDescription
268 | show.bs.modal 269 | 271 | This event fires immediately when the show instance method is called. If 272 | caused by a click, the clicked element is available as the relatedTarget 273 | property of the event. 274 |
278 |
279 |
280 | 281 |
282 | 283 |
284 | 285 | 286 | 287 |
288 | 289 | 297 | 298 |
299 | 300 |
301 | 302 |
303 | 304 |
305 | 306 |
307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | --------------------------------------------------------------------------------