Hour 24. Going Further with Bootstrap

Bootstrap is a powerful tool for web designers to create responsive websites and nice-looking applications. But there is so much more you can do with Bootstrap when you know how to use it properly.

In this hour, you learn some of the tools, add-ons, and websites you can use to improve your Bootstrap websites. You also learn about editors that have Bootstrap built in as well as how to use Bootstrap in tools such as WordPress. Finally, you find out where you can go to extend your knowledge of Bootstrap.

Is it a visual editor or a code editor (or both)?

Can you modify the CSS, add components, and include Bootstrap JavaScript elements?

Can you edit the HTML, CSS, and JavaScript beyond the Bootstrap features?

Can you edit and compile Less or Sass files?

Can you use existing themes or style sheets?

It is tempting to evaluate editors based solely on price. Because Bootstrap is a free framework, spending money on an editor might seem foolish. But some of the best editors that have the most features also come with a cost. You can start with the free ones, but you might decide down the road that spending a little money can make a difference in improving your websites.

One of the biggest differences in web editors that support Bootstrap is whether they are online (a web-based application) or offline (a software-based application). Software applications work even if your computer is offline but require that you have a specific operating system to run them. Web applications run in the cloud and so require an Internet connection, but they can be run on any device that supports the Web.

I have found six online applications you can use to create and edit Bootstrap pages:

Bootply (http://bootply.com/)—Offers a free service as well as paid options for hosting your applications. They store the creations as snippets (they call them “plys”) that are shared with the entire Bootply community. This is a popular option.

BootTheme (http://www.boottheme.com/)—It’s free for noncommercial use for up to five applications and starts at $9.99 per month for commercial applications. Don’t be fooled by the name, though. BootTheme is both a theme editor and a visual web page editor. It does not include Bootstrap JavaScript.

Brix.io (http://brix.io/)—Starts at $4.90 per month with a 14-day free trial. It includes a visual editor and some nice premade templates, and it exports your sites as HTML5, but with some custom classes.

Divshot (https://divshot.com/)—Offers a free basic account, with more advanced accounts starting at $20 per month. This is an application development platform that includes a command-line interface along with Bootswatch themes, a visual editor, and a code editor. You also can edit and compile Less from within Divshot.

Jetstrap (https://jetstrap.com/)—Starts at $16 per month and does not have a free trial. It is a visual editor and supports Bootstrap base CSS and components; it does not support the Bootstrap JavaScript features.

LayoutIt (http://www.layoutit.com/)—A free online layout builder. It creates the base layout for your Bootstrap website for you to download as HTML and CSS; then you can open those files in another editor to do the final edits.

I also found four offline applications that support creating and editing Bootstrap websites:

BootUI (http://www.bootui.com/)—BootUI is available for Windows and Macintosh for $49.95. It is a Bootstrap template editor that comes with several nice-looking templates. The creators will add more templates from your mock-ups if you ask for them.

Dreamweaver CC 2015 (http://www.adobe.com/products/dreamweaver.html)—Dreamweaver is available for Windows and Macintosh starting at $19.99 per month. The 2015 version of Dreamweaver comes with a Bootstrap integration built in. If you open a site that is already built with Bootstrap, Dreamweaver CC 2015 detects that and opens the Bootstrap Components insert panel. You also can create new Bootstrap pages using prebuilt templates or a blank page.

Pinegrow (http://pinegrow.com/)—Pinegrow is available for Windows, Macintosh, and Linux starting at $49 with a 30-day money-back guarantee. It includes all the Bootstrap CSS, components, and JavaScript in a visual editor. You also can edit the code directly.

Pingendo (http://www.pingendo.com/)—Pingendo is available for Windows, Macintosh, and Linux for free. It is a visual editor that allows you to edit the CSS and components, but not the JavaScript.

Theme builders are really helpful for people who already have a web editor that they are happy with, but who find editing the Bootstrap CSS or Less and Sass files difficult. With these tools, you can create your Bootstrap site and then drop in the CSS generated by the theme builder to modify the look and feel to suit yourself.

I found six online free theme builders you can use to create Bootstrap themes in different ways:

Bootstrap Magic (http://pikock.github.io/bootstrap-magic/app/#!/editor)—Bootstrap Magic lets you customize every aspect of Bootstrap CSS and components using a preview engine to show how your changes will look as you apply them. It uses Less variables in the form itself and autocompletes to help you get the correct structure. It also has color pickers to help you get nice colors. Plus, you can preview typographic changes. It exports as both Less and CSS (both minified and standard). You can import existing themes as Less variables.

Bootswatchr (http://bootswatchr.com/)—Bootswatchr uses the Less variables to help you see how your theme will look as you build it. It is especially useful if you are already familiar with the Less variables file and you just want to see how your changes will look in a live environment. It previews both color and typography. It exports as CSS and minified CSS, and you can import Bootswatches you’ve previously saved.

Lavish (http://www.lavishbootstrap.com/)—Lavish takes an online photo and creates a Bootstrap color scheme from it. You can then adjust the colors to match exactly how you want your page to look. You can export your colors as either CSS or Sass.

Paintstrap (http://paintstrap.com/)—Paintstrap uses ColourLovers and Kuler codes to generate color schemes for Bootstrap pages. It doesn’t seem to support the new Adobe Color CC, which is what Kuler has changed into, but it still works great with ColourLovers. You can export your color theme as CSS, both minified and standard, as well as Less variables.

Style Bootstrap (http://stylebootstrap.info/)—Style Bootstrap enables you to change settings and watch the preview change as you type. It also offers a “random” button to generate some truly hideous-looking color schemes. You can export your color schemes as CSS.

Twitter’s Bootstrap 3 Navbar Generator (http://twitterbootstrap3navbars.w3masters.nl/)—The name makes it appear to be a generator, but it is really a theme generator specifically for navbars. You can generate specific colors and styles for your navbars and then export the CSS for use in your Bootstrap pages.

I also found two generators that will help you generate the Bootstrap HTML code for forms and buttons:

Form Builder for Bootstrap (http://bootsnipp.com/forms)—This is a drag-and-drop form builder that can help you quickly create a nice-looking Bootstrap form. It doesn’t style the form for you (use the previously listed theme builders for that). Instead, it shows you how your form would look with drag-and-drop form elements. The only thing it doesn’t do is generate HTML5 form fields such as email and url.

Twitter Bootstrap Button Generator (http://www.plugolabs.com/twitter-bootstrap-button-generator-3/)—This generator helps you generate Bootstrap buttons. You can choose the button text and style, and even decide whether it has an icon on it and, if so, which icon to use.

To use Bootstrap with WordPress, you have three options:

Use a plugin to extend Bootstrap to WordPress.

Find a WordPress theme that uses Bootstrap.

Build your own theme using Bootstrap.

Both offer shortcodes for using Bootstrap, but I find the Easy Bootstrap Shortcode to be a bit easier to use. It doesn’t include all the same components as WordPress Twitter Bootstrap CSS, but it has all the shortcodes included in the tinyMCE editor, as shown in Figure 24.1.

The benefit to using a plugin to add Bootstrap to your WordPress sites is that you don’t need to make any major changes to your site. You can get some of the benefits of Bootstrap (like using accordions or decorating your buttons with icons) without a lot of effort.

The drawback is that plugins provide a limited selection of Bootstrap. You’re not getting the full Bootstrap experience because the pages themselves are not built in the Bootstrap framework. Instead, you have sections of your pages that use Bootstrap and sections that do not.

As with all themes, you should test the theme you’re planning to use extensively before launching with it—you might discover some major problems. For instance, one theme I considered looked gorgeous on large screens but was completely illegible on an iPhone 6. This was surprising because Bootstrap handles multiple breakpoint responsive designs well.

The benefit to using a theme to add Bootstrap to WordPress is that you get all the extras of Bootstrap, including the grid system and all the CSS, components, and JavaScript. Plus, many of the themes have already been customized, so you don’t have to worry about that.

The problem with using someone else’s theme, though, is that you are limited to what they give you. If the theme doesn’t support accordions, then you won’t be able to use them. Or if the theme isn’t as responsive as you would like, then you have to live with that, too.

The challenge is that building your own theme requires that you know a lot more about WordPress and theme building than I can go into in this hour. A good place to start is the WordPress Codex on theme development (http://codex.wordpress.org/Theme_Development).

However, to really make your Bootstrap site look different from other Bootstrap websites, you’ll need to get a new template as well as a theme. A template can help you see the potential for your websites while not having to come up with the design all by yourself. Bootstrap Zero (http://www.bootstrapzero.com/) offers hundreds of free templates. It claims to be the largest open source free Bootstrap template collection, and I tend to agree. The site offers a lot of great color themes and templates to change the entire look of your website.

The place you’re going to get the most bang for your buck, though, is with the professional templates. Before you stop reading, you should realize that “professional” does not have to mean “expensive.” The site {wrap}bootstrap (https://wrapbootstrap.com/) offers hundreds of low-cost Bootstrap templates and themes. In fact, the most expensive themes I saw there cost less than $50. That $50 gets you dozens of different layouts, lots of color and typography options, and even WordPress support. Plus, most of the themes I saw cost less, often around $20, with some as low as $4. For just a few dollars, you can get all the benefits of Bootstrap with zero design work.

Some things you can add with plugins include

Lightboxes—Make your image galleries stand out more with Lightbox effects to open up thumbnails and provide more information. The Bootstrap Lightbox (http://www.jasonbutz.info/bootstrap-lightbox/) plugin makes it easy.

Photo Galleries—More than just one image, a photo gallery plugin can help you manage the photos on your site pages and give them a great-looking display. The Bootstrap Image Gallery (http://blueimp.github.io/Bootstrap-Image-Gallery/) plugin even includes touch navigation.

Notifications and dialog boxes—There are lots of plugins to make the Bootstrap modals (refer to Hour 15, “Modal Windows”) even easier to build and maintain. Bootbox.js (http://bootboxjs.com/) is a popular plugin, but I really like Bootstrap Growl (https://github.com/ifightcrime/bootstrap-growl) because of all the customizations.

Web form helpers—Web forms can be difficult to make, and even though Bootstrap makes it easier, a lot of form features are still left out. One of my favorites is the Bootstrap Form Helper (http://bootstrapformhelpers.com/). This collection of plugins offers several helpers to add things like date pickers, number inputs, and select elements into your forms. This plugin is not free for commercial use, and the cost starts at $12 per year. Other form plugins are available, but these are easy to use and quick to install.

There are lots more Bootstrap plugins than I can list. But one resource you can start with is the Big Badass List of 319 Useful Twitter Bootstrap Resources (http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources). This list has more than just plugins, and it’s a great place to start extending your Bootstrap site.

Twitter Bootstrap Community Forums (http://www.twitterbootstrap.net/forum/forum.php)—This is an online forum where you can ask and answer questions about Bootstrap. I wish it had a Sass section as well, but many of the questions I’ve had about Bootstrap have been answered there before I had to post a question myself.

Stack Exchange (http://stackoverflow.com/questions/tagged/twitter-bootstrap)—This is just a list of questions about Bootstrap, but you will be surprised how many of your questions have already been answered here.

Reddit (http://www.reddit.com/r/bootstrap)—The Reddit community is there for you if you have a problem with your Bootstrap implementation. Just be sure to include your page URL so that the feedback you get is useful, rather than just snarky.

Reaching out to the many other people who use Bootstrap on a daily basis is a great way to learn more about this framework. And remember, if you want to ask me a question, you can always contact me on my website http://htmljenn.com/. I am part of the Bootstrap community, too.

Bootstrap is a great framework, and you can build great sites with it.

This hour gave you some ideas for where to find third-party add-ons to improve your sites. You learned where to find free and professional themes, templates, and plugins and where to find other Bootstrap developers to get help and inspiration, as well as some beautiful Bootstrap websites to help you design your next amazing creation.

A. In the Bootstrap world, a theme refers to the Less variables you can modify to make your website use different colors and typography. A template includes all the files you need to build a custom website. This usually means the HTML for one or more pages of a website, custom CSS, and sometimes JavaScript files.

Q. Can I use jQuery plugins if I can’t find a Bootstrap plugin I like?

A. The world of Bootstrap plugins is huge and contains so many things you can add to your sites. But, if you can’t find the perfect Bootstrap plugin to use, you can always use jQuery plugins because Bootstrap requires jQuery to run.

a. Does it edit the Bootstrap CSS?

b. Does it allow for visual editing?

c. Can it compile Less or Sass?

d. Will it add Bootstrap components?

2. When should you use a theme builder?

a. When you don’t know what your Bootstrap site should look like

b. When you have a color palette but don’t have the HTML for a layout

c. When you have a color palette and the HTML for a layout

d. When you have a complete template

3. Why should you use a WordPress plugin to incorporate Bootstrap?

a. You should not use a WordPress plugin.

b. Because they offer the strongest integration into WordPress.

c. So that you get a better theme.

d. So you don’t have to make any big changes to your site theme.

4. True or False: Testing a Bootstrap theme is not important.

5. Which of the following is not true about building a Bootstrap WordPress theme?

a. You can customize it to suit your site’s needs.

b. It is easy and quick to do.

c. It lets you incorporate any of the Bootstrap components or plugins you want.

d. You need to know a lot about WordPress to do it.

6. True or False: There are both online and offline Bootstrap editors.

7. Which of these is the best way to quickly change the look of a Bootstrap site?

a. Design and build the HTML and CSS yourself.

b. Add custom plugins.

c. Hire a designer to build the HTML and CSS.

d. Use a prebuilt theme or template.

8. What is the difference between a plugin and an add-on?

a. There is no difference between a plugin and an add-on. They are two ways of saying the same thing.

b. A plugin is completely finished, while an add-on requires work by the developer.

c. A plugin works only with jQuery, while an add-on will work with any JavaScript.

d. A plugin is specific to Bootstrap, while an add-on can work in any framework.

9. True or False: There are a lot of people using Bootstrap.

10. True or False: All Bootstrap sites look the same.

2. c. When you have a color palette and the HTML for a layout. Theme builders let you define your Bootstrap site colors but don’t adjust the layout.

3. d. So you don’t have to make any big changes to your site theme.

4. False. You should always test any theme you install as extensively as you can.

5. b. It is easy and quick to do. Building a WordPress theme takes a long time and a lot of work even if you use Bootstrap to speed up the process.

6. True. You can find both online and offline Bootstrap editors.

7. d. Use a prebuilt theme or template. This is the fastest way to change the look of a Bootstrap website.

8. a. There is no difference between a plugin and an add-on. They are two ways of saying the same thing.

9. True. Thousands of people are using Bootstrap to build and maintain websites all around the world.

10. False. Bootstrap is a good start, but you can design nearly anything you can imagine using Bootstrap.

2. Pick out a Bootstrap theme or plugin that you find interesting, and see whether you can install it on your website.

3. Share your Bootstrap website on my Facebook page https://www.facebook.com/JenniferKyrnin. Feel free to ask any questions about Bootstrap or web design as well.