DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Bootstrap: Design the Ideal Experience for Your Website

by Kathryn Aragon

Usability is a big part of conversion rate optimization, so it pays to get it right.

You’ve got to design pages that are easy to use and keep people engaged. Otherwise, how will you get them to browse your site and respond to offers?

The gold standard is this:

For that, Bootstrap may be a good resource.

Listed as one of the top open-source projects on the Web, Bootstrap is a shortcut for creating the front end of a website. It’s kind of a middle ground—one step above a premium theme, but not as expensive as hiring a developer to create a customized design.

What is Bootstrap?

Bootstrap is an open-source JavaScript framework developed by the team at Twitter.  It includes base CSS and HTML for typography, icons, forms, buttons, tables, layout grids, and navigation, along with custom-built JavaScript extensions.

Also referred to as a front-end-framework, Bootstrap is a free collection of tools for creating a websites and web applications.

Here are a few reasons that programmers enjoy using Bootstrap:

  1. Easy to get started
  2. Great grid system
  3. Base styling for most HTML elements
  4. Extensive list of components
  5. Bundled JavaScript plugins

This infographic, courtesy of Template, explains why Bootstrap is such a good idea for creating your ideal website.

Bootstrap Powerful Front end Mobile First Framework

Like what you see?

Here are some resources that can help you get started with Bootstrap.

TutorialRepublic: Examples of what you can do

W3Schools: Bootstrap tutorial

BootPly: Bootstrap editor and builder

BootswatchFree themes for bootstrap

StackOverflow: More information

What’s your experience with Bootstrap? Have you got any resources we should know about?

Read other Crazy Egg article by Kathryn Aragon.

14 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Kathryn Aragon

Kathryn Aragon is the former editor of The Daily Egg. She's a content strategist, consultant, and author of The Business Blog Handbook. Learn more at KathrynAragon.com. Follow her on Twitter.

14 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. David says:
    April 28, 2015 at 12:14 pm

    Bootstrap is indeed quite easy to grasp. I had no previous experience building a website and I made my first working prototype with it in a couple of hours. I followed the instructions here: https:// realpython.com/blog/python/getting-started-with-bootstrap-3/ and here: http:// getbootstrap.com/getting-started/

    Nice post, this one gets a “Share” from me! 😉

    • Kathryn Aragon says:
      April 28, 2015 at 12:20 pm

      Thanks, David! And thanks for the instructions.

  2. Dave says:
    April 13, 2015 at 8:24 am

    Awesome Post

    How about material design ?

    Thanks

    • Kathryn Aragon says:
      April 13, 2015 at 10:21 am

      You’re welcome, Dave. Designing your content is another topic altogether. 😉

  3. Sam says:
    April 13, 2015 at 4:52 am

    It is a great article.It is incredible and informative knowledge.Thanks Kathryn Aragon.

    • Kathryn Aragon says:
      April 13, 2015 at 10:18 am

      You bet, Sam. I’m glad you found it useful.

  4. Erwin says:
    April 8, 2015 at 1:46 pm

    Looks a pretty dated inforgraphics to me. Correct me if I’m wrong but the grid (naming, layout width etc. is with Bootstrap 3 a bit different…)

    • Kathryn Aragon says:
      April 8, 2015 at 2:55 pm

      That’s possible. Here’s a tutorial for Boostrap 3, but it doesn’t specify how the grid is different.

      • Oksid Disko says:
        April 21, 2015 at 10:30 am

        Bootstrap3 was released in 2013 and the inforgraphics is from 2011 🙂

        If im not wrong the gutter widht in Bootstrap3 is always 30px, in B2 it was 30px on large 20px on smaler screens, which means the colum widts are different as well.

        • Kathryn Aragon says:
          April 21, 2015 at 10:31 am

          Thanks for the clarification, Oksid.

  5. chawki trabelsi says:
    April 5, 2015 at 3:33 pm

    Thank you Kathryn for the ressources. I especially like the scrolling parallax bootstrap websites.

    • Kathryn Aragon says:
      April 5, 2015 at 8:49 pm

      You bet, Chawki!

  6. Bjuncewicz says:
    April 5, 2015 at 3:41 am

    Great stuff,

    Very interesting insights 🙂

    • Kathryn Aragon says:
      April 5, 2015 at 12:19 pm

      Thanks! I’m glad you found it interesting.

Show Me My Heatmap

Currently looking at @CrazyEgg reports and understanding them. @lorenagomez would be so proud! LOL!

Nicholas Love

@NicholasJLove