Bootstrap is an amazing framework that makes building a site from scratch even more enjoyable than it already is. (In fact, I used Bootstrap to build the current Learn to Code With Me site.)
To offer more information about Bootstrap I asked Caitlin McKenna, an Intro to Bootstrap instructor at the Girl Develop It Boulder chapter, a few questions.
Thinking about learning Bootstrap?
Here are 10 reasons why you should learn Bootstrap.
What is Bootstrap?
As explained by Caitlin,
“Bootstrap is one of the most popular front-end frameworks today, and is considered one of the most successful projects on GitHub, forked over 26,000 times! Bootstrap consists of CSS, HTML layouts, and JavaScript plugins that assist you in developing a responsive front-end design quickly and elegantly.”
Echoing Caitlin:
Bootstrap is like this awesome website/web application starter kit. To get it up and running, all you have to do is download the files and add them to your website or web app.
Even better, Bootstrap comes responsive. Meaning it works on all devices of all sizes. At the moment, Bootstrap is in its third version. (So it’s oftentimes referred to as Bootstrap 3.)
Why is Bootstrap Important?
As mentioned above, Bootstrap is so amazing because it has been created as mobile-first. As Caitlin points to,
“With the number of people browsing the internet on their phone or tablet increasing steadily, it’s important to optimize websites for both the desktop and mobile browsing experience.”
Bootstrap embodies the present and future of the web: the ability to work seamlessly on both large desktop monitors and small mobile screens.
Who Should Use Bootstrap?
Bootstrap is a framework both beginners and advanced web developers or designers can use. Caitlin elaborates,
“Bootstrap is also well-documented, so beginners don’t have to wade through too much tech talk, and it’s a breeze for seasoned developers to check out while they drop Bootstrap into their next project.”
While it may have a bit of a learning curve for total newbies, after getting started the built-in Bootstrap capabilities start to come naturally. Honestly, after using Bootstrap now for several projects, I can’t imagine building a site any other way.
However — also realize there are times when Bootstrap may not be the best option. Like if you want to create a really customized layout / site design. While all the built in features are awesome, there are certain limitations.
Bootstrap is best for prototyping, but has many other uses-cases, too.
Thinking about learning Bootstrap?
Here are 10 reasons why you should learn Bootstrap.
Bootstrap Features
Here are some of Bootstrap’s key features and components.
A Kick Ass Grid System
“Bootstrap uses a twelve-column grid system based on percentages, so it’s easy to create a fluid layout, where your design will re-arrange itself at major browser-width breakpoints,” says Caitlin.
Click here for more about the grid system and examples.
Built-in Classes
Caitlin explains, “Using the Bootstrap classes, you can decide how your design will flow as users view it on different devices.”
These built-in-classes can make a more timely action simple. For instance, say you want an image to appear as a circle. Instead of going into the CSS file and hand-designing this, simple add the “img-circle” class, as seen below.
<img src="..." alt="..." class="img-circle">Get more on CSS and Bootstrap 3 here.
Ready-to-use Components
More than a ready-to-go grid system and built-in-classes, the Bootstrap framework also comes with components such as:
- Glyphicons
- Buttons
- Navigation Bars
- Breadcrumbs
- Pagination
- Panels (as shown in the image below)
- And much more!
All of these components make getting up and running a breeze. (Again — Bootstrap is fabulous for quickly prototyping sites/applications.)
Continue here to learn about the ready-to-go Bootstrap 3 components.
Easy-to-implement JavaScript Plugins
According to Caitlin,
“On top of the built-in styles, Bootstrap comes with JavaScript plugins that take care of interactive elements for you. Want to include a carousel at the top of your page? Bootstrap’s got that. Want to pop out your login form in a modal window? Easy-peasy. Need to add an accordion to your FAQs page? Done.”
Furthermore Caitlin mentions that, “because these components are so simple to style, you barely need to look outside the Bootstrap JS for different-looking plugins!”
A Bootstrap 3 Modal Example (Like a popup)
Learn more about Bootstrap 3’s JavaScript plugins here.
… But Won’t Everyone’s Sites Look The Same?
You may be wondering if everyone’s websites will look the same if they are built using Bootstrap.
The answer? Yes and no.
If you don’t add any customization (aka your own CSS styles) and use only rely on the ready-to-go Bootstrap framework — then yes, to the trained Bootstrap eye it will be obvious.
However, by adding custom styling, sites using Bootstrap can vary greatly.
Below are just a few sites built using Bootstrap:
- This one: learntocodewith.me
- Pick Crew’s Blog: blog.pickcrew.com
- Help Scout: helpscout.net
- Serina Patterson’s awesome site: sprightlyinnovations.com
And the list can go on.
But you get the point: Bootstrap doesn’t have to be generic.
Best Bootstrap Resources for Beginners
Resources Caitlin Recommends:
- Get Started: Caitlin recommends checking out the official Bootstrap site. “You can download the Bootstrap files, check out examples, and look over all the documentation,” she says.
- Downloadable and Customizable Bootstrap Themes: Check out bootswatch.com and wrapbootstrap.com.
- Get Inspired: If you’re looking for some Bootstrap inspiration, head to the Bootstrap Expo.
- Stay up to date: Stay in the loop with new releases, patches, and old-school hip hop videos on the Bootstrap blog.
Additional Resources I Recommend:
- Lynda.com: Lynda has a great Up and Running with Bootstrap 3 course that I did when I first started – it taught me much of what I know about Bootstrap
- Coder’s Guide: They have a good Bootstrap 3 tutorial for free on YouTube – great for beginners
- Tutorial Republic: Here is a more comprehensive, written out Bootstrap 3 guide — I typically use it to look up something quickly
- Team Treehouse: I love Treehouse! They have a few courses and workshops that relate to Bootstrap
- Code College: Created by Brad Hussey, Code College is a platform with paid and free coding courses—including several related to Bootstrap.
Do you have a friend who wants to learn Bootstrap, too? If yes, make sure to share this article with them.