Scott Granneman rsgranne

## bootstrap-5-nav-sample.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>

## bootstrap-5-cdn.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Untitled</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

## grannepack-html-vscode-settings.json
// Place your settings in this file to overwrite the default settings
// Last updated 2021-11-08
{
  "breadcrumbs.enabled": true,
  // Color Picker
  "colorHelper.formatsOrder": [
    "hsl",
    "hex",
    "named"
  ],

## bootstrap-4-npm-package.json
{
  "name": "bootstrap-4",
  "version": "1.0.0",
  "description": "Bootstrap 4",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.3.1",

## bootstrap-4-npm.scss
// Override Bootstrap 4 variables below

// Bootstrap 4
@import "../node_modules/bootstrap/scss/bootstrap.scss";

// Site SCSS below

## bootstrap-4-npm.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Untitled</title>

    <link rel="stylesheet" href="/css/main.css">

## scss-user-snippet.json
{
  /*
  // Place your snippets for SCSS here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "log",
    "body": [

## grid-4-column-area-media-queries.scss
// For all @media rules, see http://chnsa.ws/1a5
@media (min-width: 992px) and (max-width: 1199px) {
  // Bootstrap 3 MD Breakpoint ONLY
  .creatures-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-gap: 0 25px;

    .img-4 {
      grid-row: 3 / 4;

## css-user-snippet.json
{
  /*
  // Place your snippets for CSS here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // ${1}, ${2} for tab stops, ${0} for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "log",
    "body": [

## jumbotron-video.css
.jumbotron-video {
  /* must set this so we can use position: absolute next */
  position: relative;
  /* don’t let video exceed the boundaries we set */
  overflow: hidden;
  /* show users more of page below the hero */
  height: 80vh;
}

.jumbotron-video video {
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>Untitled</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
	// Place your settings in this file to overwrite the default settings
	// Last updated 2021-11-08
	{
	"breadcrumbs.enabled": true,
	// Color Picker
	"colorHelper.formatsOrder": [
	"hsl",
	"hex",
	"named"
	],
	{
	"name": "bootstrap-4",
	"version": "1.0.0",
	"description": "Bootstrap 4",
	"main": "index.js",
	"scripts": {},
	"author": "",
	"license": "ISC",
	"dependencies": {
	"bootstrap": "^4.3.1",
	// Override Bootstrap 4 variables below

	// Bootstrap 4
	@import "../node_modules/bootstrap/scss/bootstrap.scss";

	// Site SCSS below
	{
	/*
	// Place your snippets for SCSS here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	"Print to console": {
	"prefix": "log",
	"body": [
	// For all @media rules, see http://chnsa.ws/1a5
	@media (min-width: 992px) and (max-width: 1199px) {
	// Bootstrap 3 MD Breakpoint ONLY
	.creatures-container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-gap: 0 25px;

	.img-4 {
	grid-row: 3 / 4;
	{
	/*
	// Place your snippets for CSS here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// ${1}, ${2} for tab stops, ${0} for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	"Print to console": {
	"prefix": "log",
	"body": [
	.jumbotron-video {
	/* must set this so we can use position: absolute next */
	position: relative;
	/* don’t let video exceed the boundaries we set */
	overflow: hidden;
	/* show users more of page below the hero */
	height: 80vh;
	}

	.jumbotron-video video {