--- title: Theme Preview title_extention: Preview Bootstrap theme for J1 Template tagline: Explore Current Styles date: 2023-09-21 #last_modified: 2023-01-01 description: > J1 Template is a Bootstrap V5 website template for the static site generator Jekyll and offers various unique functionalities compared to other themes and templates for Jekyll. Themes for Bootstrap are used to customize the appearance of a website based on the basic rules and definitions of Bootstrap's CSS styles. keywords: > Jekyll, JekyllOne, Theme, User Guide, Tool, YAML, Reference categories: [ Previewer ] tags: [ Theme, Bootstrap ] image: path: /assets/images/modules/attics/themes-1920x1280-bw.jpg width: 1920 height: 1280 tts: true comments: false regenerate: false permalink: /pages/public/tools/previewer/current_theme/ resources: [ animate, bmd, rouge ] resource_options: - toccer: collapseDepth: 4 - 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: // Attribute settings for section control // :navbars: true :buttons: true :buttons_active: true :buttons_disabled: true :buttons_outline: true :buttons_dropdown: true :buttons_flat: false :buttons_sizes: true :buttons_pulsed: true :buttons_blocklevel: true :selections: true :selections_checkboxes: true :selections_radio_buttons: true :selections_switches: true :fab: true :fab_raised: true :fab_pulsed: true :fab_mini: true :fab_mini_raised: true :fab_colors: true :fab_disabled: true :typography: true :typography_headings: true :typography_blockquotes: true :tables: true :forms: true :forms_bootstrap: false :navs: true :navs_tabs: true :navs_pills: true :navs_breadcrumbs: true :navs_pagination: true :indicators: true :indicators_alerts: true :indicators_badges: true :scrollbars: false :progress: true :progress_basic: true :progress_contextual_alternatives: true :progress_multiple_bars: true :progress_striped: true :progress_animated: true :lists: true :cards: true :cards_simple: true :cards_image: false :dialogs: true :dialogs_modals: true :dialogs_popovers_tooltips: true // Set (local) page attributes here // ----------------------------------------------------------------------------- // :page--attr: // Load Liquid procedures // ----------------------------------------------------------------------------- {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%} // Load page attributes // ----------------------------------------------------------------------------- {% include {{load_attributes}} scope="global" %} // Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [role="dropcap"] J1 Template themes are used for multifunctional Bootstrap V5 websites to create fully responsive web pages. The Template system offers various unique functionalities compared to other Jekyll themes and templates. mdi:clock-time-five-outline[24px, md-gray mt-4 mb-5 mr-2] *15-30 Minutes* to read // Include sub-documents (if any) // ----------------------------------------------------------------------------- ++++
++++ Bootstrap themes are used to customize the appearance of a website founded on the basic rules and definitions of Bootstrap's CSS styles. The use or change of a theme does not alter the *functionality* of the underlying Bootstrap framework but modifies, for example, the color scheme, fonts, or font sizes. ifeval::[{navbars} == true] [role="mt-5"] == Navbars A navbar is an elementary page element, usually integrated at the top of your page for navigation. Bootstrap offers many navigation functions that are minimized on smartphones and thus always remain easy to use. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--components-navbar}[Bootstrap Docs {char-emdash} Navbar, {browser-window--new}] Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from the navbar light class `.navbar-light` for use with light background colors, or the navbar dark class `.navbar-dark` for dark background colors. Then, customize with the background utilities `.bg-*`. ++++
++++ [role="mt-5"] .Example HTML code for NAV bars [source, html] ---- ---- endif::[] ifeval::[{buttons} == true] [role="mt-5"] == Buttons Buttons are important visual anchors that encourage visitors to click on them to call up to click on certain pages and offers on a website. Well-designed buttons are usable instead of simple text links. With the use of buttons, a higher visiting rate of important pages of a site is achievable. The Bootstrap framework offers different buttons out of the box, which is sufficient for most use cases. Buttons are suitable for the following HTML elements: * Anchor links (anchors) * Form buttons (input) * General buttons (button) Defining a standard button in Bootstrap is very simple: assign the base CSS class for buttons `.btn` to an HTML element. The following sections describe the different types of available buttons and how they are to be defined. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--components-buttons}[Bootstrap Docs {char-emdash} Buttons, {browser-window--new}] ifeval::[{buttons_active} == true] [role="mt-4"] === Active buttons Active buttons will appear with a darker background and border. If pressed, a *ripple* effect is shown for feedback. ++++
++++ [role="mt-5"] .Example HTML code for Buttons [source, html] ---- ---- endif::[] ifeval::[{buttons_disabled} == true] [role="mt-4"] === Disabled buttons Buttons look *inactive* by adding the *disabled* boolean attribute to any ` ++++ [role="mt-5"] .Example HTML code for disabled Buttons [source, html] ---- ---- endif::[] ifeval::[{buttons_outline} == true] [role="mt-4"] === Outline buttons In need of a button, but not a hefty background color they bring? Replace the default modifier with the button outline classes `.btn-outline-*` to remove all background images and colors on any button. ++++
++++ [role="mt-5"] .Example HTML code for outline Buttons [source, html] ---- ---- endif::[] ifeval::[{buttons_dropdown} == true] [role="mt-4"] === Dropdown buttons In need of a button having a little menu, buttons with a (nested) *dropdown* (menu) can be used. ++++
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
++++ [role="mt-5"] .Example HTML code for a group of Buttons [source, html] ----
Dropdown link Dropdown link
---- endif::[] ifeval::[{buttons_flat} == true] [role="mt-4"] === Flat buttons *Flat* buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but *hightlighted* on mouse *hover* and *focussed* on press. ++++
++++ [role="mt-5"] .Example HTML code for flat Buttons [source, html] ---- ---- endif::[] ifeval::[{buttons_sizes} == true] [role="mt-4"] === Button sizes Beside the *default* size, small and large buttons are available. ++++
++++ [role="mt-5"] .Example HTML code for Button sizes [source, html] ---- ---- endif::[] ifeval::[{buttons_pulsed} == true] [role="mt-4"] === Pulsed button Draw attention to a button, e.g for a *recommended* action. ++++
++++ [role="mt-5"] .Example HTML code for a pulsed Button [source, html] ---- ---- endif::[] ifeval::[{buttons_blocklevel} == true] [role="mt-4"] === Block level button Create responsive stacks of full-width *block buttons* like those in BS@4 with a mix of *display* and *gap* utilities. By using *utilities* instead of button specific classes, you have much greater control over spacing, alignment, and responsive behaviors. ++++
++++ [role="mt-5"] .Example HTML code for block level Buttons [source, html] ----
---- endif::[] endif::[] ifeval::[{selections} == true] [role="mt-5"] == Selections J1 Template support two *selection* elements: checkboxes and radio buttons. These selection elements *replace* the default Bootstrap **toggle**-buttons for a better *style*. ifeval::[{selections_checkboxes} == true] [role="mt-4"] === Checkboxes Checkboxes are used if you want users to select *any* number of options from a list of *preset* (available) options. ++++
++++ [role="mt-5"] .Example HTML code for Checkboxes [source, html] ----
---- endif::[] ifeval::[{selections_radio_buttons} == true] [role="mt-4"] === Radio buttons Radio buttons are used if you want to *limit* users to just *one* selection from a list of *preset* (available) options. ++++
++++ [role="mt-5"] .Example HTML code for Radio Buttons [source, html] ----
---- endif::[] ifeval::[{selections_switches} == true] [role="mt-4"] === Switches You can use an *alternative* to standard J1 checkboxes: the Material Design styled element *switch*. Switches behave the same as checkboxes to want users to select *any number* of options from a list of *preset* (available) options. ++++
++++ [role="mt-5"] .Example HTML code for Switches [source, html] ----
---- endif::[] ifeval::[{fab} == true] [role="mt-4"] === Floating Action Button (FAB) Floating Action Buttons are adopted navigation elements from mobile devices (Android) but are used today quite often for web pages as well. Floating action buttons (FABs) for the web typically provide *additional* actions for a page, for example, in-page navigation. mdi:bootstrap[18px, mdi-md-deep-purple-400] https://material.io/components/buttons-floating-action-button/android#using-fabs[Google Material Design {char-emdash} Floating action buttons, {browser-window--new}] ++++
++++ [role="mt-5"] .Example HTML code for a Floating Action Button [source, html] ---- ---- ifeval::[{fab_raised} == true] ==== Raised FAB To put a 3D effect on floating action buttons, buttons can be *raised* by adding the additional CSS classes raised `raised-zX`. J1 supports 25 levels of raising HTML elements ranging from 0 to 24. ++++
++++ [role="mt-5"] .Example HTML code for raised FABs [source, html] ---- ---- endif::[] ifeval::[{fab_pulsed} == true] ==== Pulsed FAB Draw *attention* to floating action buttons (FAB) with this subtle but captivating effect. ++++
++++ [role="mt-5"] .Example HTML code for a pulsed FAB [source, html] ---- ---- endif::[] ifeval::[{fab_mini} == true] ==== Mini FAB A smaller sized, *mini* floating action button (FAB) is also available. ++++
++++ [role="mt-5"] .Example HTML code for a Mini FAB [source, html] ---- ---- endif::[] ifeval::[{fab_mini_raised} == true] ==== Mini FAB raised Mini FAB buttons can be *raised* as well by adding the the additional CSS classes raised `raised-zX`. J1 supports 25 levels of raising HTML elements ranging from 0 to 24. ++++
++++ [role="mt-5"] .Example HTML code for a raised mini FAB [source, html] ---- ---- endif::[] ifeval::[{fab_colors} == true] ==== Colors For floating action buttons (FAB), all Bootstrap button *color classes* can be applied. ++++
++++ [role="mt-5"] .Example HTML code for colored FAB Buttons [source, html] ---- ---- endif::[] ifeval::[{fab_disabled} == true] ==== Disabled FAB FAB Buttons look inactive by adding the `disabled` boolean attribute to the ` ++++ [role="mt-5"] .Example HTML code for disabled FAB Buttons [source, html] ---- ---- ++++
++++ endif::[] endif::[] ifeval::[{typography} == true] [role="mt-5"] == Typography Typography is a feature of Bootstrap for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much more. The base for all typography features is the default *font family*. J1 is using *Roboto* for the default font at a font size of *16px*. This setting is different from the standard Bootstrap configuration using the font family of *Helvetica* for the default. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--content-typography}[Bootstrap Docs {char-emdash} Typography, {browser-window--new}] ifeval::[{typography_headings} == true] [role="mt-4"] === Headings HTML headings provide valuable information by highlighting important topics and the structure of the document. The HTML5 standard offers six levels of heading tags, ranging from

through

. The lower the heading level, the higher its importance. Therefore

tag defines the most important heading, whereas the

tag defines the least important heading in a document. ++++

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 3 with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

++++ endif::[] ifeval::[{typography_blockquotes} == true] [role="mt-4"] === Blockquotes The HTML element `
` specifies a section with content quoted from another source. Blockquotes are generally displayed with indented left and right margins, along with a little extra space added above and below. For Bootstrap, are more complex styling of cites is available with the blockquote elements `
` respectively the additional CSS class for blockquote elements `.blockquote`. ++++

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in history
++++ endif::[] endif::[] ifeval::[{tables} == true] [role="mt-5"] == Tables Creating a design for tables is challenging. The approach used by J1 Template is based on pure CSS on top of the classic Bootstrap styles for simplicity and portability to be viewed best on all devices and browsers. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--content-tables}[Bootstrap Docs {char-emdash} Tables, {browser-window--new}] ++++
Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content
++++ endif::[] ifeval::[{forms} == true] [role="mt-5"] == Forms For collecting structured data, forms are essential. So-called Web forms, in short forms, are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is sent, e.g., to a web server for processing. Here are some examples to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more. Be sure to use an appropriate type attribute on all inputs (e.g., email for the email address or the number for numerical information) to take advantage of newer input controls like email verification, number selection, and more. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--components-forms}[Bootstrap Docs {char-emdash} Forms, {browser-window--new}] ++++
We'll never share your email with anyone else.
++++ Textual form controls-like inputs ``, selects ` ++++ For *file* inputs, swap the form control class `.form-control` to the form control file class `.form-control-file`. ++++
++++ ++++
++++ ifeval::[{forms_bootstrap} == true] [role="mt-4"] === Bootstrap Forms ++++
We'll never share your email with anyone else.
Radio buttons
Checkboxes
Switches
Ranges
++++ [role="mt-4"] === Bootstrap Inputs ++++
Success! You've done it.
Sorry, that username's taken. Try another?
$ .00
++++ endif::[] endif::[] ifeval::[{navs} == true] [role="mt-5"] == Navs Navigation available in Bootstrap shares general markup and styles, from the base navigation class `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. The base NAV CSS style `.nav` is built with a flexbox and provides a strong foundation for building all navigation components. It includes some style overrides, for example to work with lists, link padding for larger hit areas, and basic disabled styling. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--components-navs}[Bootstrap Docs {char-emdash} Navs, {browser-window--new}] ifeval::[{navs_tabs} == true] [role="mt-4"] === Tabs Tabs takes the basic nav from above and adds the tabs class `.nav-tabs` to generate a tabbed interface. Use them to create tabbable regions with the Bootstrap V5 tab JavaScript plugin. ++++

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

++++ endif::[] ifeval::[{navs_pills} == true] [role="mt-4"] === Pills Take that same HTML as Tabs, but use the NAV pills class `.nav-pills` instead. ++++

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

++++ endif::[] ifeval::[{navs_breadcrumbs} == true] [role="mt-4"] === Breadcrumbs Breadcrumbs indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Separators are automatically added in CSS through ::before and content. ++++
  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data
++++ endif::[] ifeval::[{navs_pagination} == true] [role="mt-4"] === Pagination We use a large block of connected links for our pagination, making links hard to miss and easily scalable   --   all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping