Jump to content

Bootstrap 4 Minimal site profile

Recommended Posts


1 hour ago, cyberderf said:

How can I install this bootstrap profile over it?

The short answer is that you can't. The long one is that ProcessWire site profiles are not like themes you can just simply replace. You need to refactor your current template files. Or am I misunderstanding your question perhaps?

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I just had a look at the template files: What’s the point in the numerous „row“ and included „class=‚col-xs-12‘“-Containers in the template files? They can be skipped altogether.

Also the duplicating of the navigation for displaying a mobile navigation is not really state-of-the-art... bootstrap provides a mobile nav solution right out of the box...

Keep it simple! Cheers!

Link to comment
Share on other sites

  • 2 months later...
  • 2 years later...

@flydev 👊🏻 Is pwbs4 minimal profile still compatible with PW 3.0.148? I would love to test Bootstrap4 Carousel in PW. I am getting Syntax error on a fresh PW installation.

SQLSTATE[42000]: Syntax error or access violation: 1067 Invalid default value for 'created'
SQLSTATE[42000]: Syntax error or access violation: 1067 Invalid default value for 'created'
SQLSTATE[42S02]: Base table or view not found: 1146 Table 'pw-bootstrap4minimal.modules' doesn't exist


  • Like 1
Link to comment
Share on other sites

Finally, I rebuilt the profile and updated it to the latest version of Bootstrap 4.4.1. I Also updated the bsRender* helpers functions, removed the Bower dependency and added the possibility (as example) to minify and bundle assets for releasing the website in production.

With $config->debug set to true, you will want to work with asset files in site/assets/dev/src, and when ready, you will launch a terminal in this same directory and type yarn build to minify, concat and bundle assets, then set $config->debug to false to see the website with the assets minified.

  • Thanks 1
Link to comment
Share on other sites

@flydev 👊🏻 Thanks for that PW Bootstrap profile.

I get errors with yarn build though:


D:\laragon\www\pwbs\site\assets\dev>yarn build
yarn run v1.21.1
$ yarn build-css && yarn build-js && yarn bundle && copyfiles --flat ./build/js/bundle.min.js ../static/js/ && copyfiles --flat ./css-dist/styles.min.css ../static/css/ && copy
files --flat ./src/css/main.css ../static/css/
$ sass ./src/sass/styles.scss src/css/styles.css && css-minify --dir ./src/css
D:\laragon\www\pwbs\site\assets\dev\css-dist\main.min.css 生成成功!
D:\laragon\www\pwbs\site\assets\dev\css-dist\styles.min.css 生成成功!
$ uglifyjs ./src/js/scripts.js -c -m -o ./build/js/scripts.min.js
    throw err;

Error: ENOENT: no such file or directory, open './build/js/scripts.min.js'
    at Object.openSync (fs.js:440:3)
    at Object.writeFileSync (fs.js:1265:35)
    at run (D:\laragon\www\pwbs\site\assets\dev\node_modules\uglify-js\bin\uglifyjs:286:12)
    at Object.<anonymous> (D:\laragon\www\pwbs\site\assets\dev\node_modules\uglify-js\bin\uglifyjs:172:5)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11 {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: './build/js/scripts.min.js'
error Command failed with exit code 1.


I don't see a build folder anywhere. Where is that supposed to be? Is that the static folder?

Also, in package.json, what are these hard-coded paths?


"rename": "node -e \"require('fs').rename('/www/sites/pwbs4/wwwroot/site/assets/dev/build/js/jquery.min.js', './build/js/1-jquery.min.js', function(err) { if (err) console.log(err); console.log('jQuery File renamed!') })\"",


  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...
On 6/17/2016 at 5:55 PM, flydev 👊🏻 said:

@pwired :   I will send an email to @kongondo about processwireshop.pw! Thanks for suggesting that.


A small trick to make the navbar/dropdown working on mouseover instead of click event:

In js/script.js add :

    $('ul.nav li.dropdown').hover(function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200);
    }, function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeOut(200);

This works on the first level of dropdowns but not with the second levels. In fact, even a click does not open level two of dropdowns. Any ideas what can be done. Thanks.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By rafaoski
      This profile can be used as a business card or very simple blog.
      Requires the latest version processwire 3.0.101 !!!
      Milligram Site Profile For Processwire 3x with include functions like:
      wireIncludeFile | wireRenderFile
      Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
      Live Example
      CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )

      If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.
      Basic example to Debian and Ubuntu based Linux distributions:
      curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs
      See more installation options LINK
      npm is installed with Node.js just check in linux terminal like below:
      node -v
      npm -v
      Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
      proxy: 'http://localhost/mix/', to your installation processwire folder like:
      proxy: 'http://localhost/your-processwire-installation-folder/',
      Next install npm packages in your templates folder with command npm install
      Now, boot up the dev server npm run watch, and you're all set go!
      On completion, use the command npm run production to build styles and scripts in the dist folder
      Simple Usage ( Basic Command )
      Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js )
      Folder With all SCSS files is inside templates/src/scss
      All build styles and scripts is inside the ( dist ) folder
      Laravel Mix
      Feather Icons
      Web Font Loader
      Verlok Lazy Load
      Cookie Consent
    • By MateThemes
      Hello everyone!
      I use Ryan's site profile blog for my new website. Everything works great, but i am not able to change the url of the blog categories. Currently the url is root_url/categories. My client wants the url root_url/news/categories. 
      If change the url in the tab url from /categories to news/categories Processwire change it to news-categories!
      How can I change that or can I change it in the php file too?
      Thanks for your help for a beginner!
    • By Marcel
      Hey all,
      I want to customize the mywebsite/processwire/profile page. It's almost all good but I want to get rid of the sections 'Admin Theme' and 'Language' so that the user can just set a new password. (see image)
      Do I have to modify the admin template or how can I do that? Because when I go tree>Admin>Profile there are no fields to add or remove.
      Or where can I find the php file?
      I would appreciate your help.

    • By Marcel
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
    • By karian
      Hi, based on the work of @microcipcip and @gebeer  (see their posts here and here), I put together a Processwire + React boilerplate (profile).
      Github repo: https://github.com/lapico/process-react

  • Create New...