Huge Update for Bootstrap 4 Axure Widget Library

gumroad-banner---2017-update.jpg

Live Preview      Download

The guys over at Bootstrap made some rather large changes in their last few alpha updates of Bootstrap 4.  So I went ahead and implemented a lot of those changes in my Axure library.

Changes included:

  • New typeface Segoe UI takes the place of Arial
  • New component styling for many of the widgets; new accordions, tables and cards.
  • Added widget styles for the more common elements
  • Simplified the builds of some of the widgets, taking advantage of Axure 8’s increased functionality (rounded corners, selective border treatment, etc)
  • Simplified form inputs.  Placeholders are now Axure native, rather than separate elements.
  • Added in more disabled states.  All of which can be toggled on and off directly in Axure.  (Right click element, select “disabled”.)

The library feels really strong at this point.  Probably will be very close to the final Bootstrap 4 release, if I had to guess.

Bootstrap 4 Axure Widget Library

Facebook-Ad---Bootstrap-4-v2

Live Preview   Download

The most comprehensive Bootstrap widget library ever assembled.  231 meticulously crafted widgets and modules styled directly from Bootstrap’s CSS, each element detailed down to the proper hex codes, line heights, padding and shadowing.

Dismiss alerts, bring up modals, watch placeholders disappear, flip through tabs, the Bootstrap 4 library is impressively functional.

This project has been almost 2 months in the making, I’ve been working on it since Bootstrap announced the alpha release. And I’ve taken the time to make every element as close to the real thing as possible.  You won’t find a more well-built Bootstrap library.

Includes

  • h1 – h6 headings
  • Leads, paragraph text, fine print
  • Display headings
  • Blockquotes
  • Standard and outlined buttons
  • Toggles
  • Button groups
  • Button and split button dropdowns
  • Alerts
  • Cards
  • Carousels
  • Jumbotron
  • Labels
  • Pills
  • Pagination
  • Breadcrumbs
  • Working forms and inputs
  • Input groups
  • Dropdowns
  • Tabs and Navigation
  • Navbars
  • Progress bars
  • List groups
  • Modals
  • Tooltips
  • Popovers
  • Accordions
  • Callouts
  • Tables

Screenshots

Bootstrap 4 Widgets (Part 1 of 2)Bootstrap-All-Widgets-(Part-2)

Yeah, it’s massive.

You can download it here.

Axure Bootstrap UI Widget Library

DOWNLOAD

This was the first professional library I ever made.  It’s 109 widgets based off of the Bootstrap 3.2 theme.  I believe Bootstrap 4 will be launching soon, and I’ll likely have to update the library then or make a new one.

This is currently featured on Axure.com’s widget library page.  And has received almost 10,000 downloads in the past year.  It’s completely free, you can pick it up here.

I never added proper h1 h2 and paragraph text to the library, but I feel like that can easily be done yourself.  The one thing I need to do though is add proper input fields.  For some reason Bootstrap doesn’t feature those on the theme page.  So I disregarded them.

axure-bootstrap-ui-widget-library

I initially created this library as a personal project.  I wasn’t even planning on releasing it.  I wanted to test the fidelity limits of Axure.  And what I found was that there was nothing I couldn’t accomplish, design wise.  This project has led to a much larger project which is my axure themes site.

I love designing with Axure, it’s so fast.  I can make a new website, and iterate it several times before I could even finish designing one in Photoshop.  Of course Photoshop can do things that Axure can’t, but if I need some graphics then I’ll just make them in Photoshop and import them back into Axure.

This blog, and my Axure Themes site, are all about pushing the design limitations of Axure, and opening a new world to Axure users.  It’s currently not seen as a design tool, but I intend to change that.