Awesome Open Source
Awesome Open Source

b4st – A Bootstrap 4 Starter Theme, for WordPress

Version 3.1

Interested in Bootstrap 5? Then go for

b4st is a simple, Gutenberg-compatible WordPress starter theme loaded with Bootstrap 4 and Font Awesome 5 — using Gulp for preprocessing its SCSS into CSS.

Basic features

  • UNLICENCE (open source).

  • Simple, intuitive, clean code. Theme CSS and JS, functions and loops are organized into different folders.

  • A starter CSS theme – /theme/css/b4st.css, enqueued. (Note: do not put your styles in styles.css, because that is not enqueued.)

  • b4st.css is generated from SCSS using Gulp and NodeJS packages. The SCSS files are also included.

  • Sass (actually, SCSS) preprocessed to b4st.css by Gulp (or you can do your own thing).

  • A starter JS script – theme/css/b4st.js, enqueued.

  • Dimox breadcrumbs (

  • A CSS lock gradually enlarges the typographic font sizes from base 16px to 20px for larger viewports. This affects headers, paragraphs, lists, tables, etc. but not buttons and forms.


  • WordPress.

  • Served from CDN’s:

    • Modernizr 2.8.3
    • jQuery 3.5.1 (full, not slim version)
    • Popper 1.16.1 (needed by Bootstrap popovers, tooltips and collapsed navbar “hamburger” action)
    • Bootstrap 4.5.1 CSS
    • Bootstrap 4.5.1 JS
    • Font Awesome 5.14.0
  • Optional (install these if you want to Gulp-Sass for preprocessing the SCSS files):

    • NodeJS
    • Gulp-CLI – installed globally
    • Node packages for the following devDependencies:
      • autoprefixer
      • cssnano
      • gulp
      • gulp-postcss
      • gulp-sass
      • gulp-sourcemaps

Bootstrap Integration

  • Bootstrap navbar with WordPress menu and search.

  • Bootstrap customized comments and feedback response form.

Gutenberg Compatibility

  • Gutenberg editor stylesheet – into which has been copy-pasted the typography styles from Bootstrap 4’s Reboot CSS (see

  • Since v.3.0, b4st (this theme) has adopted a narrow single-column layout, so that it can make use of Gutenberg’s extra-wide and full width blocks. In the front-end CSS, these are handled by a variation on Andy Bell’s full bleed utility.

    • Optional: If you wish to revert the font-end templates to a two-column (main content plus sidebar) layout, these are still available in the templates but commented out. However, you will also need to remove (or comment out) support for Gutenberg’s extra-wide and full-width comment blocks from the functions, and modify the CSS a little bit.

Child-Theme Friendly

b4st was not originally designed for child theming — it is a starter theme modifying directly. Most people still use it that way. But as child theme-friendliness has been asked for, here it is:

  • Many functions are pluggable.

  • Theme hooks – paired before and after the navbar, post/page main, (optional sidebar) and footer. Parent theme hooks are able to recieve actions from a child theme.

  • Also, the navbar brand, navbar search form and sub-footer “bottomline” are inserted using pluggable hooks. So, a child theme can override these.

  • Documentation on b4st theme hooks can be found in the wiki.

Using the Gulp Task-Runner to Preprocess SCSS into CSS

Since v.3.0, in the theme/ folder there is a scss/ folder containing all the SCSS files that have been used to create the file theme/css/b4st.css.

You can (beautify and) edit that file directly — or you can preprocess the SCSS files using whatever you prefer to use.

In order to use Gulp, you need to:

  1. Install NodeJS.

  2. Install Gulp-CLI globally, using your terminal:

npm install --global gulp-cli
  1. In b4st there are already these files that you need: gulpfile.js, package.json and package-lock.json. Therefore what you need next are the Node packages. To get these, you need to cd to the b4st theme’s root folder and do an npm install in your terminal:
npm install
  1. A few minutes later, with all the node_modules/ installed as local dev dependencies (as you can see from the 'package.json` these are: autoprefixer, cssnano, gulp, gulp-postcss, gulp-sass, and gulp-sourcemaps), you should simply be able to run gulp by typing this in your terminal:

That’s it.

You can stop Gulp by typing ctrl+C (hold the control key down and press the c key).

  1. So, in development, you could have WordPress running on a local server (e.g. BitNami-WordPress, AMPPS, Local by Flywheel, or MAMP + WordPress), and this Gulp setup watching and processing your SCSS into CSS.
    • You may sometimes need to purge your browser cache at the start of a dev/design session, so that it reloads your newer stylesheet.

See the

See the b4st Wiki.

Alternatives To B4st
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Php (298,245
Css (162,562
Theme (43,324
Wordpress (29,680
Bootstrap (28,756
Bootstrap4 (28,754
Scss (23,509
Gulp (13,853
Gutenberg (1,484
Navbar (1,481
Starter Theme (575
Fontawesome5 (102
Gulp Sass (26