Sal Ferrarello
You are here: Home / Computing / Bootstrap vs WordPress

Bootstrap vs WordPress

Last updated on by

The quick answer to the question of Bootstrap vs WordPress is, in terms of sheer numbers, WordPress is used on more websites than Bootstrap, so WordPress wins, if that’s the kind of answer you want. However, the problem with this comparison is we’re asking the wrong question.

Apples vs Oranges

I love Bootstrap and I love WordPress. Bootstrap and WordPress serve two different functions and either one can stand fine on its own, but they also work well together. Bootstrap vs WordPress isn’t a good question because you can build a site with both, either one singly, or neither. For example, this blog, salferrarello.com, uses both WordPress and Bootstrap.

Note: If this section title makes no sense to you, you have my apologies. It is a reference to an idiom in English, comparing apples and oranges, which refers to comparing two items that are illogical to compare.

WordPress

WordPress is a Content Management System (CMS). It allows you to create new pages, upload images, adjust which items appear in your menu, and do a host of other tasks related to the content of your website.

Bootstrap

Bootstrap is a front-end framework, which is a collection of CSS and JavaScript that works together to control the presentation of your webpage. This presentation includes the colors of your text, what buttons look like, and how your site changes when viewed on a mobile device (eg: three columns collapse to one column, your big menu changes to a little icon, etc).

WordPress without Bootstrap

WordPress manages the content on your website and uses a theme to determine how that content is displayed. The Theme is the presentation layer of your website. The Theme controls things like how the content is arranged, the colors of your text, what buttons look like, and how your site changes when viewed on a mobile device (eg: three columns collapse to one column, your big menu changes to a little icon, etc). You’ll notice these are the same types of responsibilities addressed by Bootstrap. You don’t need Bootstrap as part of your theme. You can use another front-end framework or instead create all the rules and behaviors yourself. There are lots of WordPress themes that do a terrific job without using Bootstrap, including default themes (Twenty Fifteen, Twenty Fourteen, etc).

Bootstrap without WordPress

WordPress is not your only option for Content Management Systems (CMS) and, if you want to edit all the HTML yourself, you don’t even need a CMS. If using an alternate CMS or no CMS at all, you can still use the Bootstrap front-end framework.

How to Use WordPress and Bootstrap Together

There are lots of ways to use WordPress and Bootstrap together. I use my Bootstrap Genesis starter theme on this site, which requires the WordPress Genesis Theme. This setup gives me a great starting point for building custom themes for clients.

For a turnkey solution, you can download a free Bootstrap theme from WordPress.org or you can purchase a Bootstrap WordPress theme from your vendor of choice.

If you’re planning to build a theme and trying to decide if Bootstrap is the right choice for you, you might want to read about Why I Build WordPress Themes with Bootstrap.

Why I Wrote this Post

While reviewing Google Webmaster tools I noticed a lot of searches for “Bootstrap vs WordPress”. As I’ve discussed, the “vs” isn’t so appropriate and I wanted to address this. I’d love to hear about your views on WordPress, Bootstrap, and the two of them together.

Share this post:

LinkedinReddit

Reader Interactions

Comments

    • Hi Helder,

      Foundation is another great front-end framework. My focus is on Bootstrap because it is where I started and I haven’t found a compelling reason to switch to Foundation. If I had started with Foundation, I’d probably be writing the same thing about it.

      Reply

  6. Interesting…

    I have two sites built from the ground up using bootstrap with stripe, ecwid, php contact forms, gallery add on, anti robot checker. Total for each is about 28MB, 317 files, 33 folders.

    For my next site, I outsourced the dev and opted for wordpress theme Impreza. The devs added some addons – woocommerce, visual composer editor, magic grid, slider revolution. Site is passive with an online shop (woocommerce, stripe, sql db). Guess what … 9400 files files, >1000 folders and about 180MB…!!! I absolutely abhor entering content – takes forever to update changes etc. Even the SSL turned out to be problematic. There is a lot to be said for bootstrap and direct html + css edits in a code editor. The only fundamental difference is the need for an sql based filter.

    Using ecwid in my older sites turns out to be reasonably smart. because the products are edited (add, modify, delete) on their dbms and one uses their server based process logic, you know it will always be kept up to date and manipulating the product list etc is much faster than on a wp woocommerce added on site.

    One can see that wordpress is really oriented towards blogs – uses a blogging mindset and is hammered from all sides to make it work on a wide range of websites

    The real question may be what are the pros and cons of using a site with it’s own dbms and commerce plug in (woocommerce/stripe) vs. an external commerce engine (ecwid/stripe). This way you keep simplicity on the website and the complexity is with the pros that provide commerce functionality on the fly external to the site with just the presentation layer embedded.

    Reply

  7. What does Bootstrap do for me that I cannot do with WordPress alone?

    in other words, why would I use Bootstrap in addition to WordPress? Is that a valid question?

    Thanks.

    Reply

  10. Hi Sal,

    I’ve found a Boostrap theme that would work well for me but I’m a bit concerned on how hard it is to edit the content.

    I’m familiar with standard WordPress themes but it’s been years since I edited HTML and I used an editor for that.

    Is it relatively easy or should I stick with WordPress?

    Thanks

    Reply

    • Hi Rod,

      I’m not quite clear on your situation. Are you saying you’re considering moving to a static site (i.e. modifying HTML files directly) instead of using a content management system (CMS) like WordPress?

      In other words, you’re considering editing your HTML files rather than logging into WordPress and typing your content in there.

      Personally, I find using a CMS (like WordPress) to be helpful rather than editing raw HTML, especially for sites that are often updated. Based on the limited information I have, I’d guess that your best bet is to find a WordPress theme that is closer to the look you want.

      At the same time, I’d recommend you try creating a site with raw HTML and the Bootstrap theme you found as a test site. I just wouldn’t make that jump for your actual site without doing some experimentation with it first.

      Good luck and I’d be interested to hear how things turn out.

      Reply

  11. Hi Sal,

    Personally, I find using a CMS (like WordPress) to be helpful rather than editing raw HTML.

    I find the editing interface of WordPress to be more frustrating rather than helpful. Trying to get content to appear as desired is a challenge on WordPress, to say the least.

    If a drawback of Bootstrap is “editing raw HTML” wouldn’t a Bootstrap building app, i.e Bootstrap Builder, Bootstrap Studio or even Dreamweaver not solve that issue? Thus the Bootstrap building app would in effect become an offline CMS for Bootstrap.

    So if the question was Bootstrap Building Application versus WordPress, would the answer change to which was preferable?

    Personally, I think if one must use an on online CMS, I would favour Wix or Weebly WYSIWYG interface over WordPress.

    I think it also needs pointing out that WordPress.com and WordPress.org are not the same thing. I would never use WordPress.com! WordPress.org is acceptable.

    Reply

    • Hi John,

      You mention, “I find the editing interface of WordPress to be more frustrating rather than helpful. Trying to get content to appear as desired is a challenge on WordPress, to say the least.”

      I absolutely agree that creating complex markup within the classic WordPress editor is a headache. I suspect that is one of the reasons they are currently redesigning the WordPress editing experience to be a JavaScript powered block-based editor (I’ve written about creating custom “blocks” for the new editor in my post WordPress Custom Editor Block).

      Currently my workflow avoids any complex markup within the classic editor. I write all my posts in Markdown, which helps me write more quickly (and avoid the temptation to do anything fancy with the HTML). My general feeling is I prefer more complex HTML go in the template files rather than the editor but that is going to vary from person to person. I can see why some people like page builders, they just aren’t for me.

      If your goal is to use WordPress with a page builder, I can see how a different service might be a good alternative. The one advantage that WordPress has over these hosted services is you are in control of your own content. It is heartbreaking to hear about someone losing all of the content they created on a hosted service. This is a risk / convenience balance each user must make for him or herself.

      You are correct that the service WordPress.com and files available from WordPress.org are very different (there is a nice video from iThemes, WordPress.com vs WordPress.org).

      Thanks for sharing your thoughts.

      Reply

  12. Hi Sal,

    Thanks for this info. As a newbie I’m trying to find an analogy that works for me, how’s this: you can use a stove or a microwave to make a meal, or you can use both. Each has its own benefits/drawbacks.

    Question: Is Bootstrap compatible with Gutenberg?

    Thanks again

    Reply

    • Hi Chris,

      I don’t think your analogy captures the situation.

      I’d compare it to building a house. To build a house you need to frame it out, which is analogous to the HTML. WordPress is this magical tool that generates the HTML for you. You can use a different tool to generate your HTML (or you can even type it all by hand).

      Once you’ve framed out your house, you need to fill in your walls, then paint them, add electrical, plumbing, fixtures, etc. This is like the CSS and JavaScript. Bootstrap is a pre-packaged set of all of these things. You can use this pre-packaged CSS and JavaScript but you don’t have to.

      So you can build a house, with or without WordPress generating the framing, and you can fill in that framing, with or without the pre-packaged materials that are Bootstrap.

      Reply

  13. Is Bootstrap compatible with Gutenberg?

    While Gutenberg comes with some core WordPress blocks, it is built so developers can add their own blocks, as well.

    Core Gutenberg Blocks

    In general, the core Gutenberg blocks are made to be as friendly as possible across all themes.

    Custom Gutenberg Blocks

    When developers add their own blocks, they add their own CSS for them, as well. Hopefully, they’ll write them in such a way that they’ll not conflict with existing styles (e.g. Bootstrap styles).

    Is Bootstrap compatible with Gutenberg?

    Generally, yes. If you are using a Bootstrap based WordPress theme, it should work with Gutenberg.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *