Free Snippets for Twitter Bootstrap, Examples of Websites

  •  5 Comments

Fleetio

Fleetio has a modern and stylish appearance that is bolstered by beautiful background gradients and lovely primary coloring. Although in general, the team utilizes a two-column organization, yet there are some sections such as ‘Testimonials’ or footer that arrange the content into four columns. Nevertheless, everything looks just fine.

Free HTML snippets for Bootstrap

Blog posts with picture

Created by Msurguy this tiny snippet mimics classic way of arranging posts in blogs. Each item is defined by its own thumbnail, such information as date, author, category, number of comments, tags, excerpt and ‘Read More’ button. Although it has an insipid appearance, yet you can easily customize it via main CSS files.

Search form with toggles

Crafted by the same developer as ‘Blog posts with pictures’ this small streamlined component will seamlessly integrate into any design and improve its functionality. It also offers a starting point for prototyping more refined searches. It looks nifty and elegant even despite the old-timey gradients that are used as backdrops.

Admin Nav Bar – white

This is another compact and sleek component in our collection that is created to sit at the top of the page and provide users with a handy way to move around the project. It extends from one side to the other, giving inner components lots of space. It consists of logotype, menu and drop-down with some extra features.

One month calendar

Better One Month Calendar by Msurguy has an elegant polished appearance and solid base. It is compact and universal. There are also controls to move through months one at a time. Thanks to alternation of white and grey, structure is clear and quickly perceived.

Music / Video controls UI

This is a super minimalist element, yet it is quite powerful in what it can do. While you can leverage it as a base for developing standard audio player that enables users to enjoy tracks from the list, it can be also broken into items and used as a part of something bigger and more complex. The code snippet is applicable for Bootstrap 2.3.2 and higher.

Admin sidebar menu

The component takes up a small amount of space thereby becoming an ideal instrument for interfaces that are oriented at mobile devices or tablets. It features titles with accompanying icons and status of each function as well as utilizes a highlighting color to distinguish selected item from the others.

Full width login form

As you may have guessed from the nameplate, the widget is aimed to occupy every pixel on the screen thereby seizing the whole attention and forcing users to concentrate namely on one task, that is fill out the form. Although it includes just two inputs and huge ‘Sign In’ CTA, however, you can easily add other fields through HTML. The author has also taken care of standard error message that indicates problems with validation.

Text Editor toolbar

The component has a classic shape and formal look. Being quite neutral in terms of design, it is pretty universal and generic. Although the artist included just the popular buttons such as ‘insert image’ or ‘style text’, nevertheless, much like in the previous example you can expand it. Each item has two states: the default one that is based on a smooth gradient and the selected one that is spiced up with an embossed effect.

Row of buttons

The component has a chic and sleek appearance. It can be a part of more complex toolbar. It includes buttons for such functions as write, edit, delete and list that are suitable for various interfaces. Solid accompanying icons in tandem with embossed effect makes each CTA look intuitive and legible.

Pricing table

The developer shares with users a code snippet of a simple and carefully organized pricing grid. The latter demonstrates plans in a straightforward manner. Although the component is deprived of fancy features and artistic touches, it is just a collection of intersected rows and columns; yet it performs its primary role pretty well. All the key features are neatly dished up and CTAs look highly clickable.

Conclusion

One of the greatest advantages of Bootstrap foundation lies in its ability of being easily expanded in terms of functionality. An open-source code untied developers’ hands resulting in a massive collaborative work. Snippets, HTML/CSS UIs, templates and tiny enhancements that are freely available on the wild boost up prototyping and upgrade the projects.

Page 1 Page 2

Newsletter

5 Comments
  1. Philip Locke Sep 26, 9:33 pm

    Thanks for including http://www.Joostrap.com in your awesome collection.

    Appreciated and a lot of them I didn’t know about, but do now!

    Cheers ;-)

    Reply
    +1
  2. Jake Sep 27, 6:40 pm

    Bootsnipp is a great resource for Bootstrap snippets and I can’t wait to see how they progress in the coming months. They just added submissions and voting is in the pipeline!

    Divshot also leverages Twitter Bootstrap in an awesome way — it allows you to drag and drop Bootstrap components and then export to clean HTML and CSS. Saves so much time when you need to quickly prototype an app.

    Reply
    +4
  3. sam wightwick Dec 20, 6:15 pm

    I built my new portfolio on Twitter bootstrap, the 320press port of it to wordpress.

    http://www.samwightwick.co.uk

    Reply
    -4
  4. Mo Arshath Aug 22, 1:39 pm

    Resource Guru site looks clean and easy to use. (y)

    Reply
    +2
  5. Rose Aug 22, 1:54 pm

    Useful site for both designers and Developers

    Reply
    +2

Leave a Reply

*
* Minimum length: 20 characters