---
title:                                  Bootstrap Themes
title_extention:                        Individual Bootstrap Styles for J1 Template Webs
tagline:                                Individual CSS Styles for J1 Webs

date:                                   2020-11-10
#last_modified:                         2023-01-01

description: >
                                        J1 Template offers various unique functionalities compared to other Jekyll
                                        themes and templates. Bootstrap themes for the J1 Template are based on the
                                        free and Open Source CSS front-end framework Bootstrap of version V5. The
                                        Bootstrap themes for the J1 enable the presentation of different versions
                                        (skins) of the same site using already prepared Bootstrap CSS templates.
keywords: >
                                        open source, free, template, jekyll, jekyllone, web,
                                        sites, static, jamstack, bootstrap,
                                        css, style, theme, skin

categories:                             [ Roundtrip ]
tags:                                   [ Bootstrap, Module, Theme ]

image:
  path:                                 /assets/images/modules/attics/themes-1920x1280-bw.jpg
  width:                                1920
  height:                               1280

regenerate:                             false
permalink:                              /pages/public/learn/roundtrip/themes/

resources:                              [ animate, lightbox, rouge ]
resource_options:
  - attic:
      slides:
        - url:                          /assets/images/modules/attics/themes-1920x1280-bw.jpg
          alt:                          Photo by Clem Onojeghuo on Unsplash
          badge:
            type:                       unsplash
            author:                     Clem Onojeghuo
            href:                       //unsplash.com/@clemono
---

// Page Initializer
// =============================================================================
// Enable the Liquid Preprocessor
:page-liquid:

// Set (local) page attributes here
// -----------------------------------------------------------------------------
// :page--attr:                         <attr-value>
:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images

//  Load Liquid procedures
// -----------------------------------------------------------------------------
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes
// -----------------------------------------------------------------------------
{% include {{load_attributes}} scope="all" %}


// Page content
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[role="dropcap"]
Themes for the J1 Template are based on the Open Source CSS front-end
framework Bootstrap of version V5. The Bootstrap theme feature enables
the presentation of a website using different skins of the same site using
already prepared Bootstrap CSS style sets.

Using a theme results in a uniform appearance for the content in terms of the
overall layout, text, tables, and form elements across all modern web browsers
available on the market. In addition, developers can take advantage of already
defined CSS classes in Bootstrap to customize a layout individually.

mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
*3 Minutes* to read

// Include sub-documents (if any)
// -----------------------------------------------------------------------------
include::{documentdir}/themes_bootstrap.asciidoc[]


[role="mt-5"]
== What next

J1 Template is an excellent base for all types of websites. J1 supports
powerful code highlighting to distinguish different source code elements
visually. Highlighting makes code more readable and easier to understand
by applying different styles to the code.

Programming languages have specific syntax rules and conventions, so code
highlighting is tailored to each language. For example, in a typical
JavaScript syntax highlighting scheme, keywords like *if*, *for*, or
*function* be displayed in one color, while variables and strings are
displayed in another.

The highlighter _Rouge_ is a native Ruby-based themeable syntax highlighter
integrated by J1 Template. The highlighter supports 100+ different languages
and generates HTML output using 256 standard *ANSI* colors displayed by all
current browsers.

[role="mb-7"]
To check the code highlighter J1 Template offers, go for the
link:{url-roundtrip--rouge-hightlighter}[Rouge Code Highlighter].