Skip to content

Instantly share code, notes, and snippets.

@martinandersen3d

martinandersen3d/bs4-alerts-html.code-snippets

Created March 14, 2020 16:19
Show Gist options
  • Save martinandersen3d/17c66a9956db30d8549736dceba1ea86 to your computer and use it in GitHub Desktop.
Save martinandersen3d/17c66a9956db30d8549736dceba1ea86 to your computer and use it in GitHub Desktop.
Download ZIP
Visual Studio Code: Bootstrap 4 Snippets for HTML, PHP, BLADE, VUE. Several variations per component.
Raw
bs4-alerts-html.code-snippets
/* ----------------------------------------
Bootstrap 4
HTML, PHP, BLADE snippets
Alerts
042419
---------------------------------------- */
{
"Boostrap 4: Alert": {
"prefix": "bs4-alert",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"alert alert-${1|primary,secondary,success,danger,warning,info,light,dark|}\" role=\"alert\">",
" ${2:Alert text}",
"</div>"
],
"description": "Bootstrap 4: Alert"
},
"Boostrap 4: Alert - Link": {
"prefix": "bs4-alert-link",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"alert alert-${1|primary,secondary,success,danger,warning,info,light,dark|}\" role=\"alert\">",
" <a class=\"alert-link\" href=\"${3:#}\">$2</a>",
"</div>"
],
"description": "Bootstrap 4: Alert - Link"
},
"Boostrap 4: Alert - Closeable": {
"prefix": "bs4-alert-closeable",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\">",
" <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">",
" <span aria-hidden=\"true\">&times;</span>",
" $1",
" </button>",
"</div>"
],
"description": "Bootstrap 4: Alert - Closeable"
},
"Boostrap 4: Alert - Dismissable": {
"prefix": "bs4-alert-dismissable",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"alert alert-${1|primary,secondary,success,info,warning,danger,light,dark|} alert-dismissible fade show\" role=\"alert\">",
" <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">",
" <span aria-hidden=\"true\">&times;</span>",
" <span class=\"sr-only\">Close</span>",
" ${2:Alert text}",
" </button>",
"</div>"
],
"description": "Bootstrap 4: Alert - Dismissable"
}
}
Raw
bs4-badges-html.code-snippets
/* ----------------------------------------
Bootstrap 4
HTML, PHP, BLADE snippets
Badges
042419
---------------------------------------- */
{
"Boostrap 4: Badge": {
"prefix": "bs4-badge",
"scope": "html,php,blade,vue",
"body": [
"<span class=\"badge badge-${1|primary,secondary,success,danger,warning,info,light,dark|}\">$2</span>$0",
],
"description": "Bootstrap 4: Badge"
},
"Boostrap 4: Badge - Pill": {
"prefix": "bs4-badge-pill",
"scope": "html,php,blade,vue",
"body": [
"<span class=\"badge badge-pill badge-${1|primary,secondary,success,danger,warning,info,light,dark|}\">$2</span>$0",
],
"description": "Bootstrap 4: Badge - Pill"
},
}
Raw
bs4-bgroups-html.code-snippets
/* ----------------------------------------
Bootstrap 4
HTML, PHP, BLADE snippets
Button Groups
042419
---------------------------------------- */
{
"Boostrap 4: Button Group": {
"prefix": "bs4-bgroup",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"btn-group\" role=\"group\" aria-label=\"$1\">",
" <a href=\"{4:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$3</button>",
" </a>",
" <a href=\"{6:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$5</button>",
" </a>",
" <a href=\"{8:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$7</button>",
" </a>",
"</div>$0"
],
"description": "Bootstrap 4: Button Group"
},
"Boostrap 4: Button Group - Size": {
"prefix": "bs4-bgroup-size",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"btn-group btn-group-${1|sm,md,lg|}\" role=\"group\" aria-label=\"$1\">",
" <a href=\"{4:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$3</button>",
" </a>",
" <a href=\"{6:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$5</button>",
" </a>",
" <a href=\"{8:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$7</button>",
" </a>",
"</div>$0"
],
"description": "Bootstrap 4: Button Group - Size"
},
"Boostrap 4: Button Group - Dropdown": {
"prefix": "bs4-bgroup-dropdown",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"btn-group\" role=\"group\" aria-label=\"\">",
" <a href=\"{3:#}\">",
" <button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark,link|}\">$2</button>",
" </a>",
" <a href=\"{5:#}\">",
" <button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark,link|}\">$4</button>",
" </a>",
" <a class=\"btn-group\" role=\"group\">",
" <button type=\"button\" id=\"${7:dropdownId}\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark,link|} dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">$6</button>",
" <div class=\"dropdown-menu\" aria-labelledby=\"${7:dropdownId}\">",
" <a class=\"dropdown-item\" href=\"${9:#}\">$8</a>",
" <a class=\"dropdown-item\" href=\"${11:#}\">$10</a>",
" </div>",
" </a>",
"</div>",
],
"description": "Bootstrap 4: Button Group - Dropdown"
}
}
Raw
bs4-breadcrumbs-html.code-snippets
{
/* ----------------------------------------
Bootstrap 4 HTML, PUG, BLADE snippets
Breadcrumb
042419
---------------------------------------- */
"Boostrap 4: Breadcrumb": {
"prefix": "bs4-breadcrumb",
"scope": "html,php,blade",
"body": [
"<nav class=\"breadcrumb\">",
" <a class=\"breadcrumb-item\" href=\"${2:#}\">$1</a>",
" <a class=\"breadcrumb-item\" href=\"${4:#}\">$3</a>",
" <span class=\"breadcrumb-item active\">$5</span>",
"</nav>$0"
],
"description": "Bootstrap 4: Breadcrumb"
},
"Boostrap 4: Breadcrumb - List": {
"prefix": "bs4-breadcrumb-list",
"scope": "html,php,blade",
"body": [
"<ol class=\"breadcrumb\">",
" <li class=\"breadcrumb-item\">",
" <a href=\"${2:#}\">$1</a>",
" </li>",
" <li class=\"breadcrumb-item\">",
" <a href=\"${4:#}\">$3</a>",
" </li>",
" <li class=\"breadcrumb-item active\">$5</li>",
"</ol>$0"
],
"description": "Bootstrap 4: Breadcrumb - List"
},
}
Raw
bs4-displays-html.code-snippets
/*
Bootstrap 4
HTML, PHP, BLADE snippets
DISPLAY UTILITIES
042419
*/
{
"Boostrap 4: Hide Down": {
"prefix": "bs4-hide-down",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"d-none d-${1|sm,md,lg,xl|}-block\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Badge"
},
"Boostrap 4: Hide Up": {
"prefix": "bs4-hide-up",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"d-${1|sm,md,lg,xl|}-none\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Hide Up"
}
}
Raw
bs4-forms-html.code-snippets
{
/*
HTML & PHP SNIPPETS
for Bootstrap 4.3.1
GRID
042619
*/
/* -----------------------------------------
Justify Content Center
*/
"Bootstrap 4: Justify-Content-Center": {
"prefix": "jcc",
"scope": "html,php,blade,vue",
"body": [
"justify-content-center"
],
"description": "Bootstrap 4: Grid - Justify-Content-Center"
},
/* -----------------------------------------
Justify Content Between
*/
"Bootstrap 4: Justify-Content-Between": {
"prefix": "jcb",
"scope": "html,php,blade,vue",
"body": [
"justify-content-between"
],
"description": "Bootstrap 4: Grid - Justify-Content-Between"
},
/* -----------------------------------------
Justify Content Start
*/
"Bootstrap 4: Justify-Content-Start": {
"prefix": "jcs",
"scope": "html,php,blade,vue",
"body": [
"justify-content-start"
],
"description": "Bootstrap 4: Grid - Justify-Content-Start"
},
/* -----------------------------------------
Justify Content End
*/
"Bootstrap 4: Justify-Content-End": {
"prefix": "jce",
"scope": "html,php,blade,vue",
"body": [
"justify-content-end"
],
"description": "Bootstrap 4: Grid - Justify-Content-End"
},
/* -----------------------------------------
Align Items Center
*/
"Bootstrap 4: Align-Items-Center": {
"prefix": "aic",
"scope": "html,php,blade,vue",
"body": [
"align-items-center"
],
"description": "Bootstrap 4: Grid - Align-Items-Center"
},
/* -----------------------------------------
Align Items Between
*/
"Bootstrap 4: Align-Items-Between": {
"prefix": "aib",
"scope": "html,php,blade,vue",
"body": [
"align-items-between"
],
"description": "Bootstrap 4: Grid - Align-Items-Between"
},
/* -----------------------------------------
Align Items Start
*/
"Bootstrap 4: Align-Items-Start": {
"prefix": "jcs",
"scope": "html,php,blade,vue",
"body": [
"align-items-start"
],
"description": "Bootstrap 4: Grid - Align-Items-Start"
},
/* -----------------------------------------
Align Items End
*/
"Bootstrap 4: Align-Items-End": {
"prefix": "jce",
"scope": "html,php,blade,vue",
"body": [
"align-items-end"
],
"description": "Bootstrap 4: Grid - Align-Items-End"
},
/* -----------------------------------------
Flex Center
*/
"Bootstrap 4: Flex Center": {
"prefix": "fc",
"scope": "html,php,blade,vue",
"body": [
"justify-content-center align-items-center"
],
"description": "Bootstrap 4: Grid - Flex Center"
},
/* -----------------------------------------
Container Fluid
*/
"Bootstrap 4: Grid - Container-Fluid": {
"prefix": "contfluid",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"container-fluid\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Container-Fluid"
},
/* -----------------------------------------
Container
*/
"Bootstrap 4: Grid - Container": {
"prefix": "cont",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"container\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Container"
},
/* -----------------------------------------
Row
*/
"Bootstrap 4: Grid - Row": {
"prefix": "row",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Row"
},
/* -----------------------------------------
Column Sized
*/
"Bootstrap 4: Grid - Column": {
"prefix": "col",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"col${1|-,-sm,-md,-lg,-xl|}-${2:1-12}\">",
" ",
"</div>$0"
],
"description": "Bootstrap 4: Grid - Column XS"
},
/* -----------------------------------------
Grid - 3 Columns
*/
"Bootstrap 4: Grid - 3 Columns Centered": {
"prefix": "3col",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${4:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${5:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${6:Content}",
" </div>",
"</div>$0"
],
"description": "Bootstrap 4: Grid - 3 Columns Centered"
},
/* -----------------------------------------
Grid - 2 Columns
*/
"Bootstrap 4: Grid - 2 Columns Centered": {
"prefix": "2col",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:6}\">",
" ${4:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:6}\">",
" ${5:Content}",
" </div>",
"</div>$0"
],
"description": "Bootstrap 4: Grid - 2 Columns Centered"
},
/* -----------------------------------------
Grid - Single Columns
*/
"Bootstrap 4: Grid - 1 Column": {
"prefix": "1col",
"scope": "html,php,blade,vue",
"body": [
"$0<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-sm-${2:6}\">",
" ${3:Content}",
" </div>",
"</div>"
],
"description": "Bootstrap 4: Grid - 1 Column"
}
}
Raw
bs4-grids-html.code-snippets
{
/*
HTML & PHP SNIPPETS
for Bootstrap 4.3.1
GRIDS
042419
*/
/* -----------------------------------------
Justify Content Center
*/
"Bootstrap 4: Justify-Content-Center": {
"prefix": "jcc",
"scope": "html,php,blade",
"body": [
"justify-content-center"
],
"description": "Bootstrap 4: Grid - Justify-Content-Center"
},
/* -----------------------------------------
Justify Content Between
*/
"Bootstrap 4: Justify-Content-Between": {
"prefix": "jcb",
"scope": "html,php,blade",
"body": [
"justify-content-between"
],
"description": "Bootstrap 4: Grid - Justify-Content-Between"
},
/* -----------------------------------------
Justify Content Start
*/
"Bootstrap 4: Justify-Content-Start": {
"prefix": "jcs",
"scope": "html,php,blade",
"body": [
"justify-content-start"
],
"description": "Bootstrap 4: Grid - Justify-Content-Start"
},
/* -----------------------------------------
Justify Content End
*/
"Bootstrap 4: Justify-Content-End": {
"prefix": "jce",
"scope": "html,php,blade",
"body": [
"justify-content-end"
],
"description": "Bootstrap 4: Grid - Justify-Content-End"
},
/* -----------------------------------------
Align Items Center
*/
"Bootstrap 4: Align-Items-Center": {
"prefix": "aic",
"scope": "html,php,blade",
"body": [
"align-items-center"
],
"description": "Bootstrap 4: Grid - Align-Items-Center"
},
/* -----------------------------------------
Align Items Between
*/
"Bootstrap 4: Align-Items-Between": {
"prefix": "aib",
"scope": "html,php,blade",
"body": [
"align-items-between"
],
"description": "Bootstrap 4: Grid - Align-Items-Between"
},
/* -----------------------------------------
Align Items Start
*/
"Bootstrap 4: Align-Items-Start": {
"prefix": "jcs",
"scope": "html,php,blade",
"body": [
"align-items-start"
],
"description": "Bootstrap 4: Grid - Align-Items-Start"
},
/* -----------------------------------------
Align Items End
*/
"Bootstrap 4: Align-Items-End": {
"prefix": "jce",
"scope": "html,php,blade",
"body": [
"align-items-end"
],
"description": "Bootstrap 4: Grid - Align-Items-End"
},
/* -----------------------------------------
Flex Center
*/
"Bootstrap 4: Flex Center": {
"prefix": "fc",
"scope": "html,php,blade",
"body": [
"justify-content-center align-items-center"
],
"description": "Bootstrap 4: Grid - Flex Center"
},
/* -----------------------------------------
Container Fluid
*/
"Bootstrap 4: Grid - Container-Fluid": {
"prefix": "contfluid",
"scope": "html,php,blade",
"body": [
"<div class=\"container-fluid\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Container-Fluid"
},
/* -----------------------------------------
Container
*/
"Bootstrap 4: Grid - Container": {
"prefix": "cont",
"scope": "html,php,blade",
"body": [
"<div class=\"container\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Container"
},
/* -----------------------------------------
Row
*/
"Bootstrap 4: Grid - Row": {
"prefix": "row",
"scope": "html,php,blade",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Row"
},
/* -----------------------------------------
Column Sized
*/
"Bootstrap 4: Grid - Column": {
"prefix": "col",
"scope": "html,php,blade",
"body": [
"<div class=\"col${1|-,-sm,-md,-lg,-xl|}-${2:1-12}\">",
" ",
"</div>$0"
],
"description": "Bootstrap 4: Grid - Column XS"
},
/* -----------------------------------------
Grid - 3 Columns
*/
"Bootstrap 4: Grid - 3 Columns Centered": {
"prefix": "3col",
"scope": "html,php,blade",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${4:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${5:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${6:Content}",
" </div>",
"</div>$0"
],
"description": "Bootstrap 4: Grid - 3 Columns Centered"
},
/* -----------------------------------------
Grid - 2 Columns
*/
"Bootstrap 4: Grid - 2 Columns Centered": {
"prefix": "2col",
"scope": "html,php,blade",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:6}\">",
" ${4:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:6}\">",
" ${5:Content}",
" </div>",
"</div>$0"
],
"description": "Bootstrap 4: Grid - 2 Columns Centered"
},
/* -----------------------------------------
Grid - Single Columns
*/
"Bootstrap 4: Grid - 1 Column": {
"prefix": "1col",
"scope": "html,php,blade",
"body": [
"$0<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-sm-${2:6}\">",
" ${3:Content}",
" </div>",
"</div>"
],
"description": "Bootstrap 4: Grid - 1 Column"
}
}
Raw
bs4-navs-html.code-snippets
{
/* ----------------------------------------
HTML & PHP SNIPPETS
for Bootstrap 4.3.1
NAV
042419
---------------------------------------- */
"Bootstrap 4: Nav - Links": {
"prefix": "bs4-nav-a",
"scope": "html,php,blade,vue",
"body": [
"<nav class=\"nav ${1|justify-content-start,justify-content-center,justify-content-end|\">",
" <a class=\"nav-link active\" href=\"${3:#}\">${2:Active link}</a>",
" <a class=\"nav-link\" href=\"${5:#}\">${4:Link}</a>",
" <a class=\"nav-link\" href=\"${7:#}\">${6:Link}</a>",
"</nav>"
],
"description": "Bootstrap 4: Nav Links"
},
"Bootstrap 4: Nav UL List": {
"prefix": "bs4-nav-ul",
"scope": "html,php,blade,vue",
"body": [
"<ul class=\"nav ${1|justify-content-start,justify-content-center,justify-content-end|}\">",
" <li class=\"nav-item\">",
" <a class=\"nav-link active\" href=\"${3:#}\">${2:Active link}</a>",
" </li>",
" <li class=\"nav-item\">",
" <a class=\"nav-link\" href=\"${5:#}\">${4:Link}</a>",
" </li>",
" <li class=\"nav-item\">",
" <a class=\"nav-link\" href=\"${7:#}\">${6:Link}</a>",
" </li>",
"</ul>"
],
"description": "Bootstrap 4: Nav UL List"
},
}
Raw
bs4-scaffold-html.code-snippets
/*
Bootstrap 4
HTML, PHP, BLADE snippets
Document Scaffolding
*/
{
"Boostrap 4: Scaffold Document": {
"prefix": "bs4-!",
"scope": "html,php,blade",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>${1:Bootstrap 4 Document}</title>",
" <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">",
"</head>",
"<body>",
"",
" $0",
"",
" <script src=\"https://code.jquery.com/jquery-3.2.1.min.js\"></script>",
" <script src=\"https://unpkg.com/popper.js/dist/umd/popper.min.js\"></script>",
" <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\"></script>",
"",
"</body>",
"</html>"
],
"description": "Bootstrap 4: Scaffold Document"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment