Using Bootstrap with Jekyll layouts

This is probably a very basic question, but… after I installed the Bootstrap gem, how do I start using it? Do I have to import it in some way, or do I just start using it?

Have a look at the docs i.e. the github repo which should be linked from the rubygems page

And add a link here so we can see what you see.

The instructions will tell you what to do. You might have to add it to enabled plugins in Gemfile. And the asset might make some css or scss file available for you to import into your css files that get loaded in your head

While I waited for an answer here, I found this SOF answer. I followed the instructions - tho I put @import “bootstrap” in main.scss and not style.scss, whatever that is - but still got this error:

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
                    Error: File to import not found or unreadable: bootstrap. on line 2:1 of stdin >> @import "bootstrap"; ^
             Error: Error: File to import not found or unreadable: bootstrap. on line 2:1 of stdin >> @import "bootstrap"; ^ (edited)

It depends on site. Or maybe you are using an external theme and you are adding Bootstrap to it

You can use main.scss or styles.scss

Make sure to add frontmatter like this.

I’ll see if i can make a mini site with the Bootstrap gem and share that repo

1 Like

I figured it out.

The StackOverflow link helped with figuring out the config change for sass path.

I had to tweak my .scss file to load from the gem.

Here is my repo with screenshot and instructions to run locally

I entered your changed into my directory, and it generated this error:

  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
                    Error: File to import not found or unreadable: bootstrap-5.1.0/assets/stylesheets/bootstrap. on line 2:1 of main.scss >> @import "bootstrap-5.1.0/assets/stylesheets/bootstrap" ^ 
                    ------------------------------------------------
      Jekyll 4.2.0   Please append `--trace` to the `serve` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------
Traceback (most recent call last):
        29: from C:/Ruby27-x64/bin/jekyll:23:in `<main>'
        28: from C:/Ruby27-x64/bin/jekyll:23:in `load'
        27: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/exe/jekyll:15:in `<top (required)>'
        26: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
        25: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
        24: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
        23: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
        22: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
        21: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
        20: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
        19: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `each'
        18: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
        17: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:36:in `process'
        16: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:65:in `build'
        15: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:28:in `process_site'
        14: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:80:in `process'
        13: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:211:in `render'
        12: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `render_pages'
        11: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `each'
        10: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:539:in `block in render_pages'
         9: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:547:in `render_regenerated'
         8: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:63:in `run'
         7: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:84:in `render_document'
         6: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `convert'
         5: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `reduce'
         4: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `each'
         3: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:106:in `block in convert'
         2: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:185:in `convert'
         1: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sassc-2.4.0-x64-mingw32/lib/sassc/engine.rb:50:in `render'
main.scss:2: Error: File to import not found or unreadable: bootstrap-5.1.0/assets/stylesheets/bootstrap. (SassC::SyntaxError)
        on line 2:1 of main.scss
>> @import "bootstrap-5.1.0/assets/stylesheets/bootstrap"
   ^
        28: from C:/Ruby27-x64/bin/jekyll:23:in `<main>'
        27: from C:/Ruby27-x64/bin/jekyll:23:in `load'
        26: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/exe/jekyll:15:in `<top (required)>'
        25: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
        24: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
        23: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
        22: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
        21: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
        20: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
        19: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
        18: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `each'
        17: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
        16: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:36:in `process'
        15: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:65:in `build'
        14: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:28:in `process_site'
        13: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:80:in `process'
        12: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:211:in `render'
        11: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `render_pages'
        10: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `each'
         9: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:539:in `block in render_pages'
         8: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:547:in `render_regenerated'
         7: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:63:in `run'
         6: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:84:in `render_document'
         5: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `convert'
         4: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `reduce'
         3: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `each'
         2: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:106:in `block in convert'
         1: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:182:in `convert'
C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:190:in `rescue in convert': Error: File to import not found or unreadable: bootstrap-5.1.0/assets/stylesheets/bootstrap. (Jekyll::Converters::Scss::SyntaxError)
        on line 2:1 of main.scss
>> @import "bootstrap-5.1.0/assets/stylesheets/bootstrap"
   ^

Wait a minute… I get it. I have to use Ruby 2.7.0!

Nope, still doesn’t work. What am I missing?

Ruby 2 and 3 will work

It looks like using your global jekyll

Make sure to follow the docs

make install

make serve

And if you don’t have make on windows,you can do

	bundle config set --local path vendor/bundle
	bundle install

	bundle exec jekyll serve --trace --livereload

Tried the second way, generates this error:

Unable to load the EventMachine C extension; To use the pure-ruby reactor, require 'em/pure_ruby'
Traceback (most recent call last):
        22: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/bin/jekyll:23:in `<main>'
        21: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/bin/jekyll:23:in `load'
        20: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/exe/jekyll:15:in `<top (required)>'
        19: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
        18: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
        17: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
        16: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
        15: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
        14: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
        13: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
        12: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `each'
        11: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
        10: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:98:in `process'
         9: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:143:in `register_reload_hooks'
         8: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:143:in `require_relative'
         7: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve/live_reload_reactor.rb:3:in `<top (required)>'
         6: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve/live_reload_reactor.rb:3:in `require'
         5: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/em-websocket-0.5.2/lib/em-websocket.rb:3:in `<top (required)>'
         4: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/em-websocket-0.5.2/lib/em-websocket.rb:3:in `require'
         3: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/eventmachine-1.2.7-x64-mingw32/lib/eventmachine.rb:8:in `<top (required)>'
         2: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/eventmachine-1.2.7-x64-mingw32/lib/eventmachine.rb:8:in `require'
         1: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/eventmachine-1.2.7-x64-mingw32/lib/rubyeventmachine.rb:2:in `<top (required)>'
C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/eventmachine-1.2.7-x64-mingw32/lib/rubyeventmachine.rb:2:in `require': cannot load such file -- 2.7/rubyeventmachine (LoadError)

Try without live reload flag

You madman, it actually works! Thank you so, so much!

1 Like

You need an extra gem on Windows to make livereload work and even then you might still have issues

If you wanna try.

Also if you don’t like the flow here you can always add the pieces you need from Bootstrap as CSS and JS files in head.

I have a demo site here that does that.

I don’t know what happens to variables though. Using scss like here might be better for compiling to css that uses your color or whatever overrides