diff --git a/my-snippets/B5-Snippets/.gitattributes b/my-snippets/B5-Snippets/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/my-snippets/B5-Snippets/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/my-snippets/B5-Snippets/.gitignore b/my-snippets/B5-Snippets/.gitignore
new file mode 100644
index 0000000..b9f8ccb
--- /dev/null
+++ b/my-snippets/B5-Snippets/.gitignore
@@ -0,0 +1,110 @@
+# Ignore
+.vscode/
+src/
+publishing/
+.env
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/my-snippets/B5-Snippets/.gitpod.yml b/my-snippets/B5-Snippets/.gitpod.yml
new file mode 100644
index 0000000..7f7ab8e
--- /dev/null
+++ b/my-snippets/B5-Snippets/.gitpod.yml
@@ -0,0 +1,11 @@
+# tasks:
+# - init: echo "Replace me with a build script for the project."
+# command: mkdir -p /workspace/data && mongod --dbpath /workspace/data --fork --logpath /workspace/data/mongod.log
+ports:
+ - port: 3000
+ onOpen: open-preview
+vscode:
+ extensions:
+ - auchenberg.vscode-browser-preview@0.6.7:UsqnxvUQdYtm8ZISiN056w==
+ - evilz.vscode-reveal@4.0.4:q3Ae+UO4Nv6SYzToAsa1zw==
+ - HansUXdev.bootstrap5-snippets@1.2.3:e23xRdDNFFIPdzsiYVQ07g==
diff --git a/my-snippets/B5-Snippets/.prettierrc b/my-snippets/B5-Snippets/.prettierrc
new file mode 100644
index 0000000..19eb92b
--- /dev/null
+++ b/my-snippets/B5-Snippets/.prettierrc
@@ -0,0 +1,4 @@
+{
+ "tabWidth": 3,
+ "useTabs": true
+}
diff --git a/my-snippets/B5-Snippets/.vscodeignore b/my-snippets/B5-Snippets/.vscodeignore
new file mode 100644
index 0000000..ed3f9d3
--- /dev/null
+++ b/my-snippets/B5-Snippets/.vscodeignore
@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+out/test/**
+src/**
+.gitignore
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/tslint.json
+**/*.map
+**/*.ts
\ No newline at end of file
diff --git a/my-snippets/B5-Snippets/CHANGELOG.md b/my-snippets/B5-Snippets/CHANGELOG.md
new file mode 100644
index 0000000..a6847d3
--- /dev/null
+++ b/my-snippets/B5-Snippets/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "b5-snippets" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release
\ No newline at end of file
diff --git a/my-snippets/B5-Snippets/LICENSE b/my-snippets/B5-Snippets/LICENSE
new file mode 100644
index 0000000..a5a4476
--- /dev/null
+++ b/my-snippets/B5-Snippets/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Brett Hans McMurdy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/my-snippets/B5-Snippets/NOTES.md b/my-snippets/B5-Snippets/NOTES.md
new file mode 100644
index 0000000..e884c14
--- /dev/null
+++ b/my-snippets/B5-Snippets/NOTES.md
@@ -0,0 +1 @@
+1. [Validate Json](https://jsonformatter.curiousconcept.com/#) after concat
diff --git a/my-snippets/B5-Snippets/README.md b/my-snippets/B5-Snippets/README.md
new file mode 100644
index 0000000..c92170b
--- /dev/null
+++ b/my-snippets/B5-Snippets/README.md
@@ -0,0 +1,275 @@
+# Bootstrap 5
+[](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
+[](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
+[](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
+
+[](http://opensource.org/licenses/MIT) [](https://github.com/HansUXdev/B5-Snippets) [](https://github.com/HansUXdev)
+
+
+
+
+
+The first, (currently only) and hands down BEST bootstrap 5 snippet extension. Includes templates, powerful utility snippets, and much more.
+
+## Features
+1. Templates one tab away
+2. Powerful utilities
+3. Font Awesome icons ! (currently 4.7, eventually 6.0)
+4. Much more hidden...
+
+6. Much more planned, so consider giving it a star on [github](https://github.com/HansUXdev/B5-Snippets) or the [marketplace](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets), become a [sponsor](https://github.com/sponsors/HansUXdev/).
+
+
+
+
+# Open Source Marketplace
+This may surprizes you but VS-Code and it's marketplace aren't really open source, is licensed under a not-FLOSS license and contains telemetry/tracking, [read more...](https://vscodium.com/)
+
+This extension is built for [open-vsx](https://open-vsx.org/) and published on the ONLY [open source registry](https://open-vsx.org/about) for VS Code extensions.
+
+
+
+
+
+Learn more about **open source** versions of vscode such as [vscodium](https://vscodium.com/), [GitPod's IDE](https://www.gitpod.io/docs/ide/) and more.
+
+
+## Notes
+Bootstrap 5 is currently in alpha and this extension should be considered in the same status.
+Unlike a lot of other snippets, this extension aims to balence user simplicity, with power and flexibility by keeping the **total number of snippets to a minimum**.
+
+In terms of **user simplicity**, other Bootstrap 4 snippets have 5 different snippets for the grid, whereas this will have 3, but each is more powerful.
+
+## Roadmap
+* v1.2.5 - Introduces Flex utilities, media-query and awesome awesome 4.7.0.
+* v1.6-8 - Each snippet with eventually have a gif demo (SOON).
+* v2 - All base [templates](https://v5.getbootstrap.com/docs/5.0/examples/) and several others will be one tab away, so consider [sponsoring this](https://github.com/sponsors/HansUXdev/) or giving it a star.
+
+---
+
+## Powerful, Simple, **Flex** Snippets
+> **Center, position or reorder any element, by any default breakpoint with under 10 snippets.**
+
+
+Trigger | Description
+--- | ---
+`!templates` | Sets the display type.
+`!utilities` | Sets the display type.
+`b5-` | Main component snippets.
+`fa-` | Font Awesome component snippets.
+
+---
+
+## Templates/Layout
+Templates are just one tab away. Most of the [official example templates](https://v5.getbootstrap.com/docs/5.0/examples/) have been implmented.
+
+Trigger | Description
+--- | ---
+!b5-$ | Shortcut creating an html document with cdn scripts included
+!b5-$Offcanvas | Offcanvas Template, one tab away.
+!b5$Template-name | More coming soon...
+
+---
+
+## Powerful Utility Classes
+There are two way to use utilities.
+1. **Class utilities**, which use `!` as a prefix. For example, if you want to add a utility class to an existing HTML element, inside of `class=" "` you would add `class="!spacing"` then hit tab and fill out the options, the default will be `class="mx-auto"` which sets margin to auto on left and right (x).
+2. **Wrapper elements**, ex: `b5-{txt,color,shadow,boder,spacing}` which will create a div, p, h2 then allow you to tab through the options.
+
+Trigger | Description
+--- | ---
+`!spacing` or `b5-spacing` | A single, powerful utility snippet. The default is `mx-auto` which adds margins on right and left. The options allow you to switch between (m)argin and (p)adding, x,y,(t)op,(r)ight, (b)ottom, (l)eft, etc. Read about the classes on the [official bootstrap documentation](https://v5.getbootstrap.com/docs/5.0/utilities/spacing/).
+`!shadow` or `b5-shadow` | Useful whenever you want to make things look like paper or material design. Read about the classes on the [official bootstrap documentation](https://v5.getbootstrap.com/docs/5.0/utilities/spacing/). https://v5.getbootstrap.com/docs/5.0/utilities/shadows/
+`!font` or `b5-text` | This intentionally uses two different names to differentiate between the class utility and the wrapper element. The options are responsive positions `{|sm,md,lg,xl|}-${|left,center,right|}`, line-height `base,1,sm,lg}`, font-weight `normal,italic,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter` ,and `text-${6|none,lowercase,uppercase,capitalize|}`, decoration and `reset,break,monospace` !
+`b5-border` | change border attributes all border attributes. Read about the classes on the [official bootstrap documentation](https://v5.getbootstrap.com/docs/5.0/utilities/borders/).
+
+
+---
+
+## Powerful, Simple, **Flex** Snippets
+> **Center, position or reorder any element, by any default breakpoint with under 10 snippets.**
+
+
+Trigger | Description
+--- | ---
+`!!MQ` | Sets the display type.
+`!flex` | Sets the display type.
+`!justify` | Sets the display type.
+`!align` | Sets the display type.
+`!fill` | Sets the display type.
+`!grow-shrink` | Sets the display type.
+`!flex-wrap` | Sets the display type.
+`!flex-order` | Sets the display type.
+
+---
+
+#### Grid
+This is works great but it may be simplified and rewritten.
+I'm also toying around with new utility snippet to that combines the [display classes](https://v5.getbootstrap.com/docs/5.0/utilities/display/) and [flex classes](https://v5.getbootstrap.com/docs/5.0/utilities/flex/). If you have any thoughts or suggestions, let me know on github.
+
+Trigger | Description
+--- | ---
+b5-**container** | Grid container with options for -fluid, px, gy and more.
+b5-**row** | Powerful row, `${1| ,row-cols-2,row-cols-3, auto,justify-content-md-center,md,lg,xl,xxl|}`. Default to row with optional utility classes.
+b5-**col** | Pretty much all your need covered and more. Ex: `col${1| ,-1,-2,-3,-4,-5,-6,-sm,-md,-lg,-xl,-xxl|}${2| ,-auto,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12`
+
+#### Navbar
+
+Trigger | Description
+--- | ---
+b5-**navbar-default** | Navbar default
+b5-**navbar-scollspy** | V1 is here
+b5-**Nav-bottom** | V1 is here
+
+b5-**nav-item** | item with link and options for common pages such as Home, About, Blog, Contact.
+b5-**navlink** | link
+b5-**nav-dropdown** | dropdown
+b5-**nav-dropdown toggle** | Navbar toggle
+b5-**nav-** | more in this category coming soon...
+
+#### Button
+
+Trigger | Description
+--- | ---
+b5-**btn** | Button with link
+b5-**btn-o** | Button with outline
+b5-**btn-close** | Close buttons...
+b5-**btn-** | more in this category coming soon...
+
+
+
+#### Cards
+
+Trigger | Description
+--- | ---
+b5-**card** | Basic Card
+b5-**card-** | more in this category coming soon...
+
+
+#### modal
+
+Trigger | Description
+--- | ---
+b5-**modal** | Basic modal
+b5-**modal-** | more in this category coming soon...
+
+#### Collapse
+
+Trigger | Description
+--- | ---
+b5-**btn-reveal** | Click a button and reveal some content.
+b5-**modal-** | more in this category coming soon...
+
+
+#### JavaScript
+I plan on eventually adding bootstrap snippet for the JavaScript but its not on the roadmap yet because I'm also working on this [massive javascript extension](https://marketplace.visualstudio.com/items?itemName=HansUXdev.javascript-first-snippets) which will replace about 5-10 of the most popular extensions add and add things like optional chaining among other methods.
+
+Trigger | Description
+--- | ---
+`jb5` | consider submitting a PR or becoming a [sponsor](https://github.com/sponsors/HansUXdev/).
+
+
+
+
+
+
+
+
+
+## Release Notes
+
+Users appreciate release notes as you update your extension.
+
+### 1.2.3 - Updated documentation, added templates and much more.
+
+### 1.2.5 - Fixed Bugs
+- [x] Flex Utilities !
+- [x] added !round utility
+- [x] Added CTA Button - with options for call and email
+- [x] breadcrumb - fixed bug and added breadcrumb item
+- [x] border- fixed bug and added !round option
+- [ ]
+
+
+## Supporting the Developers
+If you use this a lot or want to see it improve consider giving it a star, following the dev on social media below, or becoming a [githup sponsor](https://github.com/sponsors/HansUXdev/).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Educational Repos
+The author does **a lot more** than just publishing a json file for snippets.
+
+Here are just a few things he's working on, while taking care of his 👶 as a full-time single father, job hunting & competing in hackathons...
+
+Trigger | Description & Info
+--- | ---
+[JavaScript-First](https://github.com/HansUXdev/JavaScript-First) | An Open Source Book that teaches anyone how to code with JavaScript using the node.js runtime environment rather than a browser and by the end, you will build a server and a website using JavaScript..
+[Learn Mongo GitPod](https://github.com/HansUXdev/LearnMongoGitPod)| A repo designed to teach mongoDB to people with zero experiance and zero config, meaning you can learn on virtually any device that has a browser that GitPod can run on! This 🤞may🤞 become part of Free Code Camp [[1](https://forum.freecodecamp.org/t/how-is-new-content-created-at-fcc/416191/3)], [[2](https://github.com/freeCodeCamp/CurriculumExpansion/issues/103)].
+
+
+### Future Snippets & Extensions
+Name | Description
+--- | ---
+[JavaScript-First](https://marketplace.visualstudio.com/items?itemName=HansUXdev.javascript-first-snippets) | JavaScript First is a huge collection of snippets built to establish better code habits for working with JS-based servers, browser methods, react, mongo databases and more. It is also meant to be paired with the book, [JavaScript-First](https://github.com/HansUXdev/JavaScript-First).
+Foundation 6 Snippets| This will start as a snippets for [sites](https://get.foundation/sites/docs/) and then be updated for.
+Code Slides | A snippet extension for creating educational slides with [vscode-reveal](https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal) and a custom theme. (not public yet)
+Foundation 6 Snippets| This will start as a snippets for [sites](https://get.foundation/sites/docs/) and then be updated for.[email](https://get.foundation/emails). If sponsored, I will extend this to eventually replace the [CLI](https://github.com/foundation/foundation-cli) and [building blocks](https://get.foundation/building-blocks/) by implementing a custom feature that writes install kits in a similar way the [web boilerplate](https://marketplace.visualstudio.com/items?itemName=jamesqquick.web-boilerplate) writes an html, css, and js file. (not started yet)
+
+### Social Entrepreneurship: Open Source Non-Profit
+I'm in the process of founding a non-profit dedicated to promoting open source by doing the following and can only commit to the first two without proper sponsorship:
+Name | Description
+--- | ---
+Creating open source curriculum | Getting open source curriculum into the hands for high school students.
+CTE Coding Students | Bringing industry professionals into the class room to inspire them (via zoom). I already did this as a teacher by bringing people from Riot Games / Carvana, Choice Hotels, Auth0, and many others into my classroom. Now I want to streamline this for more schools.
+Free Coding Classes on Twitch | I stream open source classes for an introductory javaScript class every week to test the open source curriculum I write. Think of it as a free bootcamp online. I also despritely need a better computer that doesn't require iced gel packs to be able to stream 😅....
+Lobbying for Open Source Certification | When I taught in a public CTE high school, I couldn't believe that a multiple choice test like th MTA certifications were approved by the state over open source certifications such as Free Code Camp's. I know enough school board members and a few house members to help get the ball rolling but, it's a lot of leg work and I don't want to commit to this without funding...
+Laptop | Donating 4G latops/tablets to students struggling with remote academic life. Having taught a few students with bad internet, etc, this is especially important to me but I don't have the resources to address this without funding.
diff --git a/my-snippets/B5-Snippets/Templates.gif b/my-snippets/B5-Snippets/Templates.gif
new file mode 100644
index 0000000..56c72f1
Binary files /dev/null and b/my-snippets/B5-Snippets/Templates.gif differ
diff --git a/my-snippets/B5-Snippets/Templates2.gif b/my-snippets/B5-Snippets/Templates2.gif
new file mode 100644
index 0000000..631e47d
Binary files /dev/null and b/my-snippets/B5-Snippets/Templates2.gif differ
diff --git a/my-snippets/B5-Snippets/TxtUtility.gif b/my-snippets/B5-Snippets/TxtUtility.gif
new file mode 100644
index 0000000..fb7596f
Binary files /dev/null and b/my-snippets/B5-Snippets/TxtUtility.gif differ
diff --git a/my-snippets/B5-Snippets/bootstrap.png b/my-snippets/B5-Snippets/bootstrap.png
new file mode 100644
index 0000000..70f447a
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap.png differ
diff --git a/my-snippets/B5-Snippets/bootstrap5-snippets-1.0.0.vsix b/my-snippets/B5-Snippets/bootstrap5-snippets-1.0.0.vsix
new file mode 100644
index 0000000..51c1446
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap5-snippets-1.0.0.vsix differ
diff --git a/my-snippets/B5-Snippets/bootstrap5-snippets-1.0.2.vsix b/my-snippets/B5-Snippets/bootstrap5-snippets-1.0.2.vsix
new file mode 100644
index 0000000..d90722b
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap5-snippets-1.0.2.vsix differ
diff --git a/my-snippets/B5-Snippets/bootstrap5-snippets-1.1.0.vsix b/my-snippets/B5-Snippets/bootstrap5-snippets-1.1.0.vsix
new file mode 100644
index 0000000..8e772a7
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap5-snippets-1.1.0.vsix differ
diff --git a/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.0.vsix b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.0.vsix
new file mode 100644
index 0000000..e7ae199
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.0.vsix differ
diff --git a/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.2.vsix b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.2.vsix
new file mode 100644
index 0000000..57b2651
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.2.vsix differ
diff --git a/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.3.vsix b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.3.vsix
new file mode 100644
index 0000000..efb1fe8
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.3.vsix differ
diff --git a/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.4.vsix b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.4.vsix
new file mode 100644
index 0000000..25027e4
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.4.vsix differ
diff --git a/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.5.vsix b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.5.vsix
new file mode 100644
index 0000000..97845b2
Binary files /dev/null and b/my-snippets/B5-Snippets/bootstrap5-snippets-1.2.5.vsix differ
diff --git a/my-snippets/B5-Snippets/chainable-Snippets.gif b/my-snippets/B5-Snippets/chainable-Snippets.gif
new file mode 100644
index 0000000..1f3beca
Binary files /dev/null and b/my-snippets/B5-Snippets/chainable-Snippets.gif differ
diff --git a/my-snippets/B5-Snippets/fontUtility.gif b/my-snippets/B5-Snippets/fontUtility.gif
new file mode 100644
index 0000000..cab356a
Binary files /dev/null and b/my-snippets/B5-Snippets/fontUtility.gif differ
diff --git a/my-snippets/B5-Snippets/g.recordit.co_q1xiOG2GfN.gif.webloc b/my-snippets/B5-Snippets/g.recordit.co_q1xiOG2GfN.gif.webloc
new file mode 100644
index 0000000..dcf546f
--- /dev/null
+++ b/my-snippets/B5-Snippets/g.recordit.co_q1xiOG2GfN.gif.webloc
@@ -0,0 +1,8 @@
+
+
+
${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}
", + " b5${0}", + "Integrate Masonry with the Bootstrap grid system and", + " cards component.
", + "", + "Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like", + " so:
", + "", + "",
+ "<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>",
+ "
",
+ "",
+ " By adding data-masonry='{\"percentPosition\": true }'
to the .row
wrapper, we can",
+ " combine the powers of Bootstrap's responsive grid and Masonry's positioning.
This is a longer card with supporting text below as a natural lead-in to", + " additional content. This content is a little bit longer.
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
", + "
This card has supporting text below as a natural lead-in to additional", + " content.
", + "Last updated 3 mins ago
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
", + "
This card has a regular title and short paragraph of text below it.
", + "Last updated 3 mins ago
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
", + "
This is another card with title and supporting text below. This card has", + " some additional content to make it slightly taller overall.
", + "Last updated 3 mins ago
", + "And an even wittier subheading to boot. Jumpstart your marketing efforts", + " with this example based on Apple’s marketing pages.
", + " Coming soon", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "# | ", + "Header | ", + "Header | ", + "Header | ", + "Header | ", + "
---|---|---|---|---|
1,001 | ", + "Lorem | ", + "ipsum | ", + "dolor | ", + "sit | ", + "
1,002 | ", + "amet | ", + "consectetur | ", + "adipiscing | ", + "elit | ", + "
1,003 | ", + "Integer | ", + "nec | ", + "odio | ", + "Praesent | ", + "
1,003 | ", + "libero | ", + "Sed | ", + "cursus | ", + "ante | ", + "
1,004 | ", + "dapibus | ", + "diam | ", + "Sed | ", + "nisi | ", + "
1,005 | ", + "Nulla | ", + "quis | ", + "sem | ", + "at | ", + "
1,006 | ", + "nibh | ", + "elementum | ", + "imperdiet | ", + "Duis | ", + "
1,007 | ", + "sagittis | ", + "ipsum | ", + "Praesent | ", + "mauris | ", + "
1,008 | ", + "Fusce | ", + "nec | ", + "tellus | ", + "sed | ", + "
1,009 | ", + "augue | ", + "semper | ", + "porta | ", + "Mauris | ", + "
1,010 | ", + "massa | ", + "Vestibulum | ", + "lacinia | ", + "arcu | ", + "
1,011 | ", + "eget | ", + "nulla | ", + "Class | ", + "aptent | ", + "
1,012 | ", + "taciti | ", + "sociosqu | ", + "ad | ", + "litora | ", + "
1,013 | ", + "torquent | ", + "per | ", + "conubia | ", + "nostra | ", + "
1,014 | ", + "per | ", + "inceptos | ", + "himenaeos | ", + "Curabitur | ", + "
1,015 | ", + "sodales | ", + "ligula | ", + "in | ", + "libero | ", + "
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies", + " vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus", + " magna.
", + " ", + "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras", + " mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris", + " condimentum nibh.
", + " ", + "Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta", + " felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum", + " massa justo sit amet risus.
", + " ", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Something short and leading about the collection below—its contents, the creator,", + " etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
", + "", + " Main call to action", + " Secondary action", + "
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "Multiple lines of text that form the lede, informing new readers quickly and", + " efficiently about what’s most interesting in this post’s contents.
", + " ", + "This is a wider card with supporting text below as a natural", + " lead-in to additional content.
", + " Continue reading", + "This is a wider card with supporting text below as a natural lead-in to", + " additional content.
", + " Continue reading", + "This blog post shows a few different types of content that’s supported and styled with Bootstrap.", + " Basic typography, images, and code are all supported.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus", + " mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere", + " consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
", + "", + "", + "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis", + " ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + "
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non", + " commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,", + " porta ac consectetur ac, vestibulum at eros.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
", + "Example code block
",
+ " Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.", + " Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean", + " lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce", + " dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit", + " amet risus.
", + "Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.", + "
", + "Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus", + " mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere", + " consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
", + "", + "", + "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis", + " ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + "
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non", + " commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,", + " porta ac consectetur ac, vestibulum at eros.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean", + " lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce", + " dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit", + " amet risus.
", + "Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.", + "
", + "${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}
"," b5${0}","Integrate Masonry with the Bootstrap grid system and"," cards component.
","","Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like"," so:
","","","<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>","
",""," By adding data-masonry='{\"percentPosition\": true }'
to the .row
wrapper, we can"," combine the powers of Bootstrap's responsive grid and Masonry's positioning.
This is a longer card with supporting text below as a natural lead-in to"," additional content. This content is a little bit longer.
","","","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
","
This card has supporting text below as a natural lead-in to additional"," content.
","Last updated 3 mins ago
","","","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
","
This card has a regular title and short paragraph of text below it.
","Last updated 3 mins ago
","","","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
","
This is another card with title and supporting text below. This card has"," some additional content to make it slightly taller overall.
","Last updated 3 mins ago
","And an even wittier subheading to boot. Jumpstart your marketing efforts"," with this example based on Apple’s marketing pages.
"," Coming soon","And an even wittier subheading.
","And an even wittier subheading.
","And an even wittier subheading.
","And an even wittier subheading.
","And an even wittier subheading.
","And an even wittier subheading.
","And an even wittier subheading.
","And an even wittier subheading.
","# | ","Header | ","Header | ","Header | ","Header | ","
---|---|---|---|---|
1,001 | ","Lorem | ","ipsum | ","dolor | ","sit | ","
1,002 | ","amet | ","consectetur | ","adipiscing | ","elit | ","
1,003 | ","Integer | ","nec | ","odio | ","Praesent | ","
1,003 | ","libero | ","Sed | ","cursus | ","ante | ","
1,004 | ","dapibus | ","diam | ","Sed | ","nisi | ","
1,005 | ","Nulla | ","quis | ","sem | ","at | ","
1,006 | ","nibh | ","elementum | ","imperdiet | ","Duis | ","
1,007 | ","sagittis | ","ipsum | ","Praesent | ","mauris | ","
1,008 | ","Fusce | ","nec | ","tellus | ","sed | ","
1,009 | ","augue | ","semper | ","porta | ","Mauris | ","
1,010 | ","massa | ","Vestibulum | ","lacinia | ","arcu | ","
1,011 | ","eget | ","nulla | ","Class | ","aptent | ","
1,012 | ","taciti | ","sociosqu | ","ad | ","litora | ","
1,013 | ","torquent | ","per | ","conubia | ","nostra | ","
1,014 | ","per | ","inceptos | ","himenaeos | ","Curabitur | ","
1,015 | ","sodales | ","ligula | ","in | ","libero | ","
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget"," metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
"," ","Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget"," metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
"," ","Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget"," metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
"," ","Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies"," vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus"," magna.
"," ","Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras"," mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris"," condimentum nibh.
"," ","Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta"," felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum"," massa justo sit amet risus.
"," ","Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod"," semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus"," commodo.
","Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod"," semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus"," commodo.
","Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod"," semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus"," commodo.
","Something short and leading about the collection below—its contents, the creator,"," etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
",""," Main call to action"," Secondary action","
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","This is a wider card with supporting text below as a natural lead-in to additional"," content. This content is a little bit longer.
","Multiple lines of text that form the lede, informing new readers quickly and"," efficiently about what’s most interesting in this post’s contents.
"," ","This is a wider card with supporting text below as a natural"," lead-in to additional content.
"," Continue reading","This is a wider card with supporting text below as a natural lead-in to"," additional content.
"," Continue reading","This blog post shows a few different types of content that’s supported and styled with Bootstrap."," Basic typography, images, and code are all supported.
","Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus"," mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere"," consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
","","","Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis"," ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
","
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet"," fermentum. Aenean lacinia bibendum nulla sed consectetur.
","Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non"," commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,"," porta ac consectetur ac, vestibulum at eros.
","Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
","Example code block
"," Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod."," Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
","Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean"," lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce"," dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit"," amet risus.
","Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.","
","Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
","Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus"," mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere"," consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
","","","Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis"," ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
","
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet"," fermentum. Aenean lacinia bibendum nulla sed consectetur.
","Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non"," commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,"," porta ac consectetur ac, vestibulum at eros.
","Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean"," lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce"," dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit"," amet risus.
","Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet"," fermentum. Aenean lacinia bibendum nulla sed consectetur.
","Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.","
","${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}
", + " b5${0}", + "", + "" + ], + "description": "Bootstrap 5 Block Quote" + }, + "Link BTN": { + "prefix": "b5-btn", + "body": [ + "${4| ,Link|}" + ], + "description": "Link BTN" + }, + "BTN-Outline": { + "prefix": "b5-btn-o", + "body": [ + "${4| ,Link|}" + ], + "description": "Link BTN" + }, + "Button Group": { + "prefix": "b5-btn-gp", + "body": [ + "${2|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante., | }
", + " ", + "
${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}
", + " b5${0}", + "Integrate Masonry with the Bootstrap grid system and", + " cards component.
", + "", + "Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like", + " so:
", + "", + "",
+ "<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>",
+ "
",
+ "",
+ " By adding data-masonry='{\"percentPosition\": true }'
to the .row
wrapper, we can",
+ " combine the powers of Bootstrap's responsive grid and Masonry's positioning.
This is a longer card with supporting text below as a natural lead-in to", + " additional content. This content is a little bit longer.
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
", + "
This card has supporting text below as a natural lead-in to additional", + " content.
", + "Last updated 3 mins ago
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
", + "
This card has a regular title and short paragraph of text below it.
", + "Last updated 3 mins ago
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
", + "
This is another card with title and supporting text below. This card has", + " some additional content to make it slightly taller overall.
", + "Last updated 3 mins ago
", + "And an even wittier subheading to boot. Jumpstart your marketing efforts", + " with this example based on Apple’s marketing pages.
", + " Coming soon", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "# | ", + "Header | ", + "Header | ", + "Header | ", + "Header | ", + "
---|---|---|---|---|
1,001 | ", + "Lorem | ", + "ipsum | ", + "dolor | ", + "sit | ", + "
1,002 | ", + "amet | ", + "consectetur | ", + "adipiscing | ", + "elit | ", + "
1,003 | ", + "Integer | ", + "nec | ", + "odio | ", + "Praesent | ", + "
1,003 | ", + "libero | ", + "Sed | ", + "cursus | ", + "ante | ", + "
1,004 | ", + "dapibus | ", + "diam | ", + "Sed | ", + "nisi | ", + "
1,005 | ", + "Nulla | ", + "quis | ", + "sem | ", + "at | ", + "
1,006 | ", + "nibh | ", + "elementum | ", + "imperdiet | ", + "Duis | ", + "
1,007 | ", + "sagittis | ", + "ipsum | ", + "Praesent | ", + "mauris | ", + "
1,008 | ", + "Fusce | ", + "nec | ", + "tellus | ", + "sed | ", + "
1,009 | ", + "augue | ", + "semper | ", + "porta | ", + "Mauris | ", + "
1,010 | ", + "massa | ", + "Vestibulum | ", + "lacinia | ", + "arcu | ", + "
1,011 | ", + "eget | ", + "nulla | ", + "Class | ", + "aptent | ", + "
1,012 | ", + "taciti | ", + "sociosqu | ", + "ad | ", + "litora | ", + "
1,013 | ", + "torquent | ", + "per | ", + "conubia | ", + "nostra | ", + "
1,014 | ", + "per | ", + "inceptos | ", + "himenaeos | ", + "Curabitur | ", + "
1,015 | ", + "sodales | ", + "ligula | ", + "in | ", + "libero | ", + "
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies", + " vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus", + " magna.
", + " ", + "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras", + " mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris", + " condimentum nibh.
", + " ", + "Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta", + " felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum", + " massa justo sit amet risus.
", + " ", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Something short and leading about the collection below—its contents, the creator,", + " etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
", + "", + " Main call to action", + " Secondary action", + "
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "Multiple lines of text that form the lede, informing new readers quickly and", + " efficiently about what’s most interesting in this post’s contents.
", + " ", + "This is a wider card with supporting text below as a natural", + " lead-in to additional content.
", + " Continue reading", + "This is a wider card with supporting text below as a natural lead-in to", + " additional content.
", + " Continue reading", + "This blog post shows a few different types of content that’s supported and styled with Bootstrap.", + " Basic typography, images, and code are all supported.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus", + " mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere", + " consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
", + "", + "", + "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis", + " ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + "
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non", + " commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,", + " porta ac consectetur ac, vestibulum at eros.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
", + "Example code block
",
+ " Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.", + " Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean", + " lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce", + " dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit", + " amet risus.
", + "Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.", + "
", + "Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus", + " mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere", + " consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
", + "", + "", + "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis", + " ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + "
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non", + " commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,", + " porta ac consectetur ac, vestibulum at eros.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean", + " lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce", + " dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit", + " amet risus.
", + "Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.", + "
", + "${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}
", + " b5${0}", + "Integrate Masonry with the Bootstrap grid system and", + " cards component.
", + "", + "Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like", + " so:
", + "", + "",
+ "<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>",
+ "
",
+ "",
+ " By adding data-masonry='{\"percentPosition\": true }'
to the .row
wrapper, we can",
+ " combine the powers of Bootstrap's responsive grid and Masonry's positioning.
This is a longer card with supporting text below as a natural lead-in to", + " additional content. This content is a little bit longer.
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
", + "
This card has supporting text below as a natural lead-in to additional", + " content.
", + "Last updated 3 mins ago
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
", + "
This card has a regular title and short paragraph of text below it.
", + "Last updated 3 mins ago
", + "", + "", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
", + "
This is another card with title and supporting text below. This card has", + " some additional content to make it slightly taller overall.
", + "Last updated 3 mins ago
", + "And an even wittier subheading to boot. Jumpstart your marketing efforts", + " with this example based on Apple’s marketing pages.
", + " Coming soon", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "And an even wittier subheading.
", + "# | ", + "Header | ", + "Header | ", + "Header | ", + "Header | ", + "
---|---|---|---|---|
1,001 | ", + "Lorem | ", + "ipsum | ", + "dolor | ", + "sit | ", + "
1,002 | ", + "amet | ", + "consectetur | ", + "adipiscing | ", + "elit | ", + "
1,003 | ", + "Integer | ", + "nec | ", + "odio | ", + "Praesent | ", + "
1,003 | ", + "libero | ", + "Sed | ", + "cursus | ", + "ante | ", + "
1,004 | ", + "dapibus | ", + "diam | ", + "Sed | ", + "nisi | ", + "
1,005 | ", + "Nulla | ", + "quis | ", + "sem | ", + "at | ", + "
1,006 | ", + "nibh | ", + "elementum | ", + "imperdiet | ", + "Duis | ", + "
1,007 | ", + "sagittis | ", + "ipsum | ", + "Praesent | ", + "mauris | ", + "
1,008 | ", + "Fusce | ", + "nec | ", + "tellus | ", + "sed | ", + "
1,009 | ", + "augue | ", + "semper | ", + "porta | ", + "Mauris | ", + "
1,010 | ", + "massa | ", + "Vestibulum | ", + "lacinia | ", + "arcu | ", + "
1,011 | ", + "eget | ", + "nulla | ", + "Class | ", + "aptent | ", + "
1,012 | ", + "taciti | ", + "sociosqu | ", + "ad | ", + "litora | ", + "
1,013 | ", + "torquent | ", + "per | ", + "conubia | ", + "nostra | ", + "
1,014 | ", + "per | ", + "inceptos | ", + "himenaeos | ", + "Curabitur | ", + "
1,015 | ", + "sodales | ", + "ligula | ", + "in | ", + "libero | ", + "
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget", + " metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + " ", + "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies", + " vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus", + " magna.
", + " ", + "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras", + " mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris", + " condimentum nibh.
", + " ", + "Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta", + " felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum", + " massa justo sit amet risus.
", + " ", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod", + " semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus", + " commodo.
", + "Something short and leading about the collection below—its contents, the creator,", + " etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
", + "", + " Main call to action", + " Secondary action", + "
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "This is a wider card with supporting text below as a natural lead-in to additional", + " content. This content is a little bit longer.
", + "Multiple lines of text that form the lede, informing new readers quickly and", + " efficiently about what’s most interesting in this post’s contents.
", + " ", + "This is a wider card with supporting text below as a natural", + " lead-in to additional content.
", + " Continue reading", + "This is a wider card with supporting text below as a natural lead-in to", + " additional content.
", + " Continue reading", + "This blog post shows a few different types of content that’s supported and styled with Bootstrap.", + " Basic typography, images, and code are all supported.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus", + " mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere", + " consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
", + "", + "", + "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis", + " ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + "
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non", + " commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,", + " porta ac consectetur ac, vestibulum at eros.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
", + "Example code block
",
+ " Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.", + " Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean", + " lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce", + " dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit", + " amet risus.
", + "Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.", + "
", + "Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus", + " mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere", + " consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
", + "", + "", + "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis", + " ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
", + "
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non", + " commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,", + " porta ac consectetur ac, vestibulum at eros.
", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean", + " lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce", + " dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit", + " amet risus.
", + "Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet", + " fermentum. Aenean lacinia bibendum nulla sed consectetur.
", + "Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.", + "
", + "Something short and leading about the collection below—its contents, the creator, + etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
+ +This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural + lead-in to additional content.
+ Continue reading +This is a wider card with supporting text below as a natural + lead-in to additional content.
+ Continue reading +Multiple lines of text that form the lede, informing new readers quickly and + efficiently about what’s most interesting in this post’s contents.
+ +This is a wider card with supporting text below as a natural + lead-in to additional content.
+ Continue reading +This is a wider card with supporting text below as a natural lead-in to + additional content.
+ Continue reading +This blog post shows a few different types of content that’s supported and styled with Bootstrap. + Basic typography, images, and code are all supported.
+Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere + consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
+++Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis + ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet + fermentum. Aenean lacinia bibendum nulla sed consectetur.
+Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non + commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, + porta ac consectetur ac, vestibulum at eros.
+Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+Example code block
+ Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. + Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
+Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean + lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce + dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit + amet risus.
+Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. +
+Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
+Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere + consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
+++Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis + ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet + fermentum. Aenean lacinia bibendum nulla sed consectetur.
+Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non + commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, + porta ac consectetur ac, vestibulum at eros.
+Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean + lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce + dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit + amet risus.
+Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet + fermentum. Aenean lacinia bibendum nulla sed consectetur.
+Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. +
+Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies + vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus + magna.
+ +Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras + mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh.
+ +Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta + felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum + massa justo sit amet risus.
+ +Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod + semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus + commodo.
+Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod + semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus + commodo.
+Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod + semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus + commodo.
+# | +Header | +Header | +Header | +Header | +
---|---|---|---|---|
1,001 | +Lorem | +ipsum | +dolor | +sit | +
1,002 | +amet | +consectetur | +adipiscing | +elit | +
1,003 | +Integer | +nec | +odio | +Praesent | +
1,003 | +libero | +Sed | +cursus | +ante | +
1,004 | +dapibus | +diam | +Sed | +nisi | +
1,005 | +Nulla | +quis | +sem | +at | +
1,006 | +nibh | +elementum | +imperdiet | +Duis | +
1,007 | +sagittis | +ipsum | +Praesent | +mauris | +
1,008 | +Fusce | +nec | +tellus | +sed | +
1,009 | +augue | +semper | +porta | +Mauris | +
1,010 | +massa | +Vestibulum | +lacinia | +arcu | +
1,011 | +eget | +nulla | +Class | +aptent | +
1,012 | +taciti | +sociosqu | +ad | +litora | +
1,013 | +torquent | +per | +conubia | +nostra | +
1,014 | +per | +inceptos | +himenaeos | +Curabitur | +
1,015 | +sodales | +ligula | +in | +libero | +
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
+In these examples the .themed-grid-col
class is added to the columns to add some theming. This
+ is not a class that is available in Bootstrap by default.
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts + at a minimum viewport size and automatically applies to the larger devices unless overridden.
+ +Get three equal-width columns starting at desktops and scaling to large desktops. On mobile + devices, tablets and below, the columns will automatically stack.
+By using the .row-cols-*
classes, you can easily create a grid with equal columns.
.col
child of .row-cols-md-3
.col
child of .row-cols-md-3
.col
child of .row-cols-md-3
Get three columns starting at desktops and scaling to large desktops of various widths. + Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns + start stacking no matter the viewport.
+Get two columns starting at desktops and scaling to large desktops.
++ No grid classes are necessary for full-width elements. +
+ +Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you + two columns starting at desktops and scaling to large desktops, with another two (equal + widths) within the larger column.
+At mobile device sizes, tablets and down, these columns and their nested columns will stack.
+The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm + (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes + to create more dynamic and flexible layouts.
+Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only + need to specify md.
+With .gx-*
classes, the horizontal gutters can be adjusted.
.col
with .gx-4
gutters.col
with .gx-4
gutters.col
with .gx-4
gutters.col
with .gx-4
gutters.col
with .gx-4
gutters.col
with .gx-4
guttersUse the .gy-*
classes to control the vertical gutters.
.col
with .gy-4
gutters.col
with .gy-4
gutters.col
with .gy-4
gutters.col
with .gy-4
gutters.col
with .gy-4
gutters.col
with .gy-4
guttersWith .g-*
classes, the gutters in both directions can be adjusted.
.col
with .g-3
gutters.col
with .g-3
gutters.col
with .g-3
gutters.col
with .g-3
gutters.col
with .g-3
gutters.col
with .g-3
guttersAdditional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.
+ v5 adds a new xxl
breakpoint.
<h1>h1. Bootstrap heading</h1>
+<h2>h2. Bootstrap heading</h2>
+<h3>h3. Bootstrap heading</h3>
+<h4>h4. Bootstrap heading</h4>
+<h5>h5. Bootstrap heading</h5>
+<h6>h6. Bootstrap heading</h6>
+ <h1 class="display-1">Display 1</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-3">Display 3</h1>
+<h1 class="display-4">Display 4</h1>
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim alias beatae sed dignissimos + expedita inventore totam eius ut pariatur, quidem maxime, aut asperiores repellat. Labore laborum eius + quibusdam placeat ratione.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim alias beatae sed dignissimos expedita + inventore totam eius ut pariatur, quidem maxime, aut asperiores repellat. Labore laborum eius quibusdam + placeat ratione.
+<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim alias beatae sed dignissimos expedita inventore totam eius ut pariatur, quidem maxime, aut asperiores repellat. Labore laborum eius quibusdam placeat ratione.</p>
+<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim alias beatae sed dignissimos expedita inventore totam eius ut pariatur, quidem maxime, aut asperiores repellat. Labore laborum eius quibusdam placeat ratione.</p>
+ 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.
+<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+<p><u>This line of text will render as underlined</u></p>
+<p><small>This line of text is meant to be treated as fine print.</small></p>
+<p><strong>This line rendered as bold text.</strong></p>
+<p><em>This line rendered as italicized text.</em></p>
+ attr
+HTML
+<p><abbr title="attribute">attr</abbr></p>
+<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
+ ++ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
++ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
++ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
<blockquote class="blockquote">
+<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+</blockquote>
+
+<blockquote class="blockquote">
+<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+
+<blockquote class="blockquote text-center">
+<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+
+<blockquote class="blockquote text-right">
+<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+ <ul class="list-unstyled">
+<li>Lorem ipsum dolor sit amet</li>
+<li>Consectetur adipiscing elit</li>
+<li>Integer molestie lorem at massa</li>
+<li>Facilisis in pretium nisl aliquet</li>
+<li>Nulla volutpat aliquam velit
+<ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+</ul>
+</li>
+<li>Faucibus porta lacus fringilla vel</li>
+<li>Aenean sit amet erat nunc</li>
+<li>Eget porttitor lorem</li>
+</ul>
+
+<ul class="list-inline">
+<li class="list-inline-item">Lorem ipsum</li>
+<li class="list-inline-item">Phasellus iaculis</li>
+<li class="list-inline-item">Nulla volutpat</li>
+</ul>
+ <section>
should be wrapped as inline.
+ For example, <code><section></code> should be wrapped as inline.
+ <p>Sample text here...</p>
+<p>And another line of sample text here...</p>
+
+ <pre><code><p>Sample text here...</p>
+<p>And another line of sample text here...</p>
+</code></pre>
+ <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
+ To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
+To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
+ <samp>This text is meant to be treated as sample output from a computer program.</samp>
+ <img src="http://via.placeholder.com/900x200" class="img-fluid" alt="Responsive image">
+ <img src="http://via.placeholder.com/200x200" alt="..." class="img-thumbnail">
+ <img src="http://via.placeholder.com/200x200" class="rounded float-left" alt="...">
+<img src="http://via.placeholder.com/200x200" class="rounded float-right" alt="...">
+ <img src="http://via.placeholder.com/200x200" class="rounded mx-auto d-block" alt="...">
+ <div class="text-center">
+<img src="http://via.placeholder.com/200x200" class="rounded" alt="...">
+</div>
+ # | +First | +Last | +Handle | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry | +the Bird | +
<table class="table">
+<thead>
+<tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+</tr>
+<tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+</tr>
+<tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+</tr>
+</tbody>
+</table>
+ # | +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 | +
<table class="table">
+<thead class="thead-dark">
+<tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+</tr>
+<tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+</tr>
+<tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+</tr>
+</tbody>
+</table>
+
+<table class="table">
+<thead class="thead-light">
+<tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+</tr>
+<tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+</tr>
+<tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+</tr>
+</tbody>
+</table>
+ # | +First | +Last | +Handle | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry | +the Bird | +
<table class="table table-striped">
+<thead>
+<tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+</tr>
+<tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+</tr>
+<tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+</tr>
+</tbody>
+</table>
+ # | +First | +Last | +Handle | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry the Bird | +
<table class="table table-bordered">
+<thead>
+<tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+</tr>
+<tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+</tr>
+<tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+</tr>
+</tbody>
+</table>
+ # | +First | +Last | +Handle | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry the Bird | +
<table class="table table-borderless">
+<thead>
+<tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+</tr>
+<tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+</tr>
+<tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+</tr>
+</tbody>
+</table>
+ # | +First | +Last | +Handle | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry the Bird | +
<table class="table table-hover">
+<thead>
+<tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+</tr>
+<tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+</tr>
+<tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+</tr>
+</tbody>
+</table>
+ # | +First | +Last | +Handle | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry the Bird | +
<table class="table table-sm">
+<thead>
+<tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+</tr>
+<tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+</tr>
+<tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+</tr>
+</tbody>
+</table>
+ Class | +Heading | +Heading | +
---|---|---|
Active | +Cell | +Cell | +
Default | +Cell | +Cell | +
Primary | +Cell | +Cell | +
Secondary | +Cell | +Cell | +
Success | +Cell | +Cell | +
Danger | +Cell | +Cell | +
Warning | +Cell | +Cell | +
Info | +Cell | +Cell | +
Light | +Cell | +Cell | +
Dark | +Cell | +Cell | +
<!-- On rows -->
+<tr class="table-active">...</tr>
+
+<tr class="table-primary">...</tr>
+<tr class="table-secondary">...</tr>
+<tr class="table-success">...</tr>
+<tr class="table-danger">...</tr>
+<tr class="table-warning">...</tr>
+<tr class="table-info">...</tr>
+<tr class="table-light">...</tr>
+<tr class="table-dark">...</tr>
+
+<!-- On cells (`td` or `th`) -->
+<tr>
+<td class="table-active">...</td>
+
+<td class="table-primary">...</td>
+<td class="table-secondary">...</td>
+<td class="table-success">...</td>
+<td class="table-danger">...</td>
+<td class="table-warning">...</td>
+<td class="table-info">...</td>
+<td class="table-light">...</td>
+<td class="table-dark">...</td>
+</tr>
+ <div class="alert alert-primary" role="alert">
+A simple primary alert—check it out!
+</div>
+<div class="alert alert-secondary" role="alert">
+A simple secondary alert—check it out!
+</div>
+<div class="alert alert-success" role="alert">
+A simple success alert—check it out!
+</div>
+<div class="alert alert-danger" role="alert">
+A simple danger alert—check it out!
+</div>
+<div class="alert alert-warning" role="alert">
+A simple warning alert—check it out!
+</div>
+<div class="alert alert-info" role="alert">
+A simple info alert—check it out!
+</div>
+<div class="alert alert-light" role="alert">
+A simple light alert—check it out!
+</div>
+<div class="alert alert-dark" role="alert">
+A simple dark alert—check it out!
+</div>
+ <div class="alert alert-primary" role="alert">
+A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-secondary" role="alert">
+A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-success" role="alert">
+A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-danger" role="alert">
+A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-warning" role="alert">
+A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-info" role="alert">
+A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-light" role="alert">
+A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-dark" role="alert">
+A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+ <span class="badge badge-primary">Primary</span>
+<span class="badge badge-secondary">Secondary</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-danger">Danger</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-light">Light</span>
+<span class="badge badge-dark">Dark</span>
+ <span class="badge badge-pill badge-primary">Primary</span>
+<span class="badge badge-pill badge-secondary">Secondary</span>
+<span class="badge badge-pill badge-success">Success</span>
+<span class="badge badge-pill badge-danger">Danger</span>
+<span class="badge badge-pill badge-warning">Warning</span>
+<span class="badge badge-pill badge-info">Info</span>
+<span class="badge badge-pill badge-light">Light</span>
+<span class="badge badge-pill badge-dark">Dark</span>
+ <a href="#" class="badge badge-primary">Primary</a>
+<a href="#" class="badge badge-secondary">Secondary</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-danger">Danger</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-light">Light</a>
+<a href="#" class="badge badge-dark">Dark</a>
+ <h1>Example heading <span class="badge badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
+ <button type="button" class="btn btn-primary">
+Notifications <span class="badge badge-light">4</span>
+</button>
+ <nav aria-label="breadcrumb">
+<ol class="breadcrumb">
+<li class="breadcrumb-item active" aria-current="page">Home</li>
+</ol>
+</nav>
+
+<nav aria-label="breadcrumb">
+<ol class="breadcrumb">
+<li class="breadcrumb-item"><a href="#">Home</a></li>
+<li class="breadcrumb-item active" aria-current="page">Library</li>
+</ol>
+</nav>
+
+<nav aria-label="breadcrumb">
+<ol class="breadcrumb">
+<li class="breadcrumb-item"><a href="#">Home</a></li>
+<li class="breadcrumb-item"><a href="#">Library</a></li>
+<li class="breadcrumb-item active" aria-current="page">Data</li>
+</ol>
+</nav>
+ <button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-warning">Warning</button>
+<button type="button" class="btn btn-info">Info</button>
+<button type="button" class="btn btn-light">Light</button>
+<button type="button" class="btn btn-dark">Dark</button>
+
+<button type="button" class="btn btn-link">Link</button>
+ <button type="button" class="btn btn-outline-primary">Primary</button>
+<button type="button" class="btn btn-outline-secondary">Secondary</button>
+<button type="button" class="btn btn-outline-success">Success</button>
+<button type="button" class="btn btn-outline-danger">Danger</button>
+<button type="button" class="btn btn-outline-warning">Warning</button>
+<button type="button" class="btn btn-outline-info">Info</button>
+<button type="button" class="btn btn-outline-light">Light</button>
+<button type="button" class="btn btn-outline-dark">Dark</button>
+ <button type="button" class="btn btn-primary btn-sm">Small button</button>
+<button type="button" class="btn btn-secondary btn-sm">Small button</button>
+
+<br><br>
+
+<button type="button" class="btn btn-primary">Normal button</button>
+<button type="button" class="btn btn-secondary">Normal button</button>
+
+<br><br>
+
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+ <div class="btn-group" role="group" aria-label="Basic example">
+<button type="button" class="btn btn-secondary">Left</button>
+<button type="button" class="btn btn-secondary">Middle</button>
+<button type="button" class="btn btn-secondary">Right</button>
+</div>
+ <div class="btn-group-vertical" role="group" aria-label="Basic example">
+<button type="button" class="btn btn-secondary">First</button>
+<button type="button" class="btn btn-secondary">Second</button>
+<button type="button" class="btn btn-secondary">Third</button>
+</div>
+ <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+<div class="btn-group mr-2" role="group" aria-label="First group">
+<button type="button" class="btn btn-secondary">1</button>
+<button type="button" class="btn btn-secondary">2</button>
+<button type="button" class="btn btn-secondary">3</button>
+<button type="button" class="btn btn-secondary">4</button>
+</div>
+<div class="btn-group mr-2" role="group" aria-label="Second group">
+<button type="button" class="btn btn-secondary">5</button>
+<button type="button" class="btn btn-secondary">6</button>
+<button type="button" class="btn btn-secondary">7</button>
+</div>
+<div class="btn-group" role="group" aria-label="Third group">
+<button type="button" class="btn btn-secondary">8</button>
+</div>
+</div>
+ <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
+<button type="button" class="btn btn-secondary">Left</button>
+<button type="button" class="btn btn-secondary">Middle</button>
+<button type="button" class="btn btn-secondary">Right</button>
+</div>
+
+<br><br>
+
+<div class="btn-group" role="group" aria-label="Basic example">
+<button type="button" class="btn btn-secondary">Left</button>
+<button type="button" class="btn btn-secondary">Middle</button>
+<button type="button" class="btn btn-secondary">Right</button>
+</div>
+
+<br><br>
+
+<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
+<button type="button" class="btn btn-secondary">Left</button>
+<button type="button" class="btn btn-secondary">Middle</button>
+<button type="button" class="btn btn-secondary">Right</button>
+</div>
+ Some quick example text to build on the card title and make up the bulk of the card's + content.
+ Go somewhere +<div class="card" style="width: 18rem;">
+<img class="card-img-top" src="http://via.placeholder.com/286x180" alt="Card image cap">
+
+<div class="card-body">
+<h5 class="card-title">Card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+<a href="#" class="btn btn-primary">Go somewhere</a>
+</div>
+</div>
+ Some quick example text to build on the card title and make up the bulk of the card's + content.
+ Card link + Another link +<div class="card" style="width: 18rem;">
+<div class="card-body">
+<h5 class="card-title">Card title</h5>
+<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+<a href="#" class="card-link">Card link</a>
+<a href="#" class="card-link">Another link</a>
+</div>
+</div>
+ Some quick example text to build on the card title and make up the bulk of the card's + content.
+Some quick example text to build on the card title and make up the bulk of the card's + content.
+Some quick example text to build on the card title and make up the bulk of the card's + content.
+Some quick example text to build on the card title and make up the bulk of the card's + content.
+Some quick example text to build on the card title and make up the bulk of the card's + content.
+Some quick example text to build on the card title and make up the bulk of the card's + content.
+Some quick example text to build on the card title and make up the bulk of the card's + content.
+Some quick example text to build on the card title and make up the bulk of the card's + content.
+<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
+<div class="card-header">Header</div>
+<div class="card-body">
+<h5 class="card-title">Primary card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+</div>
+</div>
+<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
+<div class="card-header">Header</div>
+<div class="card-body">
+<h5 class="card-title">Secondary card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+</div>
+</div>
+<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
+<div class="card-header">Header</div>
+<div class="card-body">
+<h5 class="card-title">Success card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+</div>
+</div>
+<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
+<div class="card-header">Header</div>
+<div class="card-body">
+<h5 class="card-title">Danger card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+</div>
+</div>
+<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
+<div class="card-header">Header</div>
+<div class="card-body">
+<h5 class="card-title">Warning card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+</div>
+</div>
+<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
+<div class="card-header">Header</div>
+<div class="card-body">
+<h5 class="card-title">Info card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+</div>
+</div>
+<div class="card bg-light mb-3" style="max-width: 18rem;">
+<div class="card-header">Header</div>
+<div class="card-body">
+<h5 class="card-title">Light card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+</div>
+</div>
+<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
+<div class="card-header">Header</div>
+<div class="card-body">
+<h5 class="card-title">Dark card title</h5>
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+</div>
+</div>
+ This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+Last updated 3 mins ago
+This card has supporting text below as a natural lead-in to additional content.
+Last updated 3 mins ago
+This is a wider card with supporting text below as a natural lead-in to additional + content. This card has even longer content than the first to show that equal height action.
+Last updated 3 mins ago
+<div class="card-group">
+<div class="card">
+<img class="card-img-top" src="http://via.placeholder.com/400x200" alt="Card image cap">
+<div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+</div>
+</div>
+<div class="card">
+<img class="card-img-top" src="http://via.placeholder.com/400x200" alt="Card image cap">
+<div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+</div>
+</div>
+<div class="card">
+<img class="card-img-top" src="http://via.placeholder.com/400x200" alt="Card image cap">
+<div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+</div>
+</div>
+</div>
+ This is a wider card with supporting text below as a natural lead-in to additional + content. This content is a little bit longer.
+Last updated 3 mins ago
+This card has supporting text below as a natural lead-in to additional content.
+Last updated 3 mins ago
+This is a wider card with supporting text below as a natural lead-in to additional + content. This card has even longer content than the first to show that equal height action.
+Last updated 3 mins ago
+<div class="card-deck">
+<div class="card">
+<img class="card-img-top" src="http://via.placeholder.com/400x200" alt="Card image cap">
+<div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+</div>
+</div>
+<div class="card">
+<img class="card-img-top" src="http://via.placeholder.com/400x200" alt="Card image cap">
+<div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+</div>
+</div>
+<div class="card">
+<img class="card-img-top" src="http://via.placeholder.com/400x200" alt="Card image cap">
+<div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+</div>
+</div>
+</div>
+ <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
+<div class="carousel-inner">
+<div class="carousel-item active">
+ <img class="d-block w-100" src="http://via.placeholder.com/800x200/550000/fff" alt="First slide">
+</div>
+<div class="carousel-item">
+ <img class="d-block w-100" src="http://via.placeholder.com/800x200/005500/fff" alt="Second slide">
+</div>
+<div class="carousel-item">
+ <img class="d-block w-100" src="http://via.placeholder.com/800x200/000055/fff" alt="Third slide">
+</div>
+</div>
+</div>
+ <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+<div class="carousel-inner">
+<div class="carousel-item active">
+ <img class="d-block w-100" src="http://via.placeholder.com/800x200/550000/fff" alt="First slide">
+</div>
+<div class="carousel-item">
+ <img class="d-block w-100" src="http://via.placeholder.com/800x200/005500/fff" alt="Second slide">
+</div>
+<div class="carousel-item">
+ <img class="d-block w-100" src="http://via.placeholder.com/800x200/000055/fff" alt="Third slide">
+</div>
+</div>
+<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+<span class="sr-only">Previous</span>
+</a>
+<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="sr-only">Next</span>
+</a>
+</div>
+ + + Link with href + + +
+<p>
+<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+Link with href
+</a>
+<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+Button with data-target
+</button>
+</p>
+<div class="collapse" id="collapseExample">
+<div class="card card-body">
+Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+</div>
+</div>
+ + Toggle first element + + +
+<p>
+<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
+<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
+<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
+</p>
+<div class="row">
+<div class="col">
+<div class="collapse multi-collapse" id="multiCollapseExample1">
+ <div class="card card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ </div>
+</div>
+</div>
+<div class="col">
+<div class="collapse multi-collapse" id="multiCollapseExample2">
+ <div class="card card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ </div>
+</div>
+</div>
+</div>
+ <div class="accordion" id="accordionExample">
+<div class="card">
+<div class="card-header" id="headingOne">
+ <h5 class="mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ Collapsible Group Item #1
+ </button>
+ </h5>
+</div>
+
+<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+</div>
+</div>
+<div class="card">
+<div class="card-header" id="headingTwo">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+ Collapsible Group Item #2
+ </button>
+ </h5>
+</div>
+<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+</div>
+</div>
+<div class="card">
+<div class="card-header" id="headingThree">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+ Collapsible Group Item #3
+ </button>
+ </h5>
+</div>
+<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+</div>
+</div>
+</div>
+ <div class="dropdown">
+<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+Dropdown button
+</button>
+<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+<a class="dropdown-item" href="#">Action</a>
+<a class="dropdown-item" href="#">Another action</a>
+<a class="dropdown-item" href="#">Something else here</a>
+</div>
+</div>
+
+<br>
+
+<div class="dropdown">
+<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+Dropdown link
+</a>
+
+<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+<a class="dropdown-item" href="#">Action</a>
+<a class="dropdown-item" href="#">Another action</a>
+<a class="dropdown-item" href="#">Something else here</a>
+</div>
+</div>
+
+<br>
+
+<div class="btn-group">
+<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+Action
+</button>
+<div class="dropdown-menu">
+<a class="dropdown-item" href="#">Action</a>
+<a class="dropdown-item" href="#">Another action</a>
+<a class="dropdown-item" href="#">Something else here</a>
+<div class="dropdown-divider"></div>
+<a class="dropdown-item" href="#">Separated link</a>
+</div>
+</div>
+ <form>
+<div class="form-group">
+<label for="exampleInputEmail1">Email address</label>
+<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+</div>
+<div class="form-group">
+<label for="exampleInputPassword1">Password</label>
+<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+</div>
+<div class="form-group form-check">
+<input type="checkbox" class="form-check-input" id="exampleCheck1">
+<label class="form-check-label" for="exampleCheck1">Check me out</label>
+</div>
+<button type="submit" class="btn btn-primary">Submit</button>
+</form>
+ <form>
+<div class="form-group">
+<label for="exampleFormControlInput1">Email address</label>
+<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
+</div>
+<div class="form-group">
+<label for="exampleFormControlSelect1">Example select</label>
+<select class="form-control" id="exampleFormControlSelect1">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+</div>
+<div class="form-group">
+<label for="exampleFormControlSelect2">Example multiple select</label>
+<select multiple class="form-control" id="exampleFormControlSelect2">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+</div>
+<div class="form-group">
+<label for="exampleFormControlTextarea1">Example textarea</label>
+<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+</div>
+<div class="form-group">
+<label for="exampleFormControlFile1">Example file input</label>
+<input type="file" class="form-control-file" id="exampleFormControlFile1">
+</div>
+</form>
+ <form>
+<div class="form-group"><input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"></div>
+<div class="form-group"><input class="form-control" type="text" placeholder="Default input"></div>
+<div class="form-group"><input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"></div>
+</form>
+ <form>
+<div class="form-check">
+ <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
+ <label class="form-check-label" for="defaultCheck1">
+ Default checkbox
+ </label>
+</div>
+<div class="form-check">
+ <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
+ <label class="form-check-label" for="defaultCheck2">
+ Disabled checkbox
+ </label>
+</div>
+
+<br>
+
+<div class="form-check">
+ <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
+ <label class="form-check-label" for="exampleRadios1">
+ Default radio
+ </label>
+</div>
+<div class="form-check">
+ <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
+ <label class="form-check-label" for="exampleRadios2">
+ Second default radio
+ </label>
+</div>
+<div class="form-check disabled">
+ <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
+ <label class="form-check-label" for="exampleRadios3">
+ Disabled radio
+ </label>
+</div>
+</form>
+ <div class="custom-control custom-checkbox">
+<input type="checkbox" class="custom-control-input" id="customCheck1">
+<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
+</div>
+
+<br>
+
+<div class="custom-control custom-radio">
+<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
+<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
+</div>
+<div class="custom-control custom-radio">
+<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
+<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
+</div>
+
+<br>
+
+<select class="custom-select">
+<option selected>Open this select menu</option>
+<option value="1">One</option>
+<option value="2">Two</option>
+<option value="3">Three</option>
+</select>
+
+<br><br>
+
+<div class="custom-file">
+<input type="file" class="custom-file-input" id="customFile">
+<label class="custom-file-label" for="customFile">Choose file</label>
+</div>
+ <div class="input-group mb-3">
+<div class="input-group-prepend">
+<span class="input-group-text" id="basic-addon1">@</span>
+</div>
+<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
+</div>
+
+<div class="input-group mb-3">
+<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
+<div class="input-group-append">
+<span class="input-group-text" id="basic-addon2">@example.com</span>
+</div>
+</div>
+
+<label for="basic-url">Your vanity URL</label>
+<div class="input-group mb-3">
+<div class="input-group-prepend">
+<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
+</div>
+<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+</div>
+
+<div class="input-group mb-3">
+<div class="input-group-prepend">
+<span class="input-group-text">$</span>
+</div>
+<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+<div class="input-group-append">
+<span class="input-group-text">.00</span>
+</div>
+</div>
+
+<div class="input-group">
+<div class="input-group-prepend">
+<span class="input-group-text">With textarea</span>
+</div>
+<textarea class="form-control" aria-label="With textarea"></textarea>
+</div>
+ <div class="input-group input-group-sm mb-3">
+<div class="input-group-prepend">
+<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
+</div>
+<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
+</div>
+
+<div class="input-group mb-3">
+<div class="input-group-prepend">
+<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
+</div>
+<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
+</div>
+
+<div class="input-group input-group-lg">
+<div class="input-group-prepend">
+<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
+</div>
+<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
+</div>
+ <div class="input-group mb-3">
+<div class="input-group-prepend">
+<div class="input-group-text">
+ <input type="checkbox" aria-label="Checkbox for following text input">
+</div>
+</div>
+<input type="text" class="form-control" aria-label="Text input with checkbox">
+</div>
+
+<div class="input-group">
+<div class="input-group-prepend">
+<div class="input-group-text">
+<input type="radio" aria-label="Radio button for following text input">
+</div>
+</div>
+<input type="text" class="form-control" aria-label="Text input with radio button">
+</div>
+ <div class="input-group">
+<div class="input-group-prepend">
+<span class="input-group-text" id="">First and last name</span>
+</div>
+<input type="text" class="form-control">
+<input type="text" class="form-control">
+</div>
+ <div class="input-group mb-3">
+<div class="input-group-prepend">
+<span class="input-group-text">$</span>
+<span class="input-group-text">0.00</span>
+</div>
+<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+</div>
+
+<div class="input-group">
+<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+<div class="input-group-append">
+<span class="input-group-text">$</span>
+<span class="input-group-text">0.00</span>
+</div>
+</div>
+ <div class="input-group mb-3">
+<div class="input-group-prepend">
+<button class="btn btn-outline-secondary" type="button">Button</button>
+</div>
+<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
+</div>
+
+<div class="input-group mb-3">
+<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
+<div class="input-group-append">
+<button class="btn btn-outline-secondary" type="button">Button</button>
+</div>
+</div>
+
+<div class="input-group mb-3">
+<div class="input-group-prepend">
+<button class="btn btn-outline-secondary" type="button">Button</button>
+<button class="btn btn-outline-secondary" type="button">Button</button>
+</div>
+<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
+</div>
+
+<div class="input-group">
+<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
+<div class="input-group-append">
+<button class="btn btn-outline-secondary" type="button">Button</button>
+<button class="btn btn-outline-secondary" type="button">Button</button>
+</div>
+</div>
+ <div class="input-group mb-3">
+<div class="input-group-prepend">
+<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
+<div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div role="separator" class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+</div>
+</div>
+<input type="text" class="form-control" aria-label="Text input with dropdown button">
+</div>
+
+<div class="input-group">
+<input type="text" class="form-control" aria-label="Text input with dropdown button">
+<div class="input-group-append">
+<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
+<div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div role="separator" class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+</div>
+</div>
+</div>
+ This is a simple hero unit, a simple jumbotron-style component for calling extra attention to + featured content or information.
+It uses utility classes for typography and spacing to space content out within the larger container.
+ Learn more +<div class="jumbotron">
+<h1 class="display-4">Hello, world!</h1>
+<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+<hr class="my-4">
+<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
+</div>
+ <ul class="list-group">
+<li class="list-group-item">Cras justo odio</li>
+<li class="list-group-item">Dapibus ac facilisis in</li>
+<li class="list-group-item">Morbi leo risus</li>
+<li class="list-group-item">Porta ac consectetur ac</li>
+<li class="list-group-item">Vestibulum at eros</li>
+</ul>
+ <ul class="list-group">
+<li class="list-group-item active">Cras justo odio</li>
+<li class="list-group-item">Dapibus ac facilisis in</li>
+<li class="list-group-item">Morbi leo risus</li>
+<li class="list-group-item">Porta ac consectetur ac</li>
+<li class="list-group-item">Vestibulum at eros</li>
+</ul>
+ <ul class="list-group">
+<li class="list-group-item disabled">Cras justo odio</li>
+<li class="list-group-item">Dapibus ac facilisis in</li>
+<li class="list-group-item">Morbi leo risus</li>
+<li class="list-group-item">Porta ac consectetur ac</li>
+<li class="list-group-item">Vestibulum at eros</li>
+</ul>
+ <div class="list-group">
+<a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
+<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
+<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
+<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
+<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
+</div>
+ <ul class="list-group list-group-flush">
+<li class="list-group-item">Cras justo odio</li>
+<li class="list-group-item">Dapibus ac facilisis in</li>
+<li class="list-group-item">Morbi leo risus</li>
+<li class="list-group-item">Porta ac consectetur ac</li>
+<li class="list-group-item">Vestibulum at eros</li>
+</ul>
+ <ul class="list-group">
+<li class="list-group-item">Dapibus ac facilisis in</li>
+<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
+<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
+<li class="list-group-item list-group-item-success">A simple success list group item</li>
+<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+<li class="list-group-item list-group-item-info">A simple info list group item</li>
+<li class="list-group-item list-group-item-light">A simple light list group item</li>
+<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
+</ul>
+ <ul class="list-group">
+<li class="list-group-item d-flex justify-content-between align-items-center">
+Cras justo odio
+<span class="badge badge-primary badge-pill">14</span>
+</li>
+<li class="list-group-item d-flex justify-content-between align-items-center">
+Dapibus ac facilisis in
+<span class="badge badge-primary badge-pill">2</span>
+</li>
+<li class="list-group-item d-flex justify-content-between align-items-center">
+Morbi leo risus
+<span class="badge badge-primary badge-pill">1</span>
+</li>
+</ul>
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius + blandit.
+ Donec id elit non mi porta. + + +Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius + blandit.
+ Donec id elit non mi porta. + + +Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius + blandit.
+ Donec id elit non mi porta. + +<div class="list-group">
+<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
+<div class="d-flex w-100 justify-content-between">
+ <h5 class="mb-1">List group item heading</h5>
+ <small>3 days ago</small>
+</div>
+<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+<small>Donec id elit non mi porta.</small>
+</a>
+<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+<div class="d-flex w-100 justify-content-between">
+ <h5 class="mb-1">List group item heading</h5>
+ <small class="text-muted">3 days ago</small>
+</div>
+<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+<small class="text-muted">Donec id elit non mi porta.</small>
+</a>
+<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+<div class="d-flex w-100 justify-content-between">
+ <h5 class="mb-1">List group item heading</h5>
+ <small class="text-muted">3 days ago</small>
+</div>
+<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+<small class="text-muted">Donec id elit non mi porta.</small>
+</a>
+</div>
+ <div class="modal" tabindex="-1" role="dialog" style="position: relative; display: block;"> <!-- remove this style attribute in production -->
+<div class="modal-dialog" role="document">
+<div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Modal title</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <p>Modal body text goes here.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+</div>
+</div>
+</div>
+ <!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+<div class="modal-dialog" role="document">
+<div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+</div>
+</div>
+</div>
+ <!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
+Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+<div class="modal-dialog modal-dialog-centered" role="document">
+<div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+</div>
+</div>
+</div>
+ <ul class="nav">
+<li class="nav-item">
+<a class="nav-link active" href="#">Active</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link disabled" href="#">Disabled</a>
+</li>
+</ul>
+ <ul class="nav flex-column">
+<li class="nav-item">
+<a class="nav-link active" href="#">Active</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link disabled" href="#">Disabled</a>
+</li>
+</ul>
+ <ul class="nav nav-tabs">
+<li class="nav-item">
+<a class="nav-link active" href="#">Active</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link disabled" href="#">Disabled</a>
+</li>
+</ul>
+ <ul class="nav nav-pills">
+<li class="nav-item">
+<a class="nav-link active" href="#">Active</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link disabled" href="#">Disabled</a>
+</li>
+</ul>
+ <ul class="nav nav-pills nav-fill">
+<li class="nav-item">
+<a class="nav-link active" href="#">Active</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Longer nav link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link" href="#">Link</a>
+</li>
+<li class="nav-item">
+<a class="nav-link disabled" href="#">Disabled</a>
+</li>
+</ul>
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
+<a class="navbar-brand" href="#">Navbar</a>
+<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
+ <li class="nav-item active">
+ <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </a>
+ <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Something else here</a>
+ </div>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" href="#">Disabled</a>
+ </li>
+</ul>
+<form class="form-inline my-2 my-lg-0">
+ <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+ <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+</form>
+</div>
+</nav>
+ <nav class="navbar navbar-dark bg-dark">
+<!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-dark bg-primary">
+<!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+<!-- Navbar content -->
+</nav>
+ <nav aria-label="Page navigation example">
+<ul class="pagination">
+<li class="page-item"><a class="page-link" href="#">Previous</a></li>
+<li class="page-item"><a class="page-link" href="#">1</a></li>
+<li class="page-item"><a class="page-link" href="#">2</a></li>
+<li class="page-item"><a class="page-link" href="#">3</a></li>
+<li class="page-item"><a class="page-link" href="#">Next</a></li>
+</ul>
+</nav>
+ <nav aria-label="...">
+<ul class="pagination">
+<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
+<li class="page-item"><a class="page-link" href="#">1</a></li>
+<li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(current)</span></a></li>
+<li class="page-item"><a class="page-link" href="#">3</a></li>
+<li class="page-item"><a class="page-link" href="#">Next</a></li>
+</ul>
+</nav>
+ <script>
+$(function () {
+$('[data-toggle="popover"]').popover()
+})
+</script>
+<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+Popover on top
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+Popover on right
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
+sagittis lacus vel augue laoreet rutrum faucibus.">
+Popover on bottom
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+Popover on left
+</button>
+ <div class="progress">
+<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+ <div class="progress">
+<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+</div>
+ <div class="progress" style="height: 1px;">
+<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress" style="height: 20px;">
+<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+ <div class="progress">
+<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+ <div class="progress">
+<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+ <div class="progress">
+<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<div class="progress">
+<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+Tooltip on top
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+Tooltip on right
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+Tooltip on bottom
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+Tooltip on left
+</button>
+
+<script>
+$(function () {
+$('[data-toggle="tooltip"]').tooltip()
+})
+</script>
+
+ <div id="borders-demo">
+<span class="border"></span>
+<span class="border-top"></span>
+<span class="border-right"></span>
+<span class="border-bottom"></span>
+<span class="border-left"></span>
+</div>
+
+ <div id="borders-demo2">
+<span class="border-0"></span>
+<span class="border-top-0"></span>
+<span class="border-right-0"></span>
+<span class="border-bottom-0"></span>
+<span class="border-left-0"></span>
+</div>
+
+ <div id="borders-demo3">
+<span class="border border-primary"></span>
+<span class="border border-secondary"></span>
+<span class="border border-success"></span>
+<span class="border border-danger"></span>
+<span class="border border-warning"></span>
+<span class="border border-info"></span>
+<span class="border border-light"></span>
+<span class="border border-dark"></span>
+<span class="border border-white"></span>
+</div>
+
+ <img src="http://via.placeholder.com/75x75" alt="..." class="rounded">
+<img src="http://via.placeholder.com/75x75" alt="..." class="rounded-top">
+<img src="http://via.placeholder.com/75x75" alt="..." class="rounded-right">
+<img src="http://via.placeholder.com/75x75" alt="..." class="rounded-bottom">
+<img src="http://via.placeholder.com/75x75" alt="..." class="rounded-left">
+<img src="http://via.placeholder.com/75x75" alt="..." class="rounded-circle">
+<img src="http://via.placeholder.com/75x75" alt="..." class="rounded-0">
+ <div class="bg-info clearfix">
+<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
+<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
+</div>
+ <div class="clearfix">
+<button type="button" class="close" aria-label="Close">
+<span aria-hidden="true">×</span>
+</button>
+</div>
+ .text-primary
+.text-secondary
+.text-success
+.text-danger
+.text-warning
+.text-info
+.text-light
+.text-dark
+.text-body
+.text-muted
+.text-white
+.text-black-50
+.text-white-50
+<p class="text-primary">.text-primary</p>
+<p class="text-secondary">.text-secondary</p>
+<p class="text-success">.text-success</p>
+<p class="text-danger">.text-danger</p>
+<p class="text-warning">.text-warning</p>
+<p class="text-info">.text-info</p>
+<p class="text-light bg-dark">.text-light</p>
+<p class="text-dark">.text-dark</p>
+<p class="text-body">.text-body</p>
+<p class="text-muted">.text-muted</p>
+<p class="text-white bg-dark">.text-white</p>
+<p class="text-black-50">.text-black-50</p>
+<p class="text-white-50 bg-dark">.text-white-50</p>
+
+
+
+
+
+
+
+
+
+
+ <p><a href="#" class="text-primary">Primary link</a></p>
+<p><a href="#" class="text-secondary">Secondary link</a></p>
+<p><a href="#" class="text-success">Success link</a></p>
+<p><a href="#" class="text-danger">Danger link</a></p>
+<p><a href="#" class="text-warning">Warning link</a></p>
+<p><a href="#" class="text-info">Info link</a></p>
+<p><a href="#" class="text-light bg-dark">Light link</a></p>
+<p><a href="#" class="text-dark">Dark link</a></p>
+<p><a href="#" class="text-muted">Muted link</a></p>
+<p><a href="#" class="text-white bg-dark">White link</a></p>
+ <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
+<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
+<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
+<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
+<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
+<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
+<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
+<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
+<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
+<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+ <div class="d-inline p-2 bg-primary text-white">d-inline</div>
+<div class="d-inline p-2 bg-dark text-white">d-inline</div>
d-block
+ d-block
+ <span class="d-block p-2 bg-primary text-white">d-block</span>
+<span class="d-block p-2 bg-dark text-white">d-block</span>
+ <div class="clearfix">
+<div class="float-left">Float left on all viewport sizes</div><br>
+<div class="float-right">Float right on all viewport sizes</div><br>
+<div class="float-none">Don't float on all viewport sizes</div>
+</div>
+
+<div class="clearfix">
+<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
+<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
+<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
+<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
+</div>
+ <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
+ <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
+<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
+<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
+<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
+<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
+ <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
+<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
+<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
+<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
+<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
+<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
+</div>
+ Spacing utilities that apply to all breakpoints, from xs
to xl
, have no breakpoint abbreviation in them. This is because those classes
+ are applied from min-width: 0
and up, and thus are not bound by a media
+ query. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size}
for
+ xs
and {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, and xl
.
Where property is one of:
+m
- for classes that set margin
p
- for classes that set padding
Where sides is one of:
+t
- for classes that set margin-top
or padding-top
b
- for classes that set margin-bottom
or padding-bottom
+ l
- for classes that set margin-left
or padding-left
r
- for classes that set margin-right
or padding-right
x
- for classes that set both *-left
and *-right
y
- for classes that set both *-top
and *-bottom
margin
or padding
on all 4 sides of the elementWhere size is one of:
+0
- for classes that eliminate the margin
or padding
by setting it to
+ 0
1
- (by default) for classes that set the margin
or padding
to $spacer * .25
2
- (by default) for classes that set the margin
or padding
to $spacer * .5
3
- (by default) for classes that set the margin
or padding
to $spacer
4
- (by default) for classes that set the margin
or padding
to $spacer * 1.5
5
- (by default) for classes that set the margin
or padding
to $spacer * 3
auto
- for classes that set the margin
to autoAmbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. + Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc + posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras + mattis iudicium purus sit amet fermentum.
+<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
+ Left aligned text on all viewport sizes.
+Center aligned text on all viewport sizes.
+Right aligned text on all viewport sizes.
+ +Left aligned text on viewports sized SM (small) or wider.
+Left aligned text on viewports sized MD (medium) or wider.
+Left aligned text on viewports sized LG (large) or wider.
+Left aligned text on viewports sized XL (extra-large) or wider.
+<p class="text-left">Left aligned text on all viewport sizes.</p>
+<p class="text-center">Center aligned text on all viewport sizes.</p>
+<p class="text-right">Right aligned text on all viewport sizes.</p>
+
+<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
+ <!-- Block level -->
+<div class="row">
+<div class="col-2 text-truncate">
+Praeterea iter est quasdam res quas ex communi.
+</div>
+</div>
+
+<!-- Inline level -->
+<span class="d-inline-block text-truncate" style="max-width: 150px;">
+Praeterea iter est quasdam res quas ex communi.
+</span>
+ Lowercased text.
+Uppercased text.
+CapiTaliZed text.
+<p class="text-lowercase">Lowercased text.</p>
+<p class="text-uppercase">Uppercased text.</p>
+<p class="text-capitalize">CapiTaliZed text.</p>
+ Bold text.
+Normal weight text.
+Light weight text.
+Italic text.
+<p class="font-weight-bold">Bold text.</p>
+<p class="font-weight-normal">Normal weight text.</p>
+<p class="font-weight-light">Light weight text.</p>
+<p class="font-italic">Italic text.</p>
+ <span class="align-baseline">baseline</span>
+<span class="align-top">top</span>
+<span class="align-middle">middle</span>
+<span class="align-bottom">bottom</span>
+<span class="align-text-top">text-top</span>
+<span class="align-text-bottom">text-bottom</span>
+ baseline | +top | +middle | +bottom | +text-top | +text-bottom | +
<table style="height: 100px;">
+<tbody>
+<tr>
+ <td class="align-baseline">baseline</td>
+ <td class="align-top">top</td>
+ <td class="align-middle">middle</td>
+ <td class="align-bottom">bottom</td>
+ <td class="align-text-top">text-top</td>
+ <td class="align-text-bottom">text-bottom</td>
+</tr>
+</tbody>
+</table>
+
+ Integrate Masonry with the Bootstrap grid system and + cards component.
+ +Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like + so:
+ +
+<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
+
+
+ By adding data-masonry='{"percentPosition": true }'
to the .row
wrapper, we can
+ combine the powers of Bootstrap's responsive grid and Masonry's positioning.
This is a longer card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer.
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
This card has supporting text below as a natural lead-in to additional + content.
+Last updated 3 mins ago
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
+
This card has a regular title and short paragraph of text below it.
+Last updated 3 mins ago
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
This is another card with title and supporting text below. This card has + some additional content to make it slightly taller overall.
+Last updated 3 mins ago
+Quickly build an effective pricing table for your potential customers with this Bootstrap example. + It’s built with default Bootstrap components and utilities with little customization.
+And an even wittier subheading to boot. Jumpstart your marketing efforts + with this example based on Apple’s marketing pages.
+ Coming soon +And an even wittier subheading.
+And an even wittier subheading.
+And an even wittier subheading.
+And an even wittier subheading.
+And an even wittier subheading.
+And an even wittier subheading.
+And an even wittier subheading.
+And an even wittier subheading.
+Command | +Description | +Output | +
---|---|---|
ci4:views:foreach | +Make foreach in View files |
+
+
+ ```php
+
+ |
+
ci4:views:if | +Make if in View files |
+ + + ```php + + + + ``` + + | +
ci4:views:if-else | +Make if else in View files |
+ + + ```php + + + + + + ``` + + | +
ci4:views:if-elseif | +Make if elseif in View files |
+ + + ```php + + + + + + ``` + + | +
ci4:views:if-elseif-else | +Make if elseif else in View files |
+ + + ```php + + + + + + + + ``` + + | +
Command | +Description | +Output | +|
---|---|---|---|
Lates | +News | +||
ci4_endsection | +ci4:views:endSection | +Make end Section | ++ +```php += $this->endSection() ;?> +``` + + | +
ci4_extend | +ci4:views:extend | +Using Layouts in Views | ++ +```php += $this->extend('layouts') ;?> +``` + + | +
ci4_include | +ci4:views:include | +Including View Partials | ++ +```php += $this->include('sidebar') ;?> +``` + + | +
ci4_php | +ci4:views:php | +Make php tag | ++ +```php + +``` + + | +
ci4_php_echo | +ci4:views:php-echo | +Make php echo tag | ++ +```php += code ;?> +``` + + | +
ci4_rendersection | +ci4:views:renderSection | +Make render Section | ++ +```php += $this->renderSection('content') ;?> +``` + + | +
ci4_section | +ci4:views:section | +Make Section | ++ +```php += $this->section('content') ;?> +``` + + | +
ci4_sectionend | +ci4:views:section-endSection | +Make Section with end Section | ++ +```php += $this->section('content') ;?> + += $this->endSection() ;?> +``` + + | +
Command | +Description | +Output | +|
---|---|---|---|
Lates | +News | +||
ci4_routes_add | +ci4:routes:add | +Make Routes add() | ++ +```php +$routes->add('url', 'ControllerName::index'); +``` + + | +
ci4_routes_cli | +ci4:routes:cli | +Make Command-Line only Routes | ++ +```php +$routes->cli('migrate', 'App\Database::migrate'); +``` + + | +
ci4_routes_env | +ci4:routes:env | +Make Routes Environment | ++ +```php +$routes->environment('development' , function($routes) +{ + $routes->add('builder','Tools\Builder::index'); +}); +``` + + | +
ci4_routes_get | +ci4:routes:get | +Make Routes get() | ++ +```php +$routes->get('url', 'ControllerName::index'); +``` + + | +
ci4_routes_group | +ci4:routes:group | +Make Routes group() | ++ +```php +$routes->group('admin', function($routes) +{ + //Route +}); +``` + + | +
ci4_routes_group_filter | +ci4:routes:group-filter | +Make Routes group() filter | ++ +```php +$routes->group('api' , ['filter' => 'api-auth'], function($routes) +{ + $routes->resource('url'); +}); +``` + + | +
ci4_routes_group_multiple | +ci4:routes:group-multiple | +Make Routes group() multiple | ++ +```php +$routes->group('admin', function($routes) +{ + $routes->group('users', function($routes) + { + //Route + }); +}); +``` + + | +
ci4_routes_group_namespace | +ci4:routes:group-namespace | +Make Routes group() namespace | ++ +```php +$routes->group('api' , ['namespace' => 'App\API\v1'], function($routes) +{ + //Route +}); +``` + + | +
ci4_routes_post | +ci4:routes:post | +Make Routes post() | ++ +```php +$routes->post('url', 'ControllerName::index'); +``` + + | +
ci4_routes_subdomain | +ci4:routes:subdomain | +Make Routes Limit to Subdomains | ++ +```php +$routes->add('from', 'to', ['subdomain' => '*']); +``` + + | +
COMMANDS | +RENDERS | +
---|---|
+ +```code +ci4:controller +``` + | ++ +```php +public function index() +{ + // code +} +``` + | +
COMMANDS | +RENDERS | +
---|---|
+ +```code +ci4:controller:presenter +``` + + | ++ +```php +public function __construct() +{ + // __construct code +} + +public function index() +{ + // index code +} + +public function show($id = null) +{ + // show code +} + +public function new() +{ + // new code +} + +public function create() +{ + // create code +} + +public function edit($id = null) +{ + // edit code +} + +public function update($id = null) +{ + // update code +} + +public function remove($id = null) +{ + // remove code +} + +public function delete($id = null) +{ + // delete code +} +``` + | +
COMMANDS | +RENDERS | +
---|---|
+ +```code +ci4:controller:resources +``` + + | ++ +```php +public function __construct() +{ + // __construct code +} + +public function index() +{ + // index code +} + +public function show($id = null) +{ + // show code +} + +public function new() +{ + // new code +} + +public function create() +{ + // create code +} + +public function edit($id = null) +{ + // edit code +} + +public function update($id = null) +{ + // update code +} + +public function delete($id = null) +{ + // delete code +} +``` + | +
COMMANDS | +RENDERS | +
---|---|
+ +```code +ci4:controller:request +``` + + | +
+
+```php
+$this->request->Type('field name');
+```
+
+
+Type : getVar, getGet, getPost, getMethod, isAjax, isCLI, isSecure + + |
+
COMMANDS | +RESULTS | +
---|---|
+ +```code +ci4:routes:add +``` + + | ++ +```php +$routes->add('url', 'ControllerName::index'); +``` + | +
+ +```code +ci4:routes:cli +``` + + | ++ +```php +$routes->cli('migrate', 'App\Database::migrate'); +``` + | +
+ +```code +ci4:routes:env +``` + + | ++ +```php +$routes->environment('development' , function($routes) +{ + $routes->add('builder','Tools\Builder::index'); +}); +``` + | +
+ +```code +ci4:routes:get +``` + + | ++ +```php +$routes->get('url', 'ControllerName::index'); +``` + | +
+ +```code +ci4:routes:group +``` + + | ++ +```php +$routes->group('admin', function($routes) +{ + $routes->add('url', 'ControllerName::index'); +}); +``` + | +
+ +```code +ci4:routes:group-filter +``` + + | ++ +```php +$routes->group('api' , ['filter' => 'api-auth'], function($routes) +{ + $routes->resource('url'); +}); +``` + | +
+ +```code +ci4:routes:group-multiple +``` + + | ++ +```php +$routes->group('admin', function($routes) +{ + $routes->group('users', function($routes) + { + //Route + }); +}); +``` + | +
+ +```code +ci4:routes:group-namespace +``` + + | ++ +```php +$routes->group('api' , ['namespace' => 'App\API\v1'], function($routes) +{ + //Route +}); +``` + | +
+ +```code +ci4:routes:post +``` + + | ++ +```php +$routes->post('url', 'ControllerName::index'); +``` + | +
+ +```code +ci4:routes:subdomain +``` + + | ++ +```php +$routes->add('from', 'to', ['subdomain' => '*']); +``` + | +
COMMANDS | +RESULTS | +
---|---|
+ +```code +ci4:routes:placeholder +``` + + | +
+
+```php
+$routes->type('url/(:placeholder)', 'ControllerName::index/$1');
+```
+
+Type : add, get, post, put, delete +Placeholder : any, segment, num, alpha, alphanum, hash + + |
+
COMMANDS | +RESULTS | +
---|---|
+ +```code +ci4:routes:placeholder:custom +``` + + | +
+
+```php
+$routes->addPlaceholder('uuid', '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}');
+$routes->type('url/(:uuid)', 'ControllerName::index/$1');
+```
+
+Type : add, get, post, put, delete + + |
+
COMMANDS | +RESULTS | +
---|---|
+ +```code +ci4:routes:presenter +``` + + | ++ +```php +$routes->presenter('url'); +``` + | +
COMMANDS | +RESULTS | +
---|---|
+ +```code +ci4:routes:resource +``` + + | ++ +```php +$routes->resource('url'); +``` + | +
Command | +Description | +Output | +
---|---|---|
ci4:views:endSection | +Make end Section in View files | ++ +```php += $this->endSection() ;?> +``` + + | +
ci4:views:extend | +Using Layouts in Views | ++ +```php += $this->extend('layouts') ;?> +``` + + | +
ci4:views:foreach | +Make foreach in View files |
+
+
+```php
+
+ |
+
ci4:views:if | +Make if in View files |
++ +```php + + + +``` + + | +
ci4:views:if-else | +Make if else in View files |
++ +```php + + + + + +``` + + | +
ci4:views:if-elseif | +Make if elseif in View files |
++ +```php + + + + + +``` + + | +
ci4:views:if-elseif-else | +Make if elseif else in View files |
++ +```php + + + + + + + +``` + + | +
ci4:views:include | +Including View Partials | ++ +```php += $this->include('sidebar') ;?> +``` + + | +
ci4:views:php | +Make php tag in View files | ++ +```php + +``` + + | +
ci4:views:php-echo | +Make php echo tag in View files | ++ +```php += code ;?> +``` + + | +
ci4:views:renderSection | +Make render Section in View files | ++ +```php += $this->renderSection('content') ;?> +``` + + | +
ci4:views:section | +Make Section in View files | ++ +```php += $this->section('content') ;?> +``` + + | +
ci4:views:section-endSection | +Make Section with end Section in View files | ++ +```php += $this->section('content') ;?> + += $this->endSection() ;?> +``` + + | +
", + "\t$1", + "" + ], + "description": "HTML - Defines a long quotation", + "scope": "text.html" + }, + "body": { + "prefix": "body", + "body": [ + "", + "\t$1", + "" + ], + "description": "HTML - Defines the body element", + "scope": "text.html" + }, + "br": { + "prefix": "br", + "body": "
$1
$2",
+ "description": "HTML - Defines computer code text",
+ "scope": "text.html"
+ },
+ "col": {
+ "prefix": "col",
+ "body": "