Giter Club home page Giter Club logo

bootstrap5-template's Introduction

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/main.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:

bootstrap5-template's People

Contributors

evanwill avatar

Stargazers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.