All Bootstrap

Accordion

Option Description
$idThe id of the accordion
$accordionContentThe array of accordion data ('title' => 'content')
$multiOpenYNDo you want to allow multiple to be open at the same time = true or false
$flushDo you want to remove the default border radius from the accordion = True or false
 
PHP Function
function accordion($id, $accordionContent, $multiOpen = false, $flush = true)
Visual Studio Code Snippet
"Boostrap Accordion": {
    "prefix": "bsaccordion",
    "body": [
        "accordion('${1:id}', '${2:accordionContent}', ${3:accordionMulti});"
    ],
    "description": "Create a Bootstrap accordion"
}

This is the content of the accordion

This is the content of the accordion 2

This is the content of the accordion 3

Alerts

Option Description
$idId of the alert
$classAny extra classes of the alert
$colourAny bootstrap colour theme
$contentThe content of the alert (HTML OKAY)
 
PHP Function
function accordion($id, $accordionContent, $multiOpen = false, $flush = true)
Visual Studio Code Snippet
"Bootstrap Alert": {
    "prefix": "bsalert",
    "body": [
        "alert('${1:id}', '${2:class}', '${3:colour}', '${4:content}');"
    ],
    "description": "Create a Bootstrap alert"
}

Badges

Option Description
$colourBootstrap colour
$borderBootsrap border colour
$classAny extra sizesing (like position)
$pillPill shaped badge
$contentThe content of the badge
 
PHP Function
badge($colour, $border, $class, $pill, $content)
Visual Studio Code Snippet
"Bootstrap Badge": {
    "prefix": "bsbadge",
    "body": [
        "badge('${1:colour}', '${2:border}', '${3:class}', ${4:pill}, '${5:content}');"
    ],
    "description": "Create a Bootstrap badge"
}

Headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Buttons


Positioned


Background Colours

PrimarySecondarySuccessDangerWarningInfoLightDark

Pill Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

Blockquotes

Option Description
$quoteThe Quote
$attributeWho the quote is attributed to
$alignmenttext-center or text-end
$bqClassAny extra classes for the blockquote
$bqIDThe ID of the blockQuote
$figClassAny extra classes for the figure element
$figIDThe ID of the figure element
$figCapFooterAny extra classes for the figcaption element
 
PHP Function
blockQuote($quote, $attribute, $alignment, $bqClass, $figClass, $bqID, $figID, $figCapFooter)
Visual Studio Code Snippet
"Bootstrap BlockQuote": {
    "prefix": "bsblockquote",
    "body": [
        "blockQuote('${1:quote}', '${2:attribute}', '${3:alignment}', '${4:bqClass}', '${5:figClass}', '${6:bqID}', '${7:figID}');"
    ],
    "description": "Create a Bootstrap blockquote"
}
This is the standard blockquote.

This is a blockQuote with an attribute

This is a centred quote

This is a text-end quote

Breadcrumbs

Option Description
$wordpressIs this using the current location in wordpress? true or false
$listCutom page list [ [ 'linkText' => 'Custom link Name', 'href' => 'link href', 'activePage' => true ] ]
$divider'>' - Special divider character
 
PHP Function
breadcrumbs($wordpress, $list, $divider)
Visual Studio Code Snippet
"Bootstrap Breadcrumbs": {
    "prefix": "bsbreadcrumbs",
    "body": [
        "breadcrumbs(${1:wordpress}, [${2:list}], '${3:divider}');"
    ],
    "description": "Create Bootstrap breadcrumbs"
}

Dividers

Buttons

Variants


Outline Buttons


Sizes


Disabled

Button Group


Button Toolbar


Sizing



Card

Basic

This is some text within a card body.

Titles, Text and Links

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Images

PlaceholderImage cap

Some quick example text to build on the card title and make up the bulk of the card's content.


Header and Footer

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Close Button


Disabled

Collapse

Option Description
Collapse Button - $idThe ID of the collapse element
Collapse Button - $buttonType'link' or bootstrap colour
Collapse Button - $buttonClassAny extra classes for the button
Collapse Button - $buttonContentThe text/content for the button
Collapse Button - $expandedtrue or false
Collapse - $idThe ID of the collapse element
Collapse - $divClassany extra classes for the div
Collapse - $divContentCollapse content
Collapse - $horizontalHorizontal Collapse Animation - true or false
 
PHP Function
collapseButton($id, $buttonType, $buttonClass, $buttonContent, $expanded)  &&  collapse($id, $divClass, $divContent, $horizontal)
Visual Studio Code Snippet
"Bootstrap Collapse Button": {
    "prefix": "bscollapsebtn",
    "body": [
        "collapseButton('${1:id}', '${2:buttonType}', '${3:buttonClass}', '${4:buttonContent}', ${5:expanded});"
    ],
    "description": "Create a Bootstrap collapse button"
}, 

"Bootstrap Collapse": {
    "prefix": "bscollapse",
    "body": [
        "collapse('${1:id}', '${2:divClass}', '${3:divContent}', ${4:horizontal});"
    ],
    "description": "Create a Bootstrap collapse"
}

Basic Examples

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Horizontal

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Dropdown

Option Description
$containerClassExtra classes for the container
$buttonClassExtra classes for the button
$buttonColourBootstrap colour
$buttonSizeButton Size
$buttonContentContent for the button
$ulClassAny extra classes for the UL element
$splitSplit button true or false
$splitHrefhref of the split
$splitClassAny extra classes on the split
$listList array [ [ 'linkContent' => Content for the link, 'href' => href of the link, 'divider' => true or false, 'class' => any extra classes for the link ] ]
 
PHP Function
dropdown($containerClass, $buttonClass, $buttonColour, $buttonSize, $buttonContent, $ulClass, $split, $splitHref, $splitClass, $list)
Visual Studio Code Snippet
"Bootstrap Dropdown": {
    "prefix": "bsdropdown",
    "body": [
        "dropdown('${1:containerClass}', '${2:buttonClass}', '${3:buttonColour}', '${4:buttonSize}', '${5:buttonContent}', '${6:ulClass}', ${7:split}, '${8:splitHref}', '${9:splitClass}', [${10:list}]);"
    ],
    "description": "Create a Bootstrap dropdown"
}

Forms: Overview

We'll never share your email with anyone else.

Disabled fieldset example

Forms: Form Control

Option Description
$typeInput type (text, email, password, etc.).
$nameInput name attribute.
$classAdditional CSS classes for the input.
$placeholderPlaceholder text for the input.
$valueDefault value for the input.
$idID attribute for the input.
$sizeSize of the input ('sm', 'lg', or '').
$formTextHelp text associated with the input.
$formTextInlineInline text associated with the input.
$disabledBoolean for disabled state.
$readOnlyBoolean for read-only state.
$plainTextBoolean for plain text mode.
$labelText for the label.
$floatingLabelBoolean for floating label style.
$multipleBoolean for Multiple files
$dataListOptionsArray of options for the data list
 
PHP Function
formControl($type, $name, $class, $placeholder, $value, $id, $size = '', $formText = '', $inline = false, $disabled = false, $readOnly = false, $plainText = false, $label = '', $floatingLabel = false, $multiple = false, $dataListOptions = [])
Visual Studio Code Snippet
"PHP Bootstrap FormControl with Labels": {
    "prefix": "bsformcontrol",
    "body": [
        "formControl('${1:type}', '${2:name}', '${3:class}', '${4:placeholder}', '${5:value}', '${6:id}', '${7:size}', '${8:formText}', ${9:inline}, ${10:disabled}, ${11:readOnly}, ${12:plainText}, '${13:label}', ${14:floatingLabel}, ${15:multiple}, ${16:Datalist Options (array)});"
    ],
    "description": "Create a Bootstrap form control element with label options"
}

Sizing


Form Text

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Form Text Inline

Must be 8-20 characters long

Disabled


Read Only


Read Only Plain Text


File Input


Colour


Datalists


Forms: Select

Option Description
$nameName attribute
$optionsArray of options for the select formatted 'Value' => 'Text'
$classExtra classes for the select
$sizeBootstrap size options
$multipleBoolean for multiple
$disabledBoolean for disabled
$selectedSelected Value
$labelLabel text for floating label
$floatingLabelBoolean for floating label style
 
PHP Function
bootstrapSelect($name, $options, $class = '', $size = '', $multiple = false, $disabled = false, $selected = '', $label = '', $floatingLabel = false)
Visual Studio Code Snippet
"Bootstrap Select Component": {
    "prefix": "bsselect",
    "body": [
        "bootstrapSelect('${1:name}', ${2:[key-value pairs]}, '${3:class}', '${4:size}', ${5:multiple}, ${6:disabled}, '${7:selected}', '${8:label}', ${9:floating label});"
    ],
    "description": "Create a Bootstrap select component"
}

Default


Sizing


Multiple


Disabled

Forms: Checks and Radios

Option Description
C&R - $type'checkbox' or 'radio' - Type of the input
C&R - $nameString - The name attribute for the input
C&R - $optionsArray - Options for checkboxes/radios in the format: [ 'value1' => ['text' => 'Label1', 'checked' => true/false, 'disabled' => true/false], 'value2' => ['text' => 'Label2', 'checked' => true/false, 'disabled' => true/false], ... ]
C&R - $classString - Additional CSS classes for the input
C&R - $disabledBoolean - If true, disables the input
C&R - $inlineBoolean - If true, displays checkboxes/radios inline
S&T - $type'switch' or 'toggle' - Determines if it's a switch or toggle button
S&T - $nameString - The name attribute for the input
S&T - $optionsArray - Options for switches/toggle buttons in the format: [ 'value1' => ['text' => 'Label1', 'checked' => false, 'disabled => false, 'colour' => 'primary', 'size' = 'sm'], 'value2' => ['text' => 'Label2', 'checked' => false, 'disabled => false, 'colour' => 'primary', 'size' = 'sm'], ]
S&T - $classString - Additional CSS classes for the input
S&T - $disabledBoolean - If true, disables the input
S&T - $inlineBoolean - If true, displays switches/toggle buttons inline
 
PHP Function
bootstrapCheckRadio($type, $name, $options, $class = '', $disabled = false, $inline = false) && bootstrapSwitchesToggle($type, $name, $options, $class = '', $disabled = false, $inline = false)
Visual Studio Code Snippet
"Bootstrap Checkboxes and Radios": {
    "prefix": "bscheckradio",
    "body": [
        "bootstrapCheckRadio('${1:type}', '${2:name}', ${3:[options array]}, '${4:class}', ${5:disabled}, ${6:inline});"
    ],
    "description": "Create Bootstrap checkboxes or radios"
},

"Bootstrap Switches and Toggle Buttons": {
    "prefix": "bsswitchtoggle",
    "body": [
        "bootstrapSwitchesToggle('${1:type}', '${2:name}', ${3:[options array]}, '${4:class}', ${5:disabled}, ${6:inline});"
    ],
    "description": "Create Bootstrap switches or toggle buttons"
}

Checks


Disabled


Radio


Disabled


Switches


Inline


Toggle Buttons

Forms: Range

Option Description
$nameString - The name attribute for the range input
$minInteger - The minimum value of the range input
$maxInteger - The maximum value of the range input
$stepInteger - The step value of the range input
$valueInteger - The default value of the range input
$labelString - The label text for the range input
$classString - Additional CSS classes for the range input
$idString - The ID attribute for the range input
$disabledBoolean - If true, disables the range input
 
PHP Function
bootstrapRangeSlider($name, $min, $max, $step, $value, $label, $class = '', $id = '', $disabled = false
Visual Studio Code Snippet
"Bootstrap Range Slider with Label": {
    "prefix": "bsrangeslider",
    "body": [
        "bootstrapRangeSlider('${1:name}', ${2:min}, ${3:max}, ${4:step}, ${5:value}, '${6:label}', '${7:class}', '${8:id}', ${9:disabled});"
    ],
    "description": "Create a Bootstrap range slider with label"
}

Disabled


Forms: Input Groups

Option Description
$elementsArray of elements to include in the input group. Each element is an associative array with keys: - 'type': Type of the element ('input', 'span', 'checkbox', 'radio') - 'inputType': Type of the input (text, number, etc.) [required if type is 'input'] - 'name': Name attribute for the input [required if type is 'input', 'checkbox', 'radio'] - 'value': Value of the input [optional, used if type is 'input'] - 'text': Text content for the span [required if type is 'span'], - 'placeholder': Placeholder for the input
$sizeString - Size of the input group ('sm', 'lg', or '')
$disabledBoolean - If true, disables the input elements
$classExtra CSS Classes
$idID
$labelLabel Text
$formTextForm Text
 
PHP Function
bootstrapInputGroup($elements, $size = '', $disabled = false, $class, $id, $label, $formText)
Visual Studio Code Snippet
"Bootstrap Input Group": {
    "prefix": "bsinputgroup",
    "body": [
        "bootstrapInputGroup(${1:Array of values}, '${2:size}', ${3:disabled}, '${4:class}', '${5:id}', '${6:label}', '${7:form text}');"
    ],
    "description": "Create a Bootstrap input group"
}
@
@example.com
Example help text goes outside the input group
$.00

Sizing

Small
Default
Large

Checkboxes and Radios


Forms: Floating Labels

See the Forms Form Control and Select Sections as the floating labels are built into that


Textareas


Selects


Disabled




Forms: Validation Styles

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Lists

Unstyled

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

Inline

  • This is a list item.
  • And another one.
  • But they're displayed inline.

Description list Alignment

Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.

List Group

Option Description
list - $classAny extra classes for the group
list - $idThe List Groups ID
list - $flushIs the list flush? true or false
list - $numberedThis is a numbered list - true or false
list - $horizontal'h' for horizontal, any of the bootstrap sizes for horizontal above that size
list - $listThe List Array [ 'listItem' => 'The content of the list item (HTML allowed)', 'class' => 'Any extra classes, like d-flex etc', 'active' => true or false, 'disabled' => true or false, 'colour' => 'Any Bootstrap Colour (optional)' ]
link - $classAny extra classes for the group
link - $idThe List Groups ID
link - $flushIs the list flush? true or false
link - $linksThe Links Array [ 'linkContent' => 'The content of the list item (HTML allowed)', 'class' => 'Any extra classes, like d-flex etc', 'active' => true or false, 'disabled' => true or false, 'colour' => 'Any Bootstrap Colour' ]
link - $numberedThis is a numbered list - true or false
link - $horizontal'h' for horizontal, any of the bootstrap sizes for horizontal above that size
 
PHP Function
listGroup($class, $id, $flush, $list, $numbered, $horizontal) && linkGroup($class, $id, $flush, $links, $numbered, $horizontal)
Visual Studio Code Snippet
"Bootstrap List Group": {
    "prefix": "bslistgroup",
    "body": [
        "listGroup('${1:class}', '${2:id}', ${3:flush}, [${4:list}], ${5:numbered}, ${6:horizontal});"
    ],
    "description": "Create a Bootstrap list group"
}, 

"Bootstrap Link Group": {
    "prefix": "bslinkgroup",
    "body": [
        "linkGroup('${1:class}', '${2:id}', ${3:flush}, [${4:links}], ${5:numbered}, ${6:horizontal});"
    ],
    "description": "Create a Bootstrap link group"
}

Basic

  • An item
  • A second item
  • A third item
  • A fourth Item
  • And a fifth one

Links and Buttons


Flush

  • An item
  • A second item
  • A third item
  • A fourth Item
  • And a fifth one

Numbered

  1. An item
  2. A second item
  3. A third item
  4. A fourth Item
  5. And a fifth one

Custom Content


Horizontal

  • An item
  • A second item
  • A third item
  • A fourth Item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth Item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth Item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth Item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth Item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth Item
  • And a fifth one

Variants

  • A simple default list group item
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

Modal

Option Description
button - $idThe same ID as the modal
button - $colourThe colour theme of the button (any bootstrap colour theme)
button - $contentThe content on the button
button - $classAny extra classes for the button
button - $btnIf you want a button, set this to true, otherwise set to false
modal - $idModal ID which must match the data-bs-target on the link
modal - $titleThe title of the modal
modal - $contentThis is the content that should fill the modal (HTML is allowed)
modal - $footerContentThis is the content that should fill the footer (HTML is allowed)
modal - $scrollBodyShould the body scroll?
modal - $verticallyCenteredShould the modal be centered vertically on the page?
modal - $modalSizeChoose a size from sm(300px), default(500px), lg(800px), xl(1140px)
modal - $fullScreenIf you want full screen modal, choose from fullscreen, sm(<576px), md(<768px), lg(<992px), xl(<1200px), xxl(<1400px)
modal - $mbClassAny extra classes for the modal body
 
PHP Function
modalButton($id, $colour, $content, $class, $btn) && modal($id, $title, $content, $footerContent, $scrollBody, $verticallyCentered, $modalSize, $fullScreen, $mbClass)
Visual Studio Code Snippet
"Bootstrap Modal Button": {
    "prefix": "bsmodalbtn",
    "body": [
        "modalButton('${1:id}', '${2:colour}', '${3:content}', '${4:class}');"
    ],
    "description": "Create a Bootstrap modal button"
}, 

"Bootstrap Modal": {
    "prefix": "bsmodal",
    "body": [
        "modal('${1:id}', '${2:title}', '${3:content}', '${4:footerContent}', ${5:scrollBody}, ${6:verticallyCentered}, '${7:modalSize}', ${8:fullScreen});"
    ],
    "description": "Create a Bootstrap modal"
}

Basic

Basic Modal

Scrolling Long Content

Scrolling Long Content Modal

Vertically Centered

Vertically Centered Modal

Vertically Centered

Extra Large ModalLarge ModalSmall Modal

Full Screen

Fullscreen ModalFullscreen below MD

Off Canvas

Option Description
button - $idID must match the offcanvas ID
button - $contentThe content of the button
button - $colourAny of the bootstrap colour schemes
button - $classAny extra classes for the buttons
offcanvas - $idID must match the id on the offcanvas button
offcanvas - $titleThe title of the offcanvas
offcanvas - $contentContent on the offcanvas (HTML is fine)
offcanvas - $bodyScrollYNIs the body scrollable when the offcanvas is active => Y or N
offcanvas - $backdropYNDo you want to use the backdrop? Y or N
offcanvas - $placementstart, end, top, bottom
 
PHP Function
offcanvasButton($id, $content, $colour, $class) && offcanvas($id, $title, $content, $bodyScrollYN, $backdropYN, $placement)
Visual Studio Code Snippet
"Bootstrap Offcanvas Button": {
    "prefix": "bsoffcanvasbtn",
    "body": [
        "offcanvasButton('${1:id}', '${2:content}', '${3:colour}', '${4:class}');"
    ],
    "description": "Create a Bootstrap offcanvas button"
}, 

"Bootstrap Offcanvas": {
    "prefix": "bsoffcanvas",
    "body": [
        "offcanvas('${1:id}', '${2:title}', '${3:content}', ${4:bodyScrollYN}, ${5:backdropYN}, '${6:placement}');"
    ],
    "description": "Create a Bootstrap offcanvas"
}

Basic

Basic
Basic
This is the content for the basic offcanvas

Body Scrolling

Body Scrolling
Body Scrolling Offcanvas
This is the content for the body scrolling

No Backdrop

No Backdrop
No Backdrop
This is the content for no backdrop

Placement

Top
Top Off Canvas
This is the content for the top off canvas
Bottom
Bottom Off Canvas
This is the content for the bottom off canvas
Right
Right Off Canvas
This is the content for the right off canvas

Tables

Overview

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Variants

On Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

On Rows

# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle

On cells (`td` or `th`)

... ... ... ... ... ... ... ...

Typography

h1. MythMaker Creations

h2. MythMaker Creations

h3. MythMaker Creations

h4. MythMaker Creations

h5. MythMaker Creations
h6. MythMaker Creations

MythMaker Creations

MythMaker Creations

MythMaker Creations

MythMaker Creations

MythMaker Creations

MythMaker Creations


This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

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

This line rendered as bold text.

This line rendered as italicized text.