How to build bootstrap css with jekyll?

Help
3

Hi there, I feel like I am only answering 1/2 of your question, but since I only know one method, I thought this could at least get you started.

There are two ways to access Bootstrap for any site:

  1. Connect to the CDN, which means your website will connect to an external source to connect to the Bootstrap components. This is the easiest method; you can jump into it immediately with Jekyll.
  2. Download the Bootstrap components and use them on your website. This may include a one-time download, modifications to the default Minima site, and more.

I know how to do #1, and it is easy. I will assume you are starting with Jekyll’s default minima theme. I suggest you do as well to verify you get the right results. Once you know what you are doing, go ahead and continue modifying the Minima site, create a site from scratch, or play around with other Jekyll themes.

  1. Override your theme
  2. Among other things, you will now have two new folders: _includes and _layouts
  3. Edit the _includes/head.html file, follow this link. Copy the <!-- Required meta tags --> and <!-- Bootstrap CSS --> elements and paste them into the <head> section of your head.html file.

Note: You must delete the existing utf-8 and viewport lines; more on that viewport line in a moment!

  1. Save head.html
  2. Open the _layouts/default.html and paste the JavaScript you want to use just above the </body> tag. Nothing else should be between the Bootstrap code and that </body> tag. Use the same Bootstrap link from #3 above. I usually copy the line under <!-- Option 1: Bootstrap Bundle with Popper --> and paste that into the default.html file.
  3. Save the default.html file
  4. To test that Bootstrap works, edit the /index.md file and add the sample code to build a navigation bar.
  5. Save index.html
  6. You are done adding Bootstrap, and you can run bundle exec jekyll serve --livereload to see the results, but please read on for more details…

Bootstrap and Minima

Jekyll’s default Minima has custom CSS or SASS/SCSS, like many themes. It is much easier to start from scratch using Bootstrap components.

However, if you want to use the Minima theme and play around with a pre-built site, please see the attached screenshots. Part of setting up Bootstrap was to change the meta viewport, which includes settings incompatible with the Minima theme.

It is easy to fix because you will probably replace the website header with Bootstrap navbar and nav- components. The footer will look a little broken with the columnar layout, but you can easily replace that with the grid systen using <section> and the row and col classes.

01-minima-default
01-minima-default1570×1424 209 KB

02-minima-differences
02-minima-differences1444×1378 129 KB

03-bootstrap-running
03-bootstrap-running1446×1416 198 KB

Next steps

After you are comfortable using Bootstrap with Jekyll, you can move on to adding the files directly to your site, but you probably want to manage the installation of those files for version control. If so, you will probably want to switch to Docker. While I create a video that shows you how to use Docker with GitHub Pages, I have not gone through the process of