### Bootstrap Pricing Card Example

Source: https://bootscore.me/documentation/block-patterns

A prebuilt grid of pricing cards inspired by Bootstrap's pricing example. Each tier (Free, Pro, Enterprise) includes features and a call-to-action button.

```html
<div class="card">
  <div class="card-header">
    Free
  </div>
  <div class="card-body">
    <h3 class="card-title">$0/mo</h3>
    <ul class="list-unstyled mt-3 mb-4">
      <li>10 users included</li>
      <li>2 GB of storage</li>
      <li>Email support</li>
      <li>Help center access</li>
    </ul>
    <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
  </div>
</div>
```

```html
<div class="card">
  <div class="card-header">
    Pro
  </div>
  <div class="card-body">
    <h3 class="card-title">$15/mo</h3>
    <ul class="list-unstyled mt-3 mb-4">
      <li>20 users included</li>
      <li>10 GB of storage</li>
      <li>Priority email support</li>
      <li>Help center access</li>
    </ul>
    <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
  </div>
</div>
```

```html
<div class="card">
  <div class="card-header">
    Enterprise
  </div>
  <div class="card-body">
    <h3 class="card-title">$29/mo</h3>
    <ul class="list-unstyled mt-3 mb-4">
      <li>30 users included</li>
      <li>15 GB of storage</li>
      <li>Phone and email support</li>
      <li>Help center access</li>
    </ul>
    <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
  </div>
</div>
```

--------------------------------

### Install Bootscore Parent Theme with Composer

Source: https://bootscore.me/documentation/theme/installation

This command installs the Bootscore parent theme using Composer. It assumes you have Composer installed and configured your project's composer.json file with the necessary repositories and installer paths as described in the 'composer/installers' method.

```bash
composer require bootscore/bootscore
```

--------------------------------

### bs Isotope Shortcode: Masonry Overlay Example

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2606

This shortcode example is for a 'masonry overlay' Isotope grid. It filters Isotope items by selected terms and allows hiding the excerpt.

```shortcode
[bs-isotope-masonry-overlay type="isotope" tax="isotope_category" terms="colorful, colorless" excerpt="false"]
```

--------------------------------

### bs Isotope Shortcode: Equal Height Layout Example

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2150

This example demonstrates setting up an 'equal height' Isotope grid for blog posts filtered by tags. It ensures all cards have the same height, aligning read more links at the bottom.

```html
[bs-isotope-equal-height type="post" tax="post_tag" terms="Lorem, Ipsum, left-sidebar" orderby="title" order="ASC"]
```

--------------------------------

### Composer Configuration for Bootscore Theme Installation

Source: https://bootscore.me/documentation/theme/installation

This JSON configuration is added to your project's composer.json file to enable the installation of WordPress themes and plugins using Composer. It specifies the 'composer/installers' package and configures 'installer-paths' for WordPress theme and plugin directories. It also adds the wpackagist repository for accessing WordPress packages.

```json
{
    "require": {
        "composer/installers": "^2.1"
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://wpackagist.org",
            "only": [
                "wpackagist-plugin/*",
                "wpackagist-theme/*"
            ]
        }
    ],
    "extra": {
        "installer-paths": {
            "wordpress/wp-content/plugins/mu-plugins/{$name}/": ["type:wordpress-muplugin"],
            "wordpress/wp-content/plugins/{$name}/": ["type:wordpress-plugin"],
            "wordpress/wp-content/themes/{$name}/": ["type:wordpress-theme"]
        }
    }
}
```

--------------------------------

### bs Isotope Shortcode: Masonry Layout Example

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2150

This example demonstrates creating a 'masonry' layout for Isotope items, filtered by a custom taxonomy 'isotope_category' using specific term slugs. The masonry layout arranges items in a Pinterest-style grid.

```html
[bs-isotope-masonry type="isotope" tax="isotope_category" terms="colorful, colorless"]
```

--------------------------------

### bs Isotope Shortcode: Search List Example

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2606

This shortcode example displays Isotope items in a search list format. It allows filtering by post type, taxonomy, terms, and includes options to hide excerpt, tags, and categories.

```shortcode
[bs-isotope-search-list type="post" tax="category" terms="Lorem, Ipsum" excerpt="false" tags="false" categories="false"]
```

--------------------------------

### Bootscore Isotope Shortcode Examples

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=25930

Examples of shortcodes used with the Bootscore Isotope plugin for displaying posts and custom post types with filtering capabilities. These shortcodes require category or custom taxonomy IDs for proper functionality.

```html
[bs-isotope-equal-height type="isotope" tax="isotope_category" cat_parent="4"]
[bs-isotope-masonry type="post" tax="category" cat_parent="4"]
[bs-isotope-equal-height type="post" tax="category" cat_parent="ID-OF-CATEGORY-ANIMALS"]
[bs-isotope-equal-height type="isotope" tax="isotope_category" cat_parent="ID-OF-ISOTOPE-CATEGORY-FOOD"]
```

--------------------------------

### Bootstrap Hero Component Examples

Source: https://bootscore.me/documentation/theme/block-patterns

Examples of Bootstrap hero components, including a basic jumbotron and two-column layouts with images and call-to-action buttons. These can be adapted for homepages.

```html
<!-- Basic Jumbotron -->
<div class="jumbotron">
  <h1>Basic jumbotron</h1>
  <p>This is a simple Bootstrap jumbotron, recreated with built-in utility classes.</p>
</div>

<!-- Hero Image Left -->
<div class="row">
  <div class="col-md-6">
    <h2>Hero</h2>
    <p>This is a two column hero with left aligned image and CTA buttons.</p>
    <a href="#" class="btn btn-primary">Button</a>
    <a href="#" class="btn btn-secondary">Button</a>
  </div>
  <div class="col-md-6">
    <!-- Image placeholder -->
    <img src="..." alt="Hero Image">
  </div>
</div>

<!-- Hero Image Right -->
<div class="row">
  <div class="col-md-6">
    <!-- Image placeholder -->
    <img src="..." alt="Hero Image">
  </div>
  <div class="col-md-6">
    <h2>Hero</h2>
    <p>This is a two column hero with right aligned image and CTA buttons.</p>
    <a href="#" class="btn btn-primary">Button</a>
    <a href="#" class="btn btn-secondary">Button</a>
  </div>
</div>
```

--------------------------------

### bs Isotope Shortcode: Equal Height Overlay Example

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2606

This shortcode example is for an 'equal height overlay' Isotope grid. It filters posts based on selected terms and allows hiding the excerpt.

```shortcode
[bs-isotope-equal-height type="post" tax="category" terms="cats, dogs, birds" orderby="title" order="DESC" posts="20" excerpt="false"]
```

--------------------------------

### Isotope Masonry Shortcode Example (WordPress)

Source: https://bootscore.me/documentation/plugins/bs-isotope

An example of a shortcode used for an Isotope masonry layout, attempting to filter by category. This specific usage encountered a PHP notice related to property access on line 93 of `sc-masonry.php`, potentially due to PHP 8.0 compatibility or incorrect data structure.

```shortcode
[bs-isotope-masonry type="post" tax="category" cat_parent="4"]
```

--------------------------------

### Local Google Font Installation CSS - Bootscore

Source: https://bootscore.me/documentation/google-fonts

This CSS code defines the `@font-face` rules for locally installed Google Fonts, such as Montserrat. It specifies font family, style, weight, and the paths to the WOFF2 and WOFF font files, ensuring cross-browser compatibility and compliance with GDPR by not relying on external servers.

```css
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/montserrat-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/montserrat-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
```

--------------------------------

### bs Isotope Shortcode: Product Grid Example

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2606

This shortcode example is specifically for displaying WooCommerce products in an Isotope grid. It allows filtering by product category and other standard Isotope parameters.

```shortcode
[bs-isotope-product type="product" tax="product_cat" terms="featured, sale" orderby="date" posts="10"]
```

--------------------------------

### Update SCSS Imports in Child Theme

Source: https://bootscore.me/documentation/theme/migration

This example shows how to update the `main.scss` file in a child theme to reflect the renaming of Bootscore SCSS files (e.g., `_bscore_custom.scss` to `_bootscore-custom.scss`). It also demonstrates the import structure for new utility files.

```scss
// Child theme's main.scss example

// Import parent theme variables and functions
@import "../../bootscore/scss/functions";
@import "../../bootscore/scss/variables";
@import "../../bootscore/scss/mixins";

// Import Bootscore utilities
@import "../../bootscore/scss/utilities";

// Import Bootscore components (renamed files)
@import "../../bootscore/scss/bootscore-custom";
@import "../../bootscore/scss/bootscore-utilities"; // New utility file example

// Your custom styles
// ...

```

--------------------------------

### Isotope Overlay Shortcode Example (WordPress)

Source: https://bootscore.me/documentation/plugins/bs-isotope

An example of an Isotope shortcode configured for an overlay display, intended to filter posts by a specific category. This usage led to a 'jQuery is not defined' error, indicating a potential issue with JavaScript enqueuing or conflicts with other plugins.

```shortcode
[bs-isotope-equal-height-overlay type="isotope" tax="isotope_category" cat_parent="4"]
```

--------------------------------

### Basic Button Styling

Source: https://bootscore.me/documentation/block-patterns

Simple examples for creating buttons. Links and specific classes need to be edited directly in the HTML view to apply desired styles and behaviors.

```html
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<a href="#" class="btn btn-link">Link Button</a>
```

--------------------------------

### Targeting Specific Product Elements with CSS (CSS)

Source: https://bootscore.me/documentation/theme/woocommerce_add-to-cart=2150

This CSS provides examples of how to target specific product elements for styling. It shows a hardcoded class example (`.post-2107`) and suggests using the `:nth-child()` selector for more dynamic targeting of elements, particularly useful when dealing with lists of products.

```css
.post-2107 {
    background: red;
}

/* Example using nth-child */
.products .product:nth-child(1) {
    /* styles for the first product */
}
```

--------------------------------

### bs Grid Plugin Shortcode Usage

Source: https://bootscore.me/documentation/plugins/bs-grid

This section outlines the basic shortcode for the bs Grid plugin to display items. It serves as a starting point for using the plugin's various display functionalities.

```shortcode
[bs-grid]
```

--------------------------------

### Adjusting Font Path in CSS - Bootscore

Source: https://bootscore.me/documentation/google-fonts

This example shows how to correct the file path for local fonts in CSS when the font files are located in a different directory than expected by the generated CSS. The snippet illustrates changing the `url()` path from `../fonts/` to `../../fonts/` to correctly reference the font files within the theme structure.

```css
url('../../fonts/ 
```

--------------------------------

### BS Isotope Shortcode Usage Example

Source: https://bootscore.me/documentation/plugins/bs-isotope

This snippet demonstrates the correct usage of the 'bs-isotope-equal-height' shortcode for displaying posts with specific filtering and ordering. It contrasts the incorrect usage with the proper syntax, emphasizing the need for attributes like 'type', 'tax', 'orderby', and 'posts' for functionality.

```html
bs-isotope-equal-height type="post" tax="category" orderby="date" posts="4"
```

--------------------------------

### Bootstrap Button with HTML Editing

Source: https://bootscore.me/documentation/theme/block-patterns

This example demonstrates a basic button. The actual link and classes for styling must be edited directly in the HTML view.

```html
<a href="#" class="btn btn-primary">Button</a>
```

--------------------------------

### Apply Container Filter in Archive

Source: https://bootscore.me/documentation/filter-action-hooks

Example of applying the 'bootscore/class/container' filter in the archive template. This showcases the use of the 'location' argument to apply filters to different template files, allowing for context-specific modifications.

```php
<?= apply_filters('bootscore/class/container', 'container', 'archive'); ?>
```

--------------------------------

### Replace Container Class Snippet with Filter

Source: https://bootscore.me/documentation/theme/migration

This PHP code demonstrates replacing a direct call to `bootscore_container_class()` with a flexible filter. This change affects all templates where a container is present, allowing for more dynamic class application.

```php
// Affects all templates where a 'container' is present.
// Replace the entire snippet:
// <?= bootscore_container_class(); ?>
// With the new filter:
// <?= apply_filters('bootscore/class/container', 'container'); ?>

```

--------------------------------

### Customize Content Spacers (PHP)

Source: https://bootscore.me/documentation/filter-action-hooks

These snippets demonstrate how to modify the spacing of content elements using the 'bootscore/class/content/spacer' filter. The first example shows how to apply a uniform spacer class to all content, while the second example illustrates how to conditionally apply a spacer class only on specific archive pages, such as for the 'product' post type.

```PHP
/**
 * Change all content spacers
 */
function change_content_spacer($spacer) {
  return 'my-5 p-5';
}
add_filter('bootscore/class/content/spacer', 'change_content_spacer');
```

```PHP
/**
 * Change content spacer on an archive page of the post type "product"
 */
function change_content_spacer($spacer) {
  if (is_post_type_archive('product')) {
    return 'my-5 p-5';
  }
  return $spacer;
}
```

--------------------------------

### SCSS Card Styling with Prefix Variables

Source: https://bootscore.me/documentation/theme/css-scss-compiler

Achieves the same card styling as the CSS example, but using SCSS syntax with prefixed variables. This approach is beneficial when the Bootstrap prefix has been customized, ensuring compatibility with plugins and block colors.

```scss
.card {
  color: var(--#{$prefix}light);
  background-color: var(--#{$prefix}dark);

  a {
    color: var(--#{$prefix}danger);
  }

  h2 {
    a {
      color: var(--#{$prefix}warning);
    }
  }
}

```

--------------------------------

### Contact Form 7 Phone Number Field Implementation

Source: https://bootscore.me/documentation/plugins/bs-contact-form-7

These examples demonstrate how to add a phone number input field to a Contact Form 7 form using the `[tel]` shortcode. The first example shows a basic phone number field with a placeholder, while the second example includes a required field marker and a placeholder with international formatting.

```shortcode
[tel tel-834 class:form-control placeholder "Phone number"]
```

```shortcode
[tel* tel-60 class:form-control placeholder “Telefon*”]
```

--------------------------------

### SCSS Media Query and Button Variants for Bootscore

Source: https://bootscore.me/documentation/theme/css-scss-compiler

Demonstrates responsive design and custom button styling using SCSS mixins. The media query examples adjust body styles based on screen size, while `button-variant` creates a custom red button, showcasing the power of SCSS for theme customization.

```scss
@include media-breakpoint-down(md) {
  body {
    color: var(--#{$prefix}danger);
    background-color: var(--#{$prefix}dark);
  }
}

@include media-breakpoint-up(md) {
  body {
    color: var(--#{$prefix}success);
    background-color: var(--#{$prefix}light);
  }
}

.btn-red {
  @include button-variant(#EF4444, #EF4444);
}

```

--------------------------------

### Mega Menu Implementation (PHP)

Source: https://bootscore.me/documentation/widget-menu-positions

This snippet provides a PHP-based approach to implementing a mega menu. It involves using a custom nav-walker or modifying an existing one. This example leverages a widget-based nav-walker and requires adjustments for Bootstrap 5 compatibility.

```php
<?php
/**
 * WP Bootstrap 4 Mega Menu Navwalker (Modified for Bootstrap 5)
 *
 * @package WP-Bootstrap4-MegaMenu-Navwalker
 * @author Jay R. Flores
 * @version 1.0.0
 */

// Modify data-toggle to data-bs-toggle for Bootstrap 5
// In wp_bootstrap4-mega-navwalker.php, line 65:
// Change:
// $attributes .= ' data-toggle="dropdown"';
// To:
// $attributes .= ' data-bs-toggle="dropdown"';

// Ensure your theme's header.php includes the necessary Bootstrap 5 JS and CSS.
// Register this navwalker in your theme's functions.php:
/*
function register_bootstrap5_mega_menuwalker($walker) {
    // Include the file containing the walker class
    require_once get_stylesheet_directory() . '/wp_bootstrap4_mega_navwalker.php';
    return new WP_Bootstrap4_Mega_Navwalker;
}
add_filter('wp_nav_menu_walker', 'register_bootstrap5_mega_navwalker');
*/
?>

```

--------------------------------

### Remove Deleted Hook 'after_primary'

Source: https://bootscore.me/documentation/theme/migration

This PHP snippet illustrates the removal of a deleted hook `after_primary`. Developers should check content templates (like page-*.php, single-*.php, etc.) and remove any instances of the `<?php bs_after_primary(); >` function call. This also applies to Isotope CPT if used.

```php
// Affects content templates like page-*.php, single-*.php, archive-*.php, category-*.php, search.php etc.
// Open these files and check if the following line exists and delete it:
// <?php bs_after_primary(); >

// If using Isotope CPT, also check and delete it there or download the updated version.

```

--------------------------------

### Display WooCommerce Products with Shortcode and CSS Styling (HTML/CSS)

Source: https://bootscore.me/documentation/theme/woocommerce_add-to-cart=2606

This example demonstrates how to display a limited number of products from a specific category using the WooCommerce shortcode '[products]'. The accompanying CSS targets the first product card displayed for specific styling. This approach is useful for dynamically showcasing products on a page.

```html
<div class="red">
  [products category="chateau-laguiole" limit="4"]
</div>
```

```css
.red .col-md-6:first-child .card {
  background-color: red;
}

.red .col-md-6:first-child .card h2 {
  color: yellow;
}

.red .col-md-6:first-child .card .btn-primary {
  background-color: purple;
  border-color: purple;
}

.red .col-md-6:first-child .card .btn-primary:hover {
  background-color: lime;
  border-color: lime;
}
```

--------------------------------

### Replace Sidebar Offcanvas Class with Filter

Source: https://bootscore.me/documentation/theme/migration

This PHP code shows the replacement of `bootscore_sidebar_offcanvas_class()` with a filter. This change impacts sidebar templates and allows for more dynamic configuration of the offcanvas sidebar's classes.

```php
// Affects sidebar-*.php files.
// Replace the string:
// <?= bootscore_sidebar_offcanvas_class(); ?>
// With the new filter:
// <?= apply_filters('bootscore/class/sidebar/offcanvas', 'offcanvas-lg offcanvas-end'); ?>

```

--------------------------------

### Implement Accordion for Comments in WordPress

Source: https://bootscore.me/documentation/theme/introduction

This example provides guidance on how to implement an accordion for the comments section in a WordPress theme. It suggests adding Bootstrap Accordion classes to `inc/comment-list.php` or creating a custom accordion override in the child theme using JavaScript.

```php
// Potential modification in inc/comment-list.php (not recommended to edit directly)
// Add Bootstrap Accordion classes to comment structure
```

```javascript
// Custom accordion override in child theme
// Example using W3Schools accordion tutorial: https://www.w3schools.com/howto/howto_js_accordion.asp
```

--------------------------------

### Add theme.json for Gutenberg Color Picker in Bootscore v6.0.0

Source: https://bootscore.me/documentation/theme/migration

This code demonstrates how to integrate the new `theme.json` file in Bootscore v6.0.0 to enable compiled colors in the Gutenberg color picker. You need to add the `editor.scss` file to your child theme's SCSS assets.

```php
// Add the new editor.scss file to your child theme’s assets/scss/ folder.
// Example usage in functions.php:
// add_action('enqueue_block_editor_assets', 'bootscore_enqueue_editor_styles');
// function bootscore_enqueue_editor_styles() {
//     wp_enqueue_style('bootscore-editor-styles', get_stylesheet_directory_uri() . '/assets/scss/editor.scss', array(), wp_get_theme()->get('Version'));
// }
```

--------------------------------

### Assign Local Fonts with SCSS Variables - Bootscore

Source: https://bootscore.me/documentation/google-fonts

This SCSS code demonstrates how to assign the locally installed Google Font to the primary sans-serif font stack used within the Bootscore theme. By updating the `$font-family-sans-serif` variable, the theme will now utilize the locally hosted Montserrat font, ensuring GDPR compliance.

```scss
// Fonts
$font-family-sans-serif: 'Montserrat', sans-serif;
```

--------------------------------

### Add Product Category Thumbnail and Description (PHP/WordPress Hooks)

Source: https://bootscore.me/documentation/theme/woocommerce

This example shows how to potentially add product category thumbnails and descriptions using WordPress actions and functions, likely within a `woocommerce.php` file in a child theme. This approach offers flexibility for customizing category display beyond default theme options.

```php
// Example of using add_action to hook into WooCommerce actions
// This is a conceptual example; actual implementation depends on specific hooks and desired output.
add_action( 'woocommerce_archive_description', 'my_custom_category_description', 15 );

function my_custom_category_description() {
    // Add code here to display thumbnail and description
    // e.g., get_term_meta() to retrieve thumbnail URL and description
    // echo '<img src="' . $thumbnail_url . '" alt="Category Image">';
    // echo '<div class="category-description">' . $description . '</div>';
}
```

--------------------------------

### Display WooCommerce Products with Custom Styling (HTML/CSS)

Source: https://bootscore.me/documentation/theme/woocommerce_add-to-cart=25930

This example demonstrates how to display a specific category of WooCommerce products using a shortcode and then apply custom CSS to style the first product displayed. The CSS selectors target specific elements within the product grid for unique styling.

```html
<div class="red">
  [products category="chateau-laguiole" limit="4"]
</div>

```

```css
.red .col-md-6:first-child .card {
  background-color: red;
}

.red .col-md-6:first-child .card h2 {
  color: yellow;
}

.red .col-md-6:first-child .card .btn-primary {
  background-color: purple;
  border-color: purple;
}

.red .col-md-6:first-child .card .btn-primary:hover {
  background-color: lime;
  border-color: lime;
}

```

--------------------------------

### Basic Action Hook in PHP

Source: https://bootscore.me/documentation/filter-action-hooks

Demonstrates how to add custom content to a WordPress action hook. Requires a unique function name, the action hook name, and an echo statement for output. This basic example applies to all instances of the hook.

```php
<?php do_action( 'bootscore_before_masthead' ); ?>
```

```php
/**
 * Add an alert message before the masthead.
 */
function add_alert_before_masthead() {
  echo '<div class="alert alert-danger" role="alert">This is an important message!</div>';
}
add_action('bootscore_before_masthead', 'add_alert_before_masthead');
```

--------------------------------

### Apply Container Filter in Header

Source: https://bootscore.me/documentation/filter-action-hooks

Example of applying the 'bootscore/class/container' filter specifically in the header template. This demonstrates how the 'location' argument can be used to target specific parts of the theme for customization. The filter's output is typically a CSS class string.

```php
<?= apply_filters('bootscore/class/container', 'container', 'header'); ?>
```

--------------------------------

### bs Isotope Shortcode: Equal Height with Isotopes

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2150

This example shows how to use the 'equal height' layout for 'isotope' post types, filtered by a custom taxonomy 'isotope_category' using a parent term ID.

```html
[bs-isotope-equal-height type="isotope" tax="isotope_category" terms_parent="111"]
```

--------------------------------

### Bootstrap Grid Column Classes

Source: https://bootscore.me/documentation/block-patterns

Examples of Bootstrap grid column classes for creating responsive layouts. These classes can be applied to group blocks in the Advanced tab to define column widths for different screen sizes.

```html
<!-- 3/3/3/3 column layout -->
<div class="col-md-6 col-lg-3"></div>
<div class="col-md-6 col-lg-3"></div>
<div class="col-md-6 col-lg-3"></div>
<div class="col-md-6 col-lg-3"></div>
```

```html
<!-- 6/6 column layout -->
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
```

```html
<!-- 4/8 column layout -->
<div class="col-lg-4"></div>
<div class="col-lg-8"></div>
```

```html
<!-- 8/4 column layout -->
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
```

--------------------------------

### Enable Cart Page in Bootscore v6.0.0

Source: https://bootscore.me/documentation/theme/migration

This snippet shows how to enable the cart page in Bootscore v6.0.0 if the AJAX cart is disabled by a filter. It requires an additional filter to be set.

```php
add_filter('bootscore/skip_cart', '__return_false');
```

--------------------------------

### Replace Main Column Class with Filter

Source: https://bootscore.me/documentation/theme/migration

This PHP snippet shows the replacement of `bootscore_main_col_class()` with a filter for greater flexibility. This change impacts content templates and allows dynamic modification of the main column's classes.

```php
// Affects all content templates like page-*.php, single-*.php, archive-*.php, category-*.php, search.php etc.
// Replace the string:
// <?= bootscore_main_col_class(); ?>
// With the new filter:
// <?= apply_filters('bootscore/class/main/col', 'col'); ?>

```

--------------------------------

### Using WooCommerce Shortcodes for Product Display

Source: https://bootscore.me/documentation/templates

This snippet details how to set up a custom storefront page in WordPress using WooCommerce shortcodes. It involves creating a page, selecting a blank template, and then using shortcodes to display products. This page can then be set as the static homepage in WordPress settings.

```html
Create a page and choose “Blank with container” or “Blank without container”.
Fill site with content and use WooCommerce shortcodes https://docs.woocommerce.com/document/woocommerce-shortcodes/ to display products or use Gutenberg blocks https://docs.woocommerce.com/document/woocommerce-blocks/.
Go in Backend Settings > Reading > choose A static page > Homepage: select your page.
```

--------------------------------

### CSS Card Styling with Bootstrap Variables

Source: https://bootscore.me/documentation/theme/css-scss-compiler

Applies custom styles to card elements using Bootstrap's CSS variables. This example demonstrates how to set the text color, background color, and link colors within a card, leveraging the theming capabilities provided by Bootstrap variables.

```css
.card {
  color: var(--bs-light);
  background-color: var(--bs-dark);
}

.card a {
  color: var(--bs-danger);
}

.card h2 a {
  color: var(--bs-warning);
}

```

--------------------------------

### Update Child Theme Enqueue Script for Assets Folder

Source: https://bootscore.me/documentation/theme/migration

This code snippet demonstrates how to update the enqueue script in a child theme to reflect the new file structure where SCSS, JS, and image assets are moved into an 'assets' folder. It ensures that compiled CSS is correctly loaded from '/assets/css/main.css'.

```php
<?php
/**
 * Enqueue scripts and styles.
 */
function bootscore_child_enqueue_styles() {
    // Enqueue parent style
    wp_enqueue_style( 'bootscore', get_template_directory_uri() . '/style.css' );

    // Enqueue child styles
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'bootscore' ), wp_get_theme()->get('Version') );

    // Enqueue compiled CSS from the new assets folder
    wp_enqueue_style( 'bootscore-child-main-css', get_stylesheet_directory_uri() . '/assets/css/main.css', array(), filemtime( get_stylesheet_directory() . '/assets/css/main.css' ) );

    // Enqueue scripts
    wp_enqueue_script( 'bootscore-child-js', get_stylesheet_directory_uri() . '/assets/js/main.js', array(), filemtime( get_stylesheet_directory() . '/assets/js/main.js' ), true );

    // If Google fonts are installed, move the 'fonts' folder into 'assets'
    // Example: wp_enqueue_style( 'google-fonts', 'path/to/assets/fonts/your-font.css' );
}
add_action( 'wp_enqueue_scripts', 'bootscore_child_enqueue_styles' );
?>

```

--------------------------------

### Google Tag Manager Setup for Dark Mode Events

Source: https://bootscore.me/documentation/plugins/bs-dark-mode

This outlines the steps to configure Google Tag Manager (GTM) to track dark mode switch interactions without direct JavaScript modification. It involves creating click triggers for different states of the dark mode switch and setting up GA4 Event tags to send custom event data to Google Analytics. This method is recommended for its maintainability and compatibility with modern GA versions.

```plaintext
1. Enable the Click ID and Click Classes variables in the Variables link in the sidebar of GTM (“Configure” button under Built-In Variables and select them).
2. Go to Triggers and click on New. Click on Trigger Configuration and then select All Elements under the Click section. Select the “Some Clicks” radio button and add two fields to match the items below. Repeat this step once more for the second set of triggers.
`Click ID ‘EQUALS’ dark-mode` and  
`Click Classes ‘EQUALS’ form-check-input btn-toggle position-relative active`
`Click ID ‘EQUALS’ dark-mode` and  
`Click Classes ‘DOES NOT EQUAL’ form-check-input btn-toggle position-relative active`
Name the triggers whatever is easiest for you to remember. Mine are `Clicks – Dark Mode Switch Off` and `Clicks – Dark Mode Switch On`.
3. Add the Tags as GA4 Events and attach the above triggers to each one (be sure to use your GA4 Measurement ID as the Configuration Tag). The Event Name is what gets sent to Analytics, so name them to make it easier for yourself. I named my events `dark_mode_switch_dark` and `dark_mode_switch_light` to indicate which one was switched on — easy enough to tell in Analytics.
4. Go to Analytics and create a custom dimension to be able to save these new events. Without the custom dimension, you’ll only be able to see them in the Realtime overview. Simply name it what you want and input the event name from step 3 as the Event Parameter. Do it for both events.
```

--------------------------------

### Bootscore SCSS Compiler Detailed Error

Source: https://bootscore.me/documentation/theme/css-scss-compiler

This code snippet shows an example of a detailed error message from the Bootscore SCSS compiler when developer mode is enabled. It helps pinpoint the exact location (file and line number) of syntax errors within your SCSS files, facilitating debugging.

```text
Bootscore SCSS Compiler - Caught exception:

unclosed block: failed at `` /Applications/MAMP/htdocs/my-new-wordpress/wp-content/themes/bootscore-child/assets/scss/_bootscore-custom.scss on line 32, at column 0
```

--------------------------------

### Isotope Filtering with Categories and Custom Post Types (Shortcode Examples)

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2150

These shortcodes demonstrate how to use the BS Isotope plugin to filter posts and custom post types based on category and custom taxonomy structures. It requires setting up parent and child categories/taxonomies and specifying the parent ID in the shortcode.

```wordpress-shortcode
[bs-isotope-equal-height type="post" tax="category" cat_parent="ID-OF-CATEGORY-ANIMALS"]
```

```wordpress-shortcode
[bs-isotope-equal-height type="isotope" tax="isotope_category" cat_parent="ID-OF-ISOTOPE-CATEGORY-FOOD"]
```

```wordpress-shortcode
[bs-isotope-masonry type="post" tax="category" cat_parent="4"]
```

```wordpress-shortcode
[bs-isotope-equal-height type="isotope" tax="isotope_category" cat_parent="4"]
```

--------------------------------

### Initialize Bootscore.me Cookie Consent Plugin

Source: https://bootscore.me/documentation/plugins/bs-cookie-settings

This JavaScript code snippet initializes the Bootscore.me cookie consent plugin. It listens for the 'load' event to ensure the DOM is ready, obtains the plugin instance, and runs it with a custom configuration object. The configuration includes language settings, autoclear cookies, and page script execution.

```javascript
window.addEventListener('load', function () {

    // obtain plugin
    var cc = initCookieConsent();

    // run plugin with your configuration
    cc.run({
      current_lang: 'en',
      autoclear_cookies: true,
      page_scripts: true,

      languages: {
        'en': {
          consent_modal: {
            title: 'We use cookies!',
            description: 'We use cookies on our website to enhance your browsing experience by remembering your preferences and analyzing site traffic. By clicking "Accept all", you consent to the use of all cookies. However, you can manage your <a data-bs-toggle="modal" href="#bs-cookie-modal">cookie preferences</a> to provide a controlled consent.',
            primary_btn: {
              text: 'Accept all',
              role: 'accept_all'
            },
            secondary_btn: {
              text: 'Reject all',
              role: 'accept_necessary'
            },
            settings_btn: {
              text: 'Manage preferences'
            },
            consent_footer: {
              description: '<a class="small link-secondary text-decoration-none" href="#">Privacy Policy</a> • <a class="small link-secondary text-decoration-none" href="#">Terms & Conditions</a> • <a class="small link-secondary text-decoration-none" href="#">Imprint</a>'
            }
          },

          settings_modal: {
            title: 'Cookie preferences',
            save_settings_btn: 'Save preferences',
            accept_all_btn: 'Accept all',
            reject_all_btn: 'Reject all',
            close_btn_label: 'Close',
            cookie_table_headers: [
              { col1: 'Name' },
              { col2: 'Domain' },
              { col3: 'Expiration' },
              { col4: 'Description' }
            ],
            blocks: [
              {
                title: 'Cookie usage',
                description: 'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#">Privacy Policy</a>.'
              }, {
                title: 'Necessary',
                description: 'These cookies are essential for the proper functioning of our website. Without these cookies, the website would not work properly',
                toggle: {
                  value: 'necessary',
                  enabled: true,
                  readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
                }
              }, {
                title: 'Analytics',
                description: 'These cookies allow the website to remember the choices you have made in the past',
                toggle: {
                  value: 'analytics',     // your cookie category
                  enabled: false,
                  readonly: false
                },
                cookie_table: [
                  {
                    col1: '^_ga',
                    col2: 'google.com',
                    col3: '2 years',
                    col4: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
                    is_regex: true
                  }, {
                    col1: '_gid',
                    col2: 'google.com',
                    col3: '1 day',
                    col4: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
                  }
                ]
              }, {
                title: 'Advertising',
                description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you',
                toggle: {
                  value: 'advertising',
                  enabled: false,
                  readonly: false
                },
                cookie_table: [
                  {
                    col1: '_name',
                    col2: 'xyz.com',
                    col3: '2 weeks',
                    col4: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
                    is_regex: true
                  }, {
                    col1: '_name',
                    col2: 'xyz.com',
                    col3: '3 days',
                    col4: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.'
                  }
                ]
              }
            ]
          }
        }
      }
    });
  });
</script>
```

--------------------------------

### Displaying Products with WooCommerce Shortcodes or Gutenberg Blocks

Source: https://bootscore.me/documentation/theme/templates

To create a custom storefront or display products on a static page, you can use WooCommerce shortcodes or Gutenberg blocks. After creating a page and selecting a blank template, content can be added using these tools. This page can then be set as the site's static front page in the WordPress reading settings.

```html
Use WooCommerce shortcodes (e.g., [products]) or Gutenberg blocks for product display.
Set the page as the static frontpage in WordPress Settings > Reading.
```

--------------------------------

### Customizing Bootstrap SASS Files

Source: https://bootscore.me/documentation/bootscore-child

This guide explains how to customize Bootstrap's SASS files for Bootstrap 5. It involves downloading the Bootstrap source code, modifying the SASS variables and components, and then compiling the SASS into CSS. The compiled `bootstrap.min.css` can then replace the theme's file or be used in a child theme.

```bash
# Download Bootstrap source code
git clone https://github.com/twbs/bootstrap.git
cd bootstrap
# Customize SASS variables and components (e.g., in scss/_variables.scss)
# Compile SASS to CSS
npm install
npm run dist
# The compiled CSS will be in the 'dist/css' directory (e.g., bootstrap.min.css)
```

```css
/* Example of customizing variables (in scss/_variables.scss) */
$primary: #007bff;
$secondary: #6c757d;

/* Example of importing specific components */
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
// ... other components
```

--------------------------------

### Isotope Masonry Overlay Shortcode

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2150

This shortcode creates a masonry-style layout (pinterest-style) for isotope items, using the featured image as a background. Content appears on hover. This configuration filters items by `isotope_category` using specified terms.

```html
[bs-isotope-masonry-overlay type="isotope" tax="isotope_category" terms="colorful, colorless"]
```

--------------------------------

### Change Navbar Breakpoint Classes (PHP)

Source: https://bootscore.me/documentation/theme/filter-action-hooks

These snippets show how to adjust the navbar breakpoint behavior in Bootscore. The first example sets the navbar to expand at the medium breakpoint (md) and hides the toggler on md and up. The second example makes the navbar always collapsed by removing breakpoint classes.

```php
/**
 * Header navbar breakpoint
 */
function header_navbar_breakpoint_class() {
  return "navbar-expand-md";
}
add_filter('bootscore/class/header/navbar/breakpoint', 'header_navbar_breakpoint_class', 10, 2);

/**
 * Header navbar toggler breakpoint
 */
function header_navbar_toggler_breakpoint_class() {
  return "d-md-none";
}
add_filter('bootscore/class/header/navbar/toggler/breakpoint', 'header_navbar_toggler_breakpoint_class', 10, 2);
```

```php
/**
 * Header navbar breakpoint
 */
function header_navbar_breakpoint_class() {
  return "";
}
add_filter('bootscore/class/header/navbar/breakpoint', 'header_navbar_breakpoint_class', 10, 2);

/*
 * Header navbar toggler breakpoint
 */
function header_navbar_toggler_breakpoint_class() {
  return "";
}
add_filter('bootscore/class/header/navbar/toggler/breakpoint', 'header_navbar_toggler_breakpoint_class', 10, 2);
```

--------------------------------

### Basic bs Isotope Shortcode

Source: https://bootscore.me/documentation/plugins/bs-isotope_add-to-cart=2150

This is the most basic shortcode to display an Isotope grid. It defaults to showing 'posts' and does not specify a taxonomy or terms.

```html
[bs-isotope-equal-height]
```

--------------------------------

### Create Responsive Grid Layouts with Gutenberg HTML Block

Source: https://bootscore.me/documentation/theme/templates

Provides a method for creating custom responsive grid layouts using the Gutenberg HTML block with Bootstrap classes. This approach allows for flexible column arrangements (e.g., single, two, or three columns per row) and is recommended for cleaner code and full control.

```html
<div class="row">
    <div class="col-md-6">
        content
    </div>
    <div class="col-md-6">
        content
    </div>
</div>
```

```html
<!-- open row and cols -->
<div class="row">
    <div class="col-md-6">

Gutenberg Block

    </div>
    <!-- close col -->
    <!-- open col -->
    <div class="col-md-6">

Gutenberg Block

    </div>
</div>
<!-- close row and col -->
```

--------------------------------

### Add WooCommerce Checkout Shortcode

Source: https://bootscore.me/documentation/theme/woocommerce_add-to-cart=2606

This snippet demonstrates how to add the default WooCommerce checkout shortcode to a page. This is useful for WC 8.3+ installations where block-based checkout is the default.

```shortcode
[woocommerce_checkout]
```

--------------------------------

### Setting Up Left Sidebar for Shop Page and No Sidebar for Other Pages

Source: https://bootscore.me/documentation/theme/templates

This process involves copying and renaming a specific page template file to 'page.php' in your child theme to apply a left sidebar by default. Then, for pages where a sidebar is not desired, you select the 'No Sidebar' page template via the Quick Edit screen. A plugin can also be used for more granular control over sidebar widget visibility.

```php
1. Copy page-sidebar-left.php from the theme's template directory.
2. Paste it into your child theme's directory.
3. Rename the copied file to page.php.
4. For pages without a sidebar, select the 'No Sidebar' template in the WordPress admin (Pages > Quick Edit).
```

--------------------------------

### Add WooCommerce Cart Shortcode

Source: https://bootscore.me/documentation/theme/woocommerce_add-to-cart=2606

This snippet demonstrates how to add the default WooCommerce cart shortcode to a page. This is useful for WC 8.3+ installations where block-based checkout is the default.

```shortcode
[woocommerce_cart]
```

--------------------------------

### Hide TOC Links by Class

Source: https://bootscore.me/documentation/plugins/bs-toc

This example shows how to hide specific headings from the Table of Contents by adding the 'bs-toc-hide' class to the heading element or a parent div.

```html
<div class="bs-toc-hide">
  <h4>Hidden h4</h4>
  <h5>Hidden h5</h5>
</div>
```

--------------------------------

### Customizing Alert Styles

Source: https://bootscore.me/documentation/block-patterns

Modify alert message styles by changing the class in the block's Advanced tab. For example, changing `alert-info` to `alert-success` will display a green alert.

```html
<div class="alert alert-success" role="alert">
  This is a success alert!
</div>
```

```html
<div class="alert alert-danger" role="alert">
  This is a danger alert!
</div>
```

```html
<div class="alert alert-info" role="alert">
  This is an info alert!
</div>
```

--------------------------------

### Bootstrap Grid Column Classes

Source: https://bootscore.me/documentation/theme/block-patterns

Examples of Bootstrap grid column classes for structuring content within rows. These classes can be applied to group blocks in the Advanced tab to create responsive layouts.

```html
<!-- 3/3/3/3 Columns -->
<div class="col-md-6 col-lg-3">...</div>
<div class="col-md-6 col-lg-3">...</div>
<div class="col-md-6 col-lg-3">...</div>
<div class="col-md-6 col-lg-3">...</div>

<!-- 6/6 Columns -->
<div class="col-lg-6">...</div>
<div class="col-lg-6">...</div>

<!-- 4/8 Columns -->
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>

<!-- 8/4 Columns -->
<div class="col-lg-8">...</div>
<div class="col-lg-4">...</div>
```

--------------------------------

### Replace Sidebar Toggler Class with Filter

Source: https://bootscore.me/documentation/theme/migration

This PHP snippet demonstrates replacing `bootscore_sidebar_toggler_class()` with a filter. This update affects sidebar templates and enhances flexibility for the sidebar toggler button's classes.

```php
// Affects sidebar-*.php files.
// Replace the string:
// <?= bootscore_sidebar_toggler_class(); ?>
// With the new filter:
// <?= apply_filters('bootscore/class/sidebar/button', 'd-lg-none btn btn-outline-primary w-100 mb-4 d-flex justify-content-between align-items-center'); ?>

```