Flat Bootstrap is a modern, fully responsive, “flat” style theme with a nice color palette, big full-width images, and full-width colored sections.

It automatically adapts for desktops, tablets, and phones. It is based on the standard WordPress starter theme (_S) and the Twitter Bootstrap CSS framework. The theme was inspired by the HTML/CSS themes from Blacktie.co and color schemes from Designmodo.com’s flat UI.

Features include a mobile navigation bar, multiple columns (grid), buttons, icons, labels, badges, tabbed content areas, collapsible content areas, progress bars, alert boxes, carousels (sliders) and much, much more. This is a theme for both users and theme developers with lots of features but without the bloat.

Why We Wrote this Theme

There are thousands of WordPress themes and dozens of Bootstrap themes, but almost all of them are designed with a maximum width. Most of the Bootstrap themes are also only for developers, not users, with just the basic ugly Bootstrap sticking out like a sore thumb. Most of the Bootstraps themes aren’t based on a core WordPress theme either, so they can be difficult to figure out how to adjust the styling.

We developed this theme to be unique in these key ways:

  1. It is based on the WordPress core “starter theme”, so you already know how to style it and override templates and such in a child theme without learning anything new!
  2. It is based on Bootstrap for cross-browser capability in a fully responsive theme with tons of components that you can use in your content, such as buttons, navbars, sliders, etc.
  3. It is designed to be a modern, “flat” (or technically “almost flat”) theme with full-width colored sections and full-width images. This really brings your content alive and allows the reader to focus on that content instead of the theme itself.
  4. Its open source AND completely free. Most themes like this are considered “premium” themes and cost money. Our hope is that user’s will love it and theme developers will start using it as a core “framework” as well.

Theme Features

  • Fully responsive theme that changes layouts for desktop, tablets, and phones
  • Modern, “flat” style theme with beautiful color palette
  • Big full-width featured images on any page
  • Full-width colored sections
  • Hundreds of icons from Bootstrap and Font Awesome
  • Variable column footer with 1 to 4 columns

WordPress Features Supported

custom-background, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, fluid-layout, full-width-template, left sidebar, light, one-column, responsive-layout, right sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

Page Templates

  • Full-width page with colored page header
  • Full-width page without page header
  • Full-width page with three (3) most recent posts (in columns on desktop)
  • Page with right sidebar (default)
  • Page with left sidebar
  • Page without sidebar
  • Site Index with search, pages, categories, tags, and recent posts listings

We’ve even included the ability to have individual posts be full-width as well.


Our “shortcodes” aren’t really shortcodes… you simply use the standard Bootstrap markup, such as < div class=”whatever”>. If you really like shortcodes instead, you can download either of these plugins. They both work just fine with this theme.

  • Colored buttons
  • Colored message boxes (alerts)
  • Tabbed content areas
  • Collapsible content areas
  • Sliders (carousels)
  • Everything else that the Bootstrap CSS framework has to offer!

Demo and Download This Theme

Demo this theme Demo Flat Bootstrap Theme

Download this theme from the WordPress.org Theme Directory Download Flat Bootstrap Theme

The Flat Bootstrap Child Theme is for users to be able to easily customize the theme.

It includes a stylesheet (style.css) for you to override or add CSS styles. It comes with a functions file (functions.php) in case you want to modify any theme functions. You can also, of course, copy down any of the page or post templates from the parent theme and modify them within your child theme. This way you can still receive updates to the parent theme for bug fixes and new features.

This child theme is included directly in the Flat Bootstrap WordPress theme. Just copy it up to your theme root directory and make your changes.

Flat Bootstrap Developer is a child theme for Flat Bootstrap that strips out all the “extras” so your theme is “light” and you can style it up however you want.

The child theme includes a style.css and functions.php to remove most of the theme’s extra features, javascript, and styles. Specifically:

  • style.css does not include theme-specific styles from the parent theme
  • functions.php removes or changes the following theme features
    • Removes the custom bootstrap CSS and replaces it with the core Bootstrap CSS from the CDN
    • Removes our theme-flat.css stylesheet that has the colored sections and extra buttons in it (btn-hollow and btn-transparent)
    • Removes font-awesome.css (but Bootstrap Glyphicons are still there as they are used by the theme itself)
    • Removes jquerymobile.js (small custom version) and our theme.js that triggers swiping in carousels on touch screens
    • Loads only the required include files, which are for template tags, and adding Bootstrap to the theme.
    • Does not load includes for the theme customizer (custom background, header, etc.), Jetpack continuous scrolling, keyboard navigation on attachment image pages, “extras” included in the TwentyXYZ themes, or plugin recommendations.
    • Changes the site credits a bit, just to show how to override any function in the theme, both in the main functions file or in the included files.

Since this theme is for developers, we are hosting it on github. Download Flat Bootstrap Developer Theme

92 responses to “Flat Bootstrap WordPress Theme”

  1. oscargomezstudio Avatar

    Hi Tim, nice theme… Another designer used your theme to create a site and i just want to remove the footer but i do not find a way to do it. This is our site: http://www.naturalwoodfloorstudio.com/ We want to remove the footer that says VIDA NATURAL, the whole light gray area. Thanks

    1. Tim Nicholson Avatar

      Your site looks absolutely awesome! Would you mind if I actually featured it on this site as an example of what can be done? It looks to me that you have updated the footer to look the way you want. Check out the child theme’s functions.php for how to change the site credits programatically. It can also be done using CSS.

  2. Steven Aldrich Avatar
    Steven Aldrich

    Hey there,

    Just wanted to remark the font-awesome being enqueued with the current theme is out of date; it’s using 4.5 when the latest is 4.7. I’ve written a script to just grab the latest, is this something you could incorporate with the next update?

    add_action( ‘wp_enqueue_scripts’, ‘enqueue_font_awesome’ );
    function enqueue_font_awesome() {

    wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );


    1. Tim Nicholson Avatar

      I’m glad you knew how to write a function to override where the fonts load from. WordPress.org won’t allow me to load from a CDN, so I will have to manually update the local files to the latest version.

  3. Thorworx Avatar

    I just found that there can be issues using:
    $dom->loadHTML(mb_convert_encoding($footer, ‘HTML-ENTITIES’,’UTF-8′));

    I’ve changed the fix to use the following (in theme-functions.php line 352):
    $dom = new DOMDocument();
    $dom->loadHTML(‘‘ . $footer);

    This seems to work.

    1. Thorworx Avatar

      ^^^ ugh. Proper code is stripped out. See this for correct code/fix:

  4. Thorworx Avatar

    @izabelcastrorodrigues Thanks for this fix. I was also having issues with character encoding in a footer widget. @Tim, please have a look at: http://stackoverflow.com/questions/3523409/domdocument-encoding-problems-characters-transformed for issues regarding DomDocument

  5. izabelcastrorodrigues Avatar

    Hi author,
    I had problems about encoding in footer. I fix the problem with this:
    $dom->loadHTML(mb_convert_encoding($footer, ‘HTML-ENTITIES’,’UTF-8′));
    file: (inc/theme-functions.php)

  6. John Falcon Avatar
    John Falcon


    I am using the Flat Bootstrap theme and have an issue where I have two H1 tags I want to get rid of – one is the Site Title and one says ‘Footer Menu’ – any ideas how I can get rid of these so I just keep the one H1 tag I want ?


    1. Tim Nicholson Avatar

      Search engines like Google don’t mind multiple H1 tags, but if you would like to get rid of the one in the footer associated with the footer menu, you can edit footer.php. That H1 tag is there only for accessibility (screen readers).

This site uses Akismet to reduce spam. Learn how your comment data is processed.