Using Bootstrap with Processwire

[tom0360]

Hello all,

Just starting out with ProcessWire and am wondering the best method to get set up to use bootstrap with it. I did already install ProcessWIre and everything is working but was not sure if there was a simple method to include bootstrap.

Thank You.

[horst]

Hi tom0360,

@flydev has created and shared a siteprofile for bootstrap. If this is something for you, you may use it.

But you are totally free in how you define, organize and use your markup, and with wich profile you starts.

[Neveroff]

On the one hand, that's great. On the other, it's for an early alpha release of Bootstrap 4, which I can attest is still buggy. It  is NOT ready for production. I've looked for a good ProcessWire starter siteprofile for the latest stable release of Bootstrap but haven't found anything ideal.

[Gideon So]

Just replace the css file and js file and you have the latest bootstrap 4 version.

Gideon

[rick]

Hi tom0360,

Welcome to the forums!

ProcessWire does not care what you use for your front-end. I have been using Bootstrap for a while. It's setup is just as they explain in their docs.

If you are using 3.3.7 then extract the js, fonts, and css folders to your /site/templates folder. The same with 4.0.0 alpha, except they don't use the fonts folder any longer.

Again, welcome. Feel free to ask any questions. There are a lot of good people here that will help.

[Neveroff]

Yeah, I get that. I've started from scratch, and I can get all the basic Bootstrap installation working fine, but I'm looking to take it to the next level. I'm not a programmer, but with a working example or a halfway decent tutorial I can usually figure things out. My main beef is that, in the case of Bootstrap vis-a-vis ProcessWire, there's a real dearth of pre-existing modules or examples to dynamically generate, say, BS modals or any number of that framework's components (accordions, nav-tabs, etc.). It's pretty easy to hard-code any of those as a one-off, but I'm looking to build templates with repeaters and I'm trying to figure out how to build the tools in PW to make it easy to wire all this up with triggers that match element IDs and whatnot. My chief frustration is that, somewhere between my skill level and the existing how-tos I've referenced, there is a gap that implicitly assumes I already know how to do a lot of this. It's like the 2-step "how to draw an owl" meme (1. draw some circles; 2. now draw the rest of the owl) -- I'm looking to figure out steps 7 and 8 in a 10-step process, if that makes sense.  Anyway, thanks for listening (or reading).

[szabesz]

I recommend this one, have you already seen it?
    •   http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-1/
    •   http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-2/
    •   http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-3/
    •   http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-4/

It is without any particular css examples, but you know yours. Also, it uses Twig but for practicing purposes it should not matter too much.

[Gideon So]

Hi @Neveroff,

I started my journey with this one:

 

Gideon

[gebeer]

@tom0360 If you want more control over bootstrap and compile  it yourself with SASS, I made a site profile which also includes some functions for rendering drop down menu and accordion: https://github.com/gebeer/site-pwbs