Flat UI Free – Framework and Bootstrap Theme Design


Flat UI Free is made on the basis of Twitter Bootstrap 3 in a stunning flat-style.

Flat UI Free contains many basic and complex components which are great for designers to have at hand: buttons, inputs, button groups, selects, checkboxes and radio-buttons, tags, menus, progress bars and sliders, navigation elements and more.

We have considered your needs in developing the HTML version of our bootstrap theme, which contains the same elements as the PSD version and are perfect for creating great websites. With this Framework, you can spend even less time on routine work, saving that time for creativity.

Colored, stylish icons can easily be modified and used in a wide variety of projects, as they contain original layers. Glyphs are also available in psd, html/css and svg formats.

Bootstrap theme design also includes color swatches – no worrying over color choices here – with 10 colors that perfectly suit each other. Flat UI Free is made using the Lato typeface.

Flat UI – Free Bootstrap Theme

Flat UI - Free Bootstrap Theme

The Flat UI is made on the basis of Bootstrap, a comfortable and functional framework that simplifies the development of websites. The framework has been proven over the years by developers from around the world.

HTML version of Flat UI includes:

  • Twitter Bootstrap 3 Framework based
  • Retina Ready Images and Icons
  • Custom form components
  • Sleek CSS3 effects
  • OOCSS approach
  • Easy configurable color scheme
  • New web-font and new web-font icons

PSD version of Flat UI includes:

  • PSD files
  • Layered (Shapes)
  • Retina Ready
  • Color swatches
  • Glyphs – svg format
  • Free font used – Lato

Download Flat UI Free 2.2.2

Flat UI Pro! Paid version from $39.



  1. rowruffdesign Mar 2, 12:22 am

    Can’t wait for this awesome bootstrap theme!

  2. Burak Öztırpan Mar 2, 1:48 am

    awesome template for web designers. For bootstrap really amazing.

  3. virgilio Mar 2, 11:49 am

    waiting for the download this bootstrap theme, thx!

  4. Taras Mankovski Mar 2, 3:32 pm

    Do you use LESS by any chance? I’m assembling a design toolset for WordPress around Twitter Bootstrap and I want to be able to LESS to include the pieces that I need. If Flat UI includes LESS then it will be a huge bonus for my toolset.

  5. anardo Mar 2, 7:13 pm

    I can’t wait for this UI kit. I believe it is the only one already coded…

  6. pepperstreet Mar 3, 11:12 pm

    PSD + HTML/CSS ?
    Is it your future product policy or just a special one-time offer for this particular UI ?

    • Adrian Mar 3, 11:21 pm

      Maybe will be for every future product.

      • pepperstreet Mar 3, 11:47 pm


        one thought and suggestion: If you work with bootstrap as a basis, you might also consider to support some side-projects. Since bootstrap core misses some important UI elements you use in your designs.

        Especially the radio, checkbox and select elements lack a nice appearance. (due to their technical limitations) You could have a look at:

        – Bootstrap Select by Silvio Moreto
        – Fuel UX (checkbox, radios and specials)
        – BootMetro (inkl. checkbox and radio styles)

        – Select2 by Igor Vaynberg
        – Toolbar.js by Paul Kinzett

  7. simon88 Mar 4, 12:29 am

    Will there also be a Flat UI Paid with more elements?

    Or even a full HTML / CSS Version of Square UI free for customers who have purchased Square UI?

    That would be great!

    Thank you very much!

    • Adrian Mar 4, 12:52 am

      Flat UI Paid – this pack come with more elements, HTML/CSS too.

      Square UI Paid – nope, sorry.

      • simon88 Mar 4, 1:20 am

        Thank you Adrian for your reply!

        That sounds great! :-)

        I am already excited about the Paid HTML / CSS Versions of Square UI Paid and Flat UI. Great Work!

  8. Ina Mar 4, 2:13 am

    I’m looking forward to this kit. It’s been a couple of days though, and I’ve looked around the internet and it sold out? :) :) Good stuff I guess. Can’t wait to work with it.

  9. James Wong Mar 4, 4:51 am

    Very nice! thanks for sharing :) looking forward to use it as the foundation of our company’s internal documentations.

  10. chaitanya Mar 4, 5:15 am

    Awesome and very useful kit, Thanks Adrian :)

  11. Robinrishi Mar 4, 7:33 am

    Its just awesome, looking forward to BUY the full version. :)

  12. Marc Gonzales Mar 4, 10:16 am

    Thanks guys, it really helps :-)

  13. Nelson Mar 4, 11:12 am

    Thanks for the kit. really useful

  14. Benjine Mar 4, 11:24 am

    Thanks a mil, it is lovely.

  15. Yurij Mar 4, 11:42 am

    Great tool!) HTML framework is amazing!) Thank you Designmodo!

  16. Barış Mar 4, 12:06 pm

    Html kit was exactly what i was looking for!
    Using sass/less is a perfect choice! Unfortunately bootstrap is no good for me..
    Any chance that there will be a zurb foundation implementation provided soon?

    • iurevych Mar 4, 1:47 pm

      Every custom component is a Module (check sass/modules folder) so you can just grab which one you like and move to your stylesheets folder.

      I see no difference between Bootstrap(TB) and ZF when we talk about additional components that don’t exist in TB.

      We will think about supporting Zurb, but not in the near future since it requires lots of efforts and it is less popular than TB.

      If you have any troubles with converting it to Zurb compatible you can ask me any time @iurevych

  17. Marco Mar 4, 12:30 pm

    Hello, awesome resource!
    Please check hex values of Sunflower and Carrot that are not correct on the image.


    • Heiko Apr 22, 3:39 pm

      Has anyone found out the correct color codes yet? Because when I try the color picker (on osx), I get different values for all of them – and when I explicitely enter the hex values, I get nicer results. So: #values, please – I want to use that beautiful color scheme!

  18. capitalH Mar 4, 1:07 pm

    Wow, this is amazing, perfect UI kit, detailed design, and for free, I wonder how your premium stuff look like, cheers guys, ur the best.

  19. GDJ Mar 4, 2:05 pm

    Color theme is amazing.. marvelous work thanks for sharing.

  20. Angelo Mar 4, 3:01 pm

    Thanks a lot for the download and your great work!!!

  21. Michel Stomp Mar 4, 3:16 pm

    Absolutely fantastic and very impressive work!

  22. Srinivas Reddy Mar 4, 6:17 pm

    Thanks a ton for such a nice sharing and source!!!

  23. Tyson Stevens Mar 4, 6:40 pm

    Uhhh-greed! Thank you for sharing this. Awesome!

  24. Nick Mar 4, 6:42 pm

    Thank you very much! :) Awesome work.

  25. Víctor Hugo Velarde espindola Mar 4, 7:29 pm

    excellent tool, thank you very much!!!!!!

  26. Pim Mar 4, 8:21 pm

    Pure awesomeness~ thank you so much for sharing!

  27. Vince @ Intuit Mar 4, 9:30 pm

    Dig it! This looks really good and love how you also include the HTML files. Keep em coming!

  28. Rodnei Mar 4, 11:31 pm

    Guys, thanks for share.

  29. deeroksdesigns Mar 4, 11:38 pm

    thanks for sharing…great work.

  30. Robert Mar 4, 11:52 pm

    Beautiful I like them.
    I already “stole” the colors of the color swatches in the screenshot for a project I just started. :P

  31. monstercritic Mar 5, 12:21 am

    Thank you guys, for your comments! Appreciate this so much!

  32. Stephanie Hider Mar 5, 1:01 am

    Thanks, very cool =D

  33. Dom Mar 5, 1:42 am

    Nice. Would love to see the same thing for the bricks! Thanks for sharing.

  34. Mark Jenkins Mar 5, 2:18 am

    Awesome looking kit guys, great work on this. Look forward to seeing its release, thanks for the effort.


  35. Tomas Mar 5, 2:54 am

    Wow! Very nice job! Bravo!

  36. Steve Dekorte Mar 5, 5:40 am

    Love the design. Will a DatePicker be included in the pro version?

  37. Leland Mar 5, 6:23 am

    Love this! Any chance you guys could add a mini calendar module?

  38. Thibault MARTIN Mar 5, 11:24 am

    Waow awesome job ! Thanks a lot ;) I love flat design.

  39. stanley Mar 5, 12:00 pm

    What are you terms of usage. Can i include you design in a premium CMS i’m selling? Thanks

  40. Joram Mar 5, 12:30 pm

    Oh nice! I love the elements of the HTML version :)

  41. Noel Mar 5, 4:27 pm


    I love the vector icons :)

  42. Mariusz Malachowski Mar 5, 10:15 pm

    Great kit. Can’t wait for this kit.

  43. Chiming Mar 6, 5:08 am

    so,this web is always based on Flat UI?CLEAN AND AWESOME

  44. Jayvan J Santos Mar 6, 6:07 am

    I don’t know how many times I’m going to thank you. I’ve thanked you in all your social networks and sent you an email at your info@ mail. Haven’t heard from you guys, hopefully I hear from you soon.

  45. D'lo DeProjuicer Mar 6, 12:31 pm

    Wow this is awsome, as a young front-end dude this is the shiznit!!! I have just gotten ma claws in the depths of bootstrap and was begging to wonder what else… and Boom! I saw this by chance and am glad I did.

    In S.A (South Africa) bootstrap fanbase is just starting to build, and am on top of it…. and now this! they will have hardtime catching up with me – True storry!

    Thanks alot!

  46. Lee Kowalkowski Mar 6, 1:24 pm

    I really struggled to use the demo with a keyboard both with tabbing in general and with selecting check boxes and radio buttons.

  47. simon q Mar 6, 6:13 pm

    agreed, waiting for master.zip. Will buy the pro/paid version too. Any idea when it will be available for purchase. I’d love to start my next site using it.

  48. J.Y Han Mar 6, 7:12 pm

    great design….it makes me cry….

  49. Vinicius Dallacqua Mar 6, 7:33 pm

    I followed the dribbble shots and I agree that we can find tons of good flat UIs to be inspired. And the color pallet is seems to be a trend of this year at what we can see on the examples above and here: http://www.pantone.com/pages/index.aspx?pg=21055

    I have this thought that ideas are like little live beings, they migrate from person to person, therefore they do not belong to a single mind.

    I hope this issue can be solved and guys at Layervault can see that they are overreacting.

  50. Pasha A. Mar 7, 1:18 am

    I love your work guys!

    Its hard to be different in our “trendy” century. Why does critics doesn’t screams that 30% of crafted web layouts looks like Metro-style©? Why all cars becomes looks in one brisky style? Why all mobile phones has a square form? 2 principal reasons: usability and trend.

    Its time of unifications now. So if somebody uses one tone of red color it doesnt mean i can’t use it. Or i really can’t? Why not.

    And about icons. For example can u explain icon of gift? It’ll looks like a box with ribbon and knot. It’s simply to draw it. But why there are hundreds of its variations? How many defferences LV will find between its? LV needs to think about this and stop to trash my part Internet.

    Thank you.

  51. srikanth Mar 7, 6:26 pm

    when i open flat-free ui psd file in photoshop it says “some text layers contain fonts that are missing. These layers will need to have he missing fonts replaced before they can be used for vector based output”.
    secondly, just wanted to know how to use it exactly. even after listening to how to use. its still unclear for me.kindly help me out.

    • Dan Archibald Mar 7, 6:49 pm

      Srikanth – check out the last paragraph from the original entry above. It will give you the link to use the Lato font. Install that first and then re-open the PSD..

      “Flat UI Free is made using the Lato typeface, which can be downloaded for free here.”

      • srikanth Mar 8, 11:36 am

        forgot to specify that mate. i even installed the font. but still no luck.

  52. andrej.kaurin Mar 7, 8:58 pm

    Did you made icons or you used some library? Icons are awesome.

  53. AP Mar 7, 10:54 pm

    AGREE – You got so good publicity from VentureBeat and now you are letting that exposure go in vain. Just host the file elsewhere and satisfy what you whole-heartedly intended to inspire the internet. Thanks!

  54. hermann Mar 8, 11:04 am

    Thanks a lot for this pack. your designers did a great job, i think the psd is quite enough for now.

  55. Felipe França Mar 8, 10:12 pm

    There is any tutorial|doc to use this ui?

  56. Mariusz Malachowski Mar 8, 11:23 pm

    Great stuff for me. Thanks a lot.

  57. BandonRandon Mar 9, 11:42 am

    This is a great UI. But I can’t seem to get “ to show up in the dropkick select menu. It looks like you may be using the Bootstrap component. Any tips would be awesome!

  58. Luiz Fonseca Mar 9, 4:20 pm

    Awesome! Great, great work!

    You can’t imagine how I’m happy because you made it open source: https://github.com/designmodo/Flat-UI

    I’ll see many pull requests from me, implementing modals and stuff. (and why not, LESS support! ;)

    Awesomesauce! Thank you! :D

  59. virgilio Mar 10, 2:50 pm

    Plz, any tutorial how to use the HTML Kit? Thx

  60. Mongris Mar 12, 12:06 pm

    It’s awesome design. Thanks for sharing!

    I am using select2 with FlatUI, so I update a external css to decorate select2 with FlatUI looks. You can check the css file from https://gist.github.com/mongris/5141297

  61. peablog Mar 13, 5:53 pm

    Awesome design!
    But it takes me one hours to read this article and comments because of my poor english.

  62. James Mar 14, 11:32 am

    Nice UI Kit, however I am dealing with a problem with the select dropdowns. With nothing else on the page other than a single select input and all the css and js files from the demo page, when the dropdown menu is open, it causes most of the background to turn white. I’m not sure if this is from the flat-ui.css or from the dropkick code itself, but something is going on to make that control unusable for me.

    • James Mar 14, 12:08 pm

      Oh, I forgot to mention that this is in Chrome for OS X.

      I think I’ve traced the problem to the z-index: -100; for the .dk_options class in the flat-ui.css file. Setting this to a positive number fixed the issue with the background, but causes other problems including making it difficult to open the dropdown and the options list always being selectable even though its not visible. I’ll keep trying to find a solution, but so far it looks like a css issue.

  63. iurevych Mar 14, 12:27 pm

    Hey man, that’s a good catch. I think visibility: hidden instead of z-index: -100 might help. Don’t forget to set visibility: visible when showing select ;)

    Please check cause I don’t have such issue on my side.

    • James Mar 14, 8:48 pm

      Replacing the z-index:-100 with visibility:hidden and then adding visibility:visible to the .dk_open .dk_options class seems to do the trick. The issue I was experiencing seemed to only occur in Chrome and on pages where the dropdown’s option list would appear vertically below the rest of the page content. I created a ticket on github with the problem and the suggested solution. I notice that there’s one other use of a negative z-index in the flat-ui.css file for the .navbar .nav ul element. I haven’t encountered a problem with this yet, but I might run some tests to see if the same sort of issue occur.

  64. Prathap Mar 21, 7:50 am

    I wonder why we need 2 inputs and 2 labels for a single radio UI?
    And if i use the flat ui, my developers will definitely ask me why you need these many extra elements for single on/off functionality.

    Where as i have seen some scripts that create a div as ui by hiding the radio behind this.

    • iurevych Mar 21, 12:38 pm

      I wanted to create a flexible component where you can write anything you like and it will work: “Enabled/Off” or “On/Turned off”

  65. Waheed Akhtar Apr 4, 12:13 pm

    Nice work guys. One quick question. I am designing a form and thinking to use these elements but I can’t find Select box (e.g. ) of the Form.
    Wondering why its not in here?

  66. Adam Allard Apr 7, 4:55 pm

    Does anyone know how to add html page links to the teal/green drop down list? So when you select an option on the drop down you are automatically transferred to a new .Html page? thanks, Adam

  67. Mr. Horse Apr 7, 11:04 pm

    Guys! make css for htlm5 boilerplate and not just for bootstrap.
    ur flat ui is awesome but i dont really wanna put bootstrap in my project. please make css independent

  68. abitdodgy Apr 8, 12:31 am

    How do you customise the color schemes? The project does not include any instructions for doing this, other than the palettes themselves. But it does not say how to apply them.

  69. Brad Apr 18, 12:24 am

    Really like this UI kit. Just got done make a responsive WordPress theme with it. You can check it out at bragthemes.com if interested.

  70. Martin Apr 23, 5:49 pm

    Would anyone with the dropdown button for Flat UI …? I need to create a login box with form elements. Something similar to the select element, but with the input elements. For possible answers thank you in advance.

  71. Jason Resnick Apr 30, 9:55 pm

    Am I able to just pull the Flat UI CSS file (and the fonts) and drop it into my site that’s already using Bootstrap and it’ll work just fine? Or is it totally tied to it’s own Bootstrap? (for whatever reason)

    • Adrian Apr 30, 10:04 pm

      You can use it free for your website.

      • Jason Resnick Apr 30, 10:09 pm

        Oh yeah? So it’s just a matter of just doing that? Pulling the CSS and the fonts and it’ll work?

        • Adrian Apr 30, 10:12 pm

          So, I think, in case you need to customize template for your website.

          … and yes, back-link is welcome!

          • Jason Resnick Apr 30, 10:16 pm

            Well I’m just using Bootstrap in a project and I would like to test this out without too much effort to see how it looks. Obviously if it works and looks nice, I’ll make the necessary tweaks, but I just wanted to test first.

            Is it just overwriting the elements from Bootstrap or has it’s own classes that need to be defined in the markup?

          • Jason Resnick Apr 30, 11:27 pm

            Works great actually — pretty slick. My final question is where can I find the color schemes? The folder that it says on the demo isn’t in the zip file.

            I’d like to be able to swap out some of the color.

            I’d be more than happy to plug this as well once I get it up and live.

  72. Vanveo May 8, 12:02 pm

    Thank you, it is very useful for me :)

  73. Dennis May 23, 8:48 pm

    Love the kit! However when there a re multiple dropdowns on one page only the first dropdown shows and the others are removed. Please help I’ve had no luck figuring this out. Thank you so much in advance!

  74. Danny Jun 7, 6:24 pm

    What is the license on the free stuff?

    Could I make a wordpress or joomla template and make it available for people without you guys getting angry? :)

    • Lihas Jan 27, 5:54 am

      They are perfectly fine with this. I was actually wondering if you actually made the theme because I would love to see the source code for it. (I’m trying to work on my own).

  75. Jaybe Jun 26, 2:38 am

    Wow I really love this. can’t wait to see the WordPress version. =) thanks for this awesome Flat UI Kit

  76. Dave Jul 9, 8:55 am

    OK I have read through every comment and a few people have asked the same but no one received a response. Does anyone know how to simply change the color paletts? I see the .aco but thats for PS.

    Please help folks. Cheers!

  77. Tanmoy Jul 19, 2:17 am

    Hey, the Newspaper icon is missing in the PSD, there a group named Newspaper in the PSD but no contents in it. You have included that icon in the preview file too. Thanks for the great freebie.

    FYI- I’m using PS CS6

  78. Luis Torres Jul 25, 3:18 pm

    I just downloaded the free version and I love it. I will definitely get the pro version. I just had a question. Is the free version video js player compatible with the media.youtube.js plugin?

  79. Jackie Jul 31, 10:34 am


    Can I use this UI for personal as well as commercial projects i.e., for developing websites for clients?.

  80. Jakub Vejmola Aug 2, 3:38 pm

    Hey guys, great work on this!

    A quick question. I would like to create a motion design template (which will be then sold as an After Effects project on VideoHive.net) based on your theme. Basically I would like to use the color schemes, font, the iMac and iPhone mockups and some of the icons. Is that OK with you if I give you a credit in the template description and help file? The whole UI pack won’t be accessible to the end users – just some of the contents (images) like the icons or mockups… Can I do that or not?

    • Adrian Aug 2, 4:44 pm

      Yes, you can do this.

      • Greenolives Sep 4, 6:13 pm

        Hi, thanks for great art in designing. I’m a developer, i’d like to use your flat ui free vesrion to my project at codecanyon. I can give credit link of you. am i do this? please reply.

  81. sbosell Sep 1, 8:17 pm

    Thanks, what a nice and organized theme. I purchased the pro as well and have one suggestion, it would be nice if you included some alternate config.less color themes for those of us that aren’t as design oriented. Thanks.

    • monstercritic Sep 1, 10:39 pm

      Thanks for your suggestion. We are now in the process of something new, which will facilitate you to change all colors just by click.

      • sbosell Sep 1, 10:54 pm

        Awesome. I hope you include some presets because some of us developers are a bit ignorant of good color combos. Looking forward to it.

  82. shivprakash Oct 4, 12:57 pm

    1)can someone please help me as i am new here,i want to edit some elements of flat ui 2.1 for my project ,how do i do it? what are the methods and process to do it as i dont want to create any conflict with the files.

    2)there is problem with .nav-inverse .navbar-brand in the navigation bar can some one solve it.thank you.

  83. Curtis Oct 17, 11:04 am

    Great stuff guys. Just Awesome!!

  84. Nidhin Oct 23, 12:30 pm

    Thanks for the UI elements. Great work!

  85. Neon Nov 24, 6:26 pm


    Great and awesome Flat UI kit, thanks.

    But can I use all color swatches (20 no.s, http://flatuicolors.com/ ) from ‘Flat UI Free’ for my commercial project? I’m about to design an app for my client. So do I need to buy any license or must give attribute to use them for commercial projects? Can you please answer soon?

    Best regards,
    Anil Kumar

  86. Daniel Dec 1, 9:48 pm

    Hey everybody

    I just wanna add a few words about the “slider” component. Initializing(invoking) the slider component is done in the application.js file, so you do NOT need to initialize it yourself. If you do, it’s a duplication and results in unexpected output.

    It’s something that took me an hour and I promised to notify you guys too if I found a solution. On the contrary, you NEED to initialize the “dropdown” component yourself. If don’t, you don’t see anything.

    This No. one UI kit deserves my time to comment. I hope designmodo guys update the documentation.

    Thanks everybody.

  87. Sami Dec 5, 2:56 pm


    I am trying to use jquery validate with the modal dialog box.

    But its not working, it doesn’t call validate function and directly goes to submit the form ( maybe because of form component not loading in DOM before the validate event is fired). The question regarding this is here (http://stackoverflow.com/questions/20380367/jquery-validation-not-working-in-bootstrap-flatui-modal-dialog-box)

    When I do with jquery way, like clicking the button and then using $(‘dialog’).dialog() then it is working normally. (an example can be found here http://jsfiddle.net/bipen/ZrfhU/ )

    Thank you :)

  88. Widestate Dec 13, 10:36 am

    Thanks for providing the kit with a free version. Hope it will help exploring more on metro ui and bootstrap.

  89. Prem Taiphob Dec 15, 10:29 am

    I like this UI so much and thank you for your sharing.

  90. Andre Jan 6, 9:13 am

    First, thank you for the awesome kit and thank you a second time for providing a free version for us to experiment and mess around with first.

    I am somewhat computer savvy and I can build a page but Im no developer. With that said, I am building a site in WordPress as my technical skills level is only beginner PHP. Would you point me in the right direction as to how to apply this interface kit with WordPress? Is it best to use with some specific theme? Maybe something Boostrap’py or something basic?

    I bought a theme on Themeforest thinking you guys designed it–it’s called “MyDesign”–as it seems to advertise a lot of your elements in it’s description and banner image. Now Im starting to think you guys have nothing to do with this theme at all because it seems very different in many ways and incomplete in others. Could you please confirm?

  91. Rohit Jan 24, 2:13 pm

    This is the coolest free framework i have ever seen.Thanks For the Framework.
    Can i Use this For making websites for my clients………or i need to buy licesnce.????

    Thank you and Great Work

    • Adrian Jan 24, 2:53 pm

      Yes you can use it for your clients. But, if you love more extensive framework, you have to purchase Pro version.

  92. Olivier Mar 17, 12:49 am

    Beautiful! Has any one integrated this with Drupal 7 themes? Would save me lots of time. Thanks!

  93. Cas Mar 20, 12:46 pm

    Cool theme, guys! Any future plans of porting this to Zurb Foundation?

  94. John Mar 29, 4:21 pm

    Can you include compatibility somewhere in the docs? Does this work with IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome?

  95. Valery Jul 15, 6:51 pm

    Hey, awesome theme!
    I was wondering if the .sketch UI kit exists?

Leave a Reply

* Minimum length: 20 characters