More than 30 Resources to Customize your Bootstrap

Bootstrap Customization: Themes, UI Patterns and Tools

  • Share on Google
  • Share on Pinterest

Everyone loves Bootstrap, the front-end framework created by Twitter, because it’s easy to set up, it magically creates a responsive version, great for prototyping etc... Of course, its biggest defect is that it’s too visible.

We can think of thousands of projects where the framework is clearly recognizable. This shouldn’t happen so often, as there are a huge number of resources for customizing Bootstrap, and we have to go out and find them. By making us of these resources we can easily modify UI patterns, typography, icons, color schemes, forms, alerts, etc...

What we’re bringing you today is a complete selection of themes, plugins, UI patterns and tools for customizing the structure and visual design of Bootstrap layouts.

Twitter Bootstrap Themes

  • WrapBootstrap

    WrapBootstrap is a marketplace for premium Bootstrap themes and templates. Impress your clients and visitors while using a single, rock-solid foundation.

    wrapbootstrap.com

  • Designmodo Flat UI Pro

    Flat UI Pro is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers. HTML layout based on Bootstrap framework. Bootstrap is a trusted, reliable and proven tool for developers.

    designmodo.com/flat

  • BootsWatch

    Free themes for Twitter Bootstrap. Add color to your Bootstrap site without touching a color picker. Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Made by Thomas Park.

    bootswatch.com

  • LoveBootstrap Showcase

    A Showcase Of The World's Best Twitter Bootstrap Sites. To suggest a Bootstrap site for inclusion in our showcase, just send a tweet to @LoveBootstrap with a link to the homepage of the site. If it's a great implementation of Bootstrap, they will add it to their showcase.

    lovebootstrap.com

  • Bootstrap ThemeRoller

    Bootstrap ThemeRoller allows you to customize the look and feel of Bootstrap from Twitter. It has a very user friendly interface that helps the users to select any color, size, font etc for their application.

    Bootstrap ThemeRoller lets you see the changes side by side as you customize the theme enabling the users to actually see the final theme before downloading.

    www.bootstrapthemeroller.com


    Bootstrap UI Patterns

  • Flatstrap

    Sometimes a new project doesn't need rounded corners or gradients. So we decided to get rid of them. Flatstrap, on the other hand, is built by Little Spark

    Flatstrap

  • Bootstrap Designer

    Bootstrap Designer is an online design tool, producing awesome HTML5 templates based on Bootstrap framework. You can use the templates for your clients' projects or sell on your own website.

    Use Bootstrap Designer to create various design styles: minimalist style, black & white, grunge, typographic-driven, monochromatic look, clean & creative, etc.

    bootstrapdesigner.com

  • Jetstrap

    The Twitter Bootstrap Builder. Not just a mock-up tool, Jetstrap is the premier interface-building tool for Bootstrap.

    Jetstrap is a 100% web-based interface building tool for Twitter Bootstrap. No software to download, just log in and build. Your work is accessible from anywhere.

    Built for developers, designers, and idea-people alike, Jetstrap helps you get awesome websites up and running fast, with less work and digging through docs.

    jetstrap.com

  • Bootstrap Hero: The Big Badass List

    The Big Badass. List of 319 useful Twitter Bootsrap resources. Components, Framework Integrations, Interface Builders, Mockup Tools, Tools and Services, How Tos, Javascript Addons

    bootstraphero.com


    Bootstrap Tools

  • Bootply

    Bootply makes it easier to fiddle with Bootstrap. Edit Bootstrap-friendly CSS, HTML and JavaScript. Rapidly design & build interfaces using the drag-and-drop visual editor for Bootstrap. Leverage our code repository. Grab Bootstrap-ready snippets, examples and templates.

    bootply.com

  • Bootsnipp

    Design elements and code snippets for Bootstrap HTML/CSS/JS framework

    Bootsnipp is an element gallery for web designers and web developers, anybody who is using Bootstrap will find this website essential in their craft. Currently Bootsnipp is using Bootstrap v 2.3.1

    bootsnipp.com

  • Twitter Bootstrap Button Generator

    Twitter Bootstrap Button Generator is the easiest way how to set up your buttons based on Twitter Bootstrap in a seconds.

    plugolabs.com/twitter-bootstrap-button-generator/

  • Divshot

    Fast, visual front-end development. As simple as a mockup tool. As powerful as a text editor. Prototyping with Bootstrap and beyond

    Divshot lets you build visually with most popular front-end frameworks including Bootstrap, Foundation, and Ratchet.

    www.divshot.com


    Bootstrap Grid Templates

  • Font Awesome

    The iconic font designed for Bootstrap. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself! Font Awesome even plays nicely with Bootstrap!

    Font Awesome

  • Bootstrap 2.0 Photoshop Template PSD

    A free PSD file includes which includes buttons, navigation elements, form elements, tables, typography. You will can create your own Bootstrap-based designs in Photoshop. Its especially great for hybrid designer/developers.

    Twitter Bootstrap 2.0 Photoshop Template PSD

  • Grid displayer for Twitter Bootstrap

    In-browser web design made easier with this bookmarklet which displays the grid of your favourite front-end framework. This bookmarklet was created by Antoine Lefeuvre.

    alefeuvre.github.io/foundation-grid-displayer/


    Articles

  • Tips for implementing responsive designs using Bootstrap

    by Matthew Adams

    We ran a retrospective of our first few Bootstrap-based HTML5/Javascript projects a few weeks back, and distilled some of the output into these top tips.

    Read the article

Awwwards

By Awwwards Team

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world. We aim to create a meeting point where web professionals from across the world can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.

awwwards.com

CLOSE