Skip to content

JackieGable/Jekyll-Bootstrap-5-Template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Dec 16, 2022
bf7f86f · Dec 16, 2022

History

2 Commits
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022

Repository files navigation

bootstrap5-template

bootstrap5-template is a basic template repository to create a Bootstrap 5 site using Jekyll on GitHub Pages (or where every you want to host it). The layout is based on the Bootstrap starter template example with a navbar, search box (using lunr.js), and footer. It is intended as a quick starting point for creating new web projects.

Demo: https://thecdil.github.io/bootstrap5-template/

Please note: if you are looking for older bootstrap 4 version, see bootstrap-template.

Get Started

  • Click green "Use this template" button to make a copy of the code in your own repository (alternatively, use Import or manually copy files)
  • Edit _config.yml with your site information
  • In your new repository visit "Settings" > "Pages" to activate GitHub Pages
  • Edit and create pages in the "pages" folder (probably in Markdown). Use each page's yaml front matter to populate the navbar:
    • title will appear as h1 at top of the page content.
    • nav if this option has a value, it will appear in the navbar as link to this page.
    • nav_order navbar items will be sorted using this number.
  • Use "includes" to simplify adding Bootstrap features to Markdown pages (see comments in the "_include/" files for instructions).

See docs/create-website.md for more details.

Customize

  • Tweak base variables in assets/css/custom.scss (text color, link color, container size)
  • Tweak bootstrap theme colors using _data/theme-colors.csv (add a css color in the color column next to the BS color-class to override, or create a new class name. This will generate btn-, text-, and bg- classes.)
  • Add custom CSS to _sass/_custom.scss (content of _sass/_template.scss relates to template components)
  • Use Bootstrap to customize _layouts/ and _includes/template/.

Template Assets

Included in assets/lib folder: