8 useful bootstrap 3 examples and tutorials

Bootstrap 3 has been released and is generating quite  bit of buzz among the web design community. A central feature of Twitter Bootstrap 3 is the use of modern flat UI design that has become so popular.  If you want to see what kind fo Bootstrap 3 designs have been created, here are some early examples of what can be done with this new framework. Be ware that most of these examples are very early testing of Bootstrap 3 so they might not be as complete as Bootstrap 2. If you are already using Bootstrap 2, then switching over to Bootstrap 3 should not be an issue.

 

#1: Bootable: A 3 column template using Botstrap 3

bootstrap 3 examples

Created by Bootply to demonstrate their Bootstrap editor, it is a good example of what can be done for Bootstrap 3. If you want to play around with this, try Bootply editor.

 

#2: Bootstrap 3 landing page

bootstrap 3 examples 2

A very useful tutorial and hands on article on how to use Bootstrap 3 to create a simple landing page. Very practical for startups who want to use Bootstrap 3 for their marketing pages before the actual product launch.

 

#3: Bootstrap 3 layout example

bootstrap 3 examples 3

A simple and clean example of how a Bootstrap3 layout can look out.

 

#4: Free Bootstrap 3  PSD

bootstrap 3 examples 4

If you want a free PSD of Bootstrap 3 to play around with, you are in luck. Ghostlypixels has kindly offered such a free download for any designers who want to get their hands dirty.

 

#5: Bootstrap 3 marketing page

bootstrap 3 examples 5

Getbootstrap itself has released a few examples. Highlighted here is their template for a simple marketing or company page made with Bootstrap 3 framework.

 

#6: Bootstrap 3 example page template

bootstrap 3 examples 6

Bootstraptor has come with up with some nice examples of how Bootstrap 3 can look like. It even has a starter kit that gives you everything from layout to menu.

 

#7:  Example of a Bootstrap 3 carousel

bootstrap 3 examples 7

A UI designer has tried bootstrap 3 on his own website by implementing the carousel function. Take a look to see if this is something you like to use for your own website as well.

 

#8: Bootstrap 3 Glyphicons

bootstrap 3 examples 8

Here are some of the glyphicons for Bootstrap 3.  You can use how flat design has been used in all of them.


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


10 Comments

  1. Carlos says:

    I would like to see more Free Bootstrap 3 themes, like BlackTie.co

    Very nice list. Thanks for sharing.

  2. Peter Drinnan says:

    Item #6 is interesting. Most of the Bootstrap templates on Themeforest are so styled you end up tearing them down to the layout level. The 15 templates available from link #6 are basically just layouts. That’s all I need for now.

  3. Thomas says:

    Great list, can’t wait to try some of these out! Definitely going to be checking out the download from Ghostlypixels.

  4. yogesh says:

    thanks for glypicons and carousel..

  5. Thanks for sharing my carousel example!

  6. Bootstraptor says:

    Here you can find our new free service: Bootstrap 3.0. UPGRADER SERVICE
    Update to Bootstrap 3.0. your HTML code from Bootstrap 2.3 by @Bootstraptor