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

More Information About Our Themes

Be sure to check out How to Use Our WordPress Themes and our Theme “Shortcodes” Page. You can also check out other other themes that should be ready for release soon as well on our WordPress Themes page.

83 comments on “Flat Bootstrap WordPress Theme

  • Hia! Thanks a lot for your work, i’m currently using the Flat Bootstrap v1.5 theme, and found out that there is a problem with submenus in theme, in some reason, it isn’t dropping down on hover or when clicked( can u help fixing this? Thanks!!

    • The theme is based on Bootstrap which is open-sourced by Twitter. Their opinion is that with widespread mobile use, hover menus are outdated. I’m not saying I agree, but I’m trying to keep my theme 100% compatible with Bootstrap. If you really want traditional hover menus, I could point you in the right direction. Look at header.php and you’ll see where I’m calling a custom Bootstrap-specific callback. If you change it to the default (can blank out the callback), then the normal WordPress menu structure will be output. You’d have to code up all the menu-related CSS yourself, though.

  • Hi, I’m all new here and looking for support to the Flat Boostrap theme. I have translated the PO file; however not everything can be translated. I’m missing the “Read more” – where can I translate that?

  • Hello I am using the Flat Bootstrap theme. I love the feel of the theme. However, there are two things that bother me about the version I have (v1.5). When viewing it on a mobile device, I would like to disable the default mobile view. Also I do not want the “Call to action” sidebar at all. I found out how to make it invisible, but I would like to remove it permanently. I am totally new as a web developer and could use some help on this. Thanks.

    • I’m not sure what you mean by disabling the default mobile view. There really isn’t a mobile view as the theme is responsive, meaning it adapts to different screen sizes. For the “Call to action” widget, that is just a sample. Add a blank text widget to the Page Bottom widget area and it will go away. If you want to be able to choose to hide certain widgets on small screens, you can use a plugin such as Simple CSS for Widgets and use Bootstrap’s built in classes for that. See http://getbootstrap.com/css/#responsive-utilities.

        • Put one or more spaces in the text widget. That tells the PHP code that there is something in it and it should be displayed, but the user won’t see the spaces. Any actual text you add certainly should be showing. Can you give me a link to your website?

          • This is a nice theme but having to add an empty widget to get rid of something no one will want on their site is kind of silly. Having a real call to action widget that could be added would probably be a better option.

          • I agree. I did it this way primarily so the WordPress.org directory could show some semblance of what the theme might look like. Since its a flat theme, the colored sections and buttons are what give it the look and feel. WordPress doesn’t give us any way to include sample data, for a widget or otherwise. They also won’t allow inclusion of an actual widget in a theme.

  • I’m using 1.6 and code tags do not get formatted correctly. There is an extra border especially when using markdown which forces a tag. I corrected it by adding a border none style to “pre code” . There might be a better way. Maybe include a fix in the next version?

    • I’ve noticed that too and just looked into it and I think I have a fix. For now, you can use the pre tag instead of code. I’ve tried to style them to look the same anyway (I don’t like the red coloring for code). Or in theme-base.css you can comment out the word-break and word-wrap as they are already handled earlier in the file.

      /* Style code tag like pre tag so its white instead of red */
      code {
          /*word-break: break-all;
          word-wrap: break-word;*/
          color: #2f2f2f;
          background-color: #f5f5f5;
          border: 1px solid #ccc;
      	-webkit-border-radius: 4px;
      	-moz-border-radius: 4px;
      	border-radius: 4px;

      This fix will be in the next update (v1.7). Thanks for having me look into it deeper.

  • hi,
    thanks for a nice theme with a lot of options.
    I’m trying to use widget login plugin but it doesn’t seem to work. anyone else have this problem?
    theme- 1.6 , wordpress 4.3.1


  • Hi
    I created a website with your theme and it looks great but I can’t change or get rid of the page bottom. I read how you say to get rid of them but it doesn’t work. Can you help. Thanks

  • Thank you for your answer. I did that. There are 2 footers. The first one i got rid of but the second doesnt change no matter how many footer widgets i add.

  • I had a tough time trying to get the widgets working within your theme.
    If I switched to another theme, the widgets worked just fine, but with yours, only the default widgets were shown, no matter the changes I did in the admin widgets section. Also, the “widgets customizer” just thrown a message that there were no widgets areas available.
    Finally, I discovered that if in the code I changed the widget areas names for the ids, it worked!
    Example (in sidebar.php)
    Instead of
    I need to put
    It seems very strange to me that it seems that no one else is facing this problem.
    I’m using WordPress 4.4.1

  • I found the problem
    It’s a problem with the internationalization (I’m using Spanish version).
    the register_sidebar function is using:
    ‘name’ => __( ‘Sidebar’, ‘flat-bootstrap’ )
    while the template pages are this way:
    if ( ! dynamic_sidebar( ‘Slidebar’ ) ) : ?>
    That results in names discrepancy.
    So if I apply interationalization in both places, it also works:
    if ( ! dynamic_sidebar( __( ‘Sidebar’, ‘flat-bootstrap’ ) ) ) : ?>
    This helps as a refference:

    • You are so awesome for finding that and commenting on how to fix it. I definitely would like to leave the sidebar names translatable, so what I’ve done is update all the calls to load the sidebar to use its “id” instead of its “name”. So “sidebar-1”, “sidebar-2”, etc. I would love to change the id’s to something more meaningful, but then everyone would lose their widget settings. So I’m leaving them the way they are. This fix will be in the next release!

  • Just updated to 1.7 (from 1.6 which did not error) and getting the following error in the footer:
    Warning: DOMDocument::loadHTML(): Tag aside invalid in Entity, line: 1 in /wp-content/themes/flat-bootstrap/inc/theme-functions.php on line 335

    • Uh oh, not good. Is this your production site? Because usually production isn’t set to debug mode. But regardless, it needs to be fixed. I’ve done that for the next release but didn’t realize people would have debug mode on. Here is the fix within /inc/theme-functions.php. Notice the lines added before and after $dom->loadHTML( $footer );

      	// Use PHP to parse the DOM structure and count the number of widgets
      	$dom = new DOMDocument('1.0', 'utf-8');
      	$dom->loadHTML( $footer );

      What I did was improve the method for determining how many widgets were added to the footer. But the PHP’s libxml doesn’t understand HTML 5 tags. It works just fine with them, but spits that stupid error. Those two lines suppress it. Hopefully someday the function will be enhanced to allow you to specify that HTML5 is valid and have it not kick errors.

      I’ll probably issue a v1.7.1 quick fix instead of waiting for v1.8 to be completed. Thanks for pointing this out quickly.

  • Hi Tim. Just updated my parent theme, Flat Bootstrap, to Version 1.8.
    I’ve got a custom loop for one of my page templates that displays all posts in a certain Category.
    “`have_posts() ) : while ( $whitecollar_query->have_posts() ) : $whitecollar_query->the_post(); ?>

    <a id="notable-“>

    Since the update, it always adds a new empty container after the second post, and then goes on and displays the rest of the posts. Here’s a screenshot of my page where you can see the resulting gap in the posts:
    It seems that this is coming from functions in the theme-functions.php: xsbf_add_container and xsbf_end_container.
    Do you think I can safely delete these functions in the parent theme, or even better, turn them off somehow in the functions.php of my child theme?
    Thanks so much.

    • Can remove these new functions like so:
      //Remove a function from the parent theme
      function remove_parent_filter(){ //Have to do it after theme setup, because child theme functions are loaded first
      remove_filter( ‘the_content’, ‘xsbf_add_container’, 5, 1 );
      remove_filter(‘the_content’, ‘xsbf_end_container’, 1999, 1 );
      add_action( ‘after_setup_theme’, ‘remove_parent_filter’ );

      • That is exactly the proper way to do it. Thanks for taking the time to post the solution and bringing it my attention. I’ve got some major reworking of things going on now and I’ll consider when and how that feature is implemented. It’s really there for certain page templates, such as the site index, to move “after content” stuff to the end of the page.

  • I have just updated to v1.8, and on our events pages (created by the Events Manager plugin), the right-hand-side widget area (Meta etc) have all moved to the bottom of the page. (The other non-events pages are fine). You can see this at http://analytics.org.nz/events/auckland-11-march-how-data-and-analytics-are-transforming-new-zealands-public-sector/ This used to work fine with your theme. Any suggestions? This happens on Firefox and Chrome. Thanks for a great contribution – we really like this theme. Andrew

    • Thanks for your kind words! I am working on some changes as to how the sidebars are called (by ID instead of Name, so as to not cause problems with non-English sites). I’d like to understand what’s going on here to make sure the next version (v1.9) doesn’t have any issues at all with sidebars.

    • At first glance, I thought it was the inline “float: right” (for the map and possibly that login section) was not playing nicely with Bootstrap’s grid system. However, since this was working for you in v1.7, but not in v1.8, I think it may be due to this change that I made. From the release notes:

      “Previously on full-width page templates, we used javascript to move content from any plugins to the bottom of the page. For example, to push social sharing buttons below the content. In this release, we do that for all pages and articles, regardless of whether they are full-width or not. For example, social sharing buttons now get moved below the site index page content when using that page template.”

      I’m thinking that it has to have something to do with that. For the next version, I’m going to rethink when and how I’m doing this. For now, I would use the suggestion above from lisajwells to turn off this functionality altogether.

      Since you are using Flat Bootstrap, you can easily copy the /flat-bootstrap-child theme and edit it’s functions.php. Add this somewhere in there:

      //Remove a function from the parent theme
      function remove_parent_filter(){ //Have to do it after theme setup, because child theme functions are loaded first
      remove_filter( ‘the_content’, ‘xsbf_add_container’, 5, 1 );
      remove_filter(‘the_content’, ‘xsbf_end_container’, 1999, 1 );
      add_action( ‘after_setup_theme’, ‘remove_parent_filter’ );

      That turns off that particular functionality and should fix your problem. Please let me know whether that works or not. If this is causing problems with plugins, I want to rethink how its being handled.

  • Hello
    I am very happy with the flat-bootstrap
    I installed a child theme
    I would change such a parameter
    flat-bootstrap/ css/ theme-flat.css
    After multiple tests, nothing works, I can certainly do it, wrong
    Where can I find a tutorial to explain the procedure
    (Can not find the answer)
    Thank you for the reply and for your work

    • Please check out How to Use our WordPress Themes and the Child Themes page on WordPress.org. It’s great that you are using a child theme as that is definitely what you want to do. But instead of copying down the theme’s CSS and editing it, simply put the styles you want to *override* in the child theme’s style.css.

      Just a heads up… Flat Bootstrap v1.9 (the parent theme for Pratt) will be coming out very soon and I have made significant changes to theme-base.css, theme-flat.css, etc. You definitely don’t want to alter those files.

      • Hi thank you
        If i understand,
        I want to modify (override)
        .content-header {
        padding-top: 35px;
        padding-bottom: 35px;
        which is in theme-base.css

        I just put it (modified) in style.css in the child theme

        Thanks again

  • Hi! I use flat-bootstrap and created a child-theme. When looking in the functions.php of the parent theme there is the following line (292 in my editor):

    “wp_enqueue_style( ‘flat-bootstrap’, get_stylesheet_uri() );”

    This means that “style.css” is ALWAYS loaded from my child-theme (because of get_stylesheet_uri()) . Shouldn’t it be “get_template_directory()” instead? Or am I getting something wrong?


  • Hi Tim. I’m a software developer but completely unfamiliar with WP. I have a friend who is using WP and your theme, and she wants to make the main menu a dropdown. I’ve tried to navigate through the WP backend but I can’t determine if the theme itself isn’t designed to support a dropdown menu or if it’s something else. I know this is a really stupid question but my lack of knowledge of WP really makes something this simple rather confusing.

    • I have been following Bootstrap 4 closely. There are of course MASSIVE changes to even the core grid system, the spacing, etc. I have been working on another major version update to Flat Bootstrap (v2.0) that still uses Bootstrap 3. I’d release that first and then some bug fixes and possibly some minor enhancements. I’d LOVE to use the new Bootstrap v4 “flexbox”, but IE9 doesn’t support that. Also, its still in Beta and users of my theme have probably built page content off of v4. So there are major decisions to be made and major code updates required. I think I will need to leave the existing Flat Bootstrap at v2.x and release a separate version of it that uses Bootstrap v4. That would allow users to chose if/when they move up, but also then creates confusion and I lose download history, ratings, etc.

  • Hi,

    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 ?


    • 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).

  • 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)

  • 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.

  • 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’ );


    • 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.

    • I have a brand-new version 2.0 that I’ve been working on, but I have gotten super busy at my day job and haven’t been able to get through all the testing that I want to do on it. Are you most interested in updating the actual Bootstrap code itself to the latest version? I could consider a smaller “dot release” with that in it.

  • Hi Tim, I can’t figure out how to add comments to the bottom of each post in my Pratt theme even though I click on Allow Comments. I’ve tried adding Discus, but that code doesn’t work either. What am I doing wrong?

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