All Bootstrap
Accordion
Option | Description |
---|---|
$id | The id of the accordion |
$accordionContent | The array of accordion data ('title' => 'content') |
$multiOpenYN | Do you want to allow multiple to be open at the same time = true or false |
$flush | Do 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" } |
Alerts
Option | Description |
---|---|
$id | Id of the alert |
$class | Any extra classes of the alert |
$colour | Any bootstrap colour theme |
$content | The 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 |
---|---|
$colour | Bootstrap colour |
$border | Bootsrap border colour |
$class | Any extra sizesing (like position) |
$pill | Pill shaped badge |
$content | The 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
PrimarySecondarySuccessDangerWarningInfoLightDarkPill Badges
PrimarySecondarySuccessDangerWarningInfoLightDarkBlockquotes
Option | Description |
---|---|
$quote | The Quote |
$attribute | Who the quote is attributed to |
$alignment | text-center or text-end |
$bqClass | Any extra classes for the blockquote |
$bqID | The ID of the blockQuote |
$figClass | Any extra classes for the figure element |
$figID | The ID of the figure element |
$figCapFooter | Any 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.
Card
Basic
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 linkImages
Some quick example text to build on the card title and make up the bulk of the card's content.
Header and Footer
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCarousel
Option | Description |
---|---|
$id | Carousel ID |
$class | Extra Classes for Carousel |
$crossfadeYN | Crossfade Transition => Y or N |
$indicatorsYN | Show Indicators => Y or N |
$autoplayYN | Autoplay the carousel on page load => Y or N |
$carouselContent | The array that holds the carousel content - $carouselContent['Title'] => [ 'src' => Image Source, 'alt' => Image Alt Text, 'caption' => Caption content (HTML Okay), 'interval' => Set the interval for this slide in ms (optional) ] |
PHP Function | carousel($id, $class, $crossfadeYN, $indicatorsYN, $autoplayYN, $carouselContent) |
Visual Studio Code Snippet | "Bootstrap Carousel": { "prefix": "bscarousel", "body": [ "carousel('${1:id}', '${2:class}', ${3:crossfadeYN}, ${4:indicatorsYN}, ${5:autoplayYN}, [${6:carouselContent}]);" ], "description": "Create a Bootstrap carousel" } |
Basic
Indicators
Captions
CrossFade
AutoPlay
Collapse
Option | Description |
---|---|
Collapse Button - $id | The ID of the collapse element |
Collapse Button - $buttonType | 'link' or bootstrap colour |
Collapse Button - $buttonClass | Any extra classes for the button |
Collapse Button - $buttonContent | The text/content for the button |
Collapse Button - $expanded | true or false |
Collapse - $id | The ID of the collapse element |
Collapse - $divClass | any extra classes for the div |
Collapse - $divContent | Collapse content |
Collapse - $horizontal | Horizontal 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
Horizontal
Dropdown
Option | Description |
---|---|
$containerClass | Extra classes for the container |
$buttonClass | Extra classes for the button |
$buttonColour | Bootstrap colour |
$buttonSize | Button Size |
$buttonContent | Content for the button |
$ulClass | Any extra classes for the UL element |
$split | Split button true or false |
$splitHref | href of the split |
$splitClass | Any extra classes on the split |
$list | List 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
Forms: Form Control
Option | Description |
---|---|
$type | Input type (text, email, password, etc.). |
$name | Input name attribute. |
$class | Additional CSS classes for the input. |
$placeholder | Placeholder text for the input. |
$value | Default value for the input. |
$id | ID attribute for the input. |
$size | Size of the input ('sm', 'lg', or ''). |
$formText | Help text associated with the input. |
$formTextInline | Inline text associated with the input. |
$disabled | Boolean for disabled state. |
$readOnly | Boolean for read-only state. |
$plainText | Boolean for plain text mode. |
$label | Text for the label. |
$floatingLabel | Boolean for floating label style. |
$multiple | Boolean for Multiple files |
$dataListOptions | Array 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
Form Text Inline
Disabled
Read Only
Read Only Plain Text
File Input
Colour
Datalists
Forms: Select
Option | Description |
---|---|
$name | Name attribute |
$options | Array of options for the select formatted 'Value' => 'Text' |
$class | Extra classes for the select |
$size | Bootstrap size options |
$multiple | Boolean for multiple |
$disabled | Boolean for disabled |
$selected | Selected Value |
$label | Label text for floating label |
$floatingLabel | Boolean 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 - $name | String - The name attribute for the input |
C&R - $options | Array - 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 - $class | String - Additional CSS classes for the input |
C&R - $disabled | Boolean - If true, disables the input |
C&R - $inline | Boolean - If true, displays checkboxes/radios inline |
S&T - $type | 'switch' or 'toggle' - Determines if it's a switch or toggle button |
S&T - $name | String - The name attribute for the input |
S&T - $options | Array - 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 - $class | String - Additional CSS classes for the input |
S&T - $disabled | Boolean - If true, disables the input |
S&T - $inline | Boolean - 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 |
---|---|
$name | String - The name attribute for the range input |
$min | Integer - The minimum value of the range input |
$max | Integer - The maximum value of the range input |
$step | Integer - The step value of the range input |
$value | Integer - The default value of the range input |
$label | String - The label text for the range input |
$class | String - Additional CSS classes for the range input |
$id | String - The ID attribute for the range input |
$disabled | Boolean - 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 |
---|---|
$elements | Array 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 |
$size | String - Size of the input group ('sm', 'lg', or '') |
$disabled | Boolean - If true, disables the input elements |
$class | Extra CSS Classes |
$id | ID |
$label | Label Text |
$formText | Form 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" } |
Sizing
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
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 - $class | Any extra classes for the group |
list - $id | The List Groups ID |
list - $flush | Is the list flush? true or false |
list - $numbered | This is a numbered list - true or false |
list - $horizontal | 'h' for horizontal, any of the bootstrap sizes for horizontal above that size |
list - $list | The 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 - $class | Any extra classes for the group |
link - $id | The List Groups ID |
link - $flush | Is the list flush? true or false |
link - $links | The 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 - $numbered | This 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
- An item
- A second item
- A third item
- A fourth Item
- 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 - $id | The same ID as the modal |
button - $colour | The colour theme of the button (any bootstrap colour theme) |
button - $content | The content on the button |
button - $class | Any extra classes for the button |
button - $btn | If you want a button, set this to true, otherwise set to false |
modal - $id | Modal ID which must match the data-bs-target on the link |
modal - $title | The title of the modal |
modal - $content | This is the content that should fill the modal (HTML is allowed) |
modal - $footerContent | This is the content that should fill the footer (HTML is allowed) |
modal - $scrollBody | Should the body scroll? |
modal - $verticallyCentered | Should the modal be centered vertically on the page? |
modal - $modalSize | Choose a size from sm(300px), default(500px), lg(800px), xl(1140px) |
modal - $fullScreen | If you want full screen modal, choose from fullscreen, sm(<576px), md(<768px), lg(<992px), xl(<1200px), xxl(<1400px) |
modal - $mbClass | Any 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 ModalScrolling Long Content
Scrolling Long Content ModalVertically Centered
Vertically Centered ModalVertically Centered
Full Screen
Off Canvas
Option | Description |
---|---|
button - $id | ID must match the offcanvas ID |
button - $content | The content of the button |
button - $colour | Any of the bootstrap colour schemes |
button - $class | Any extra classes for the buttons |
offcanvas - $id | ID must match the id on the offcanvas button |
offcanvas - $title | The title of the offcanvas |
offcanvas - $content | Content on the offcanvas (HTML is fine) |
offcanvas - $bodyScrollYN | Is the body scrollable when the offcanvas is active => Y or N |
offcanvas - $backdropYN | Do you want to use the backdrop? Y or N |
offcanvas - $placement | start, 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
BasicBasic
Body Scrolling
Body ScrollingBody Scrolling Offcanvas
No Backdrop
No BackdropNo Backdrop
Placement
Tables
Overview
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Variants
On Tables
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
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.