Bootstrap 4 Shortcodes Demo 4.6.4
Rows and Columns
Lorem ipsum dolor sit amet consectetur adipiscing elit habitasse mattis consequat, conubia molestie finibus ullamcorper euismod erat tortor phasellus enim eget porta, fusce volutpat ad viverra mauris nunc orci pretium malesuada.
Lorem ipsum dolor sit amet consectetur adipiscing, elit eu hac ante sem tempus convallis, magna ac per ultrices dis.
Lorem ipsum dolor sit amet consectetur adipiscing elit dui in donec, quisque blandit turpis massa felis odio enim a ultrices, auctor quam ullamcorper rhoncus diam pretium sociosqu vitae mauris.
Lorem ipsum dolor sit amet consectetur adipiscing elit mollis, libero lobortis sed ultricies feugiat urna ad ornare, eget quam euismod imperdiet nunc posuere fringilla.
Lorem ipsum dolor sit amet consectetur adipiscing elit blandit natoque egestas at, dapibus neque nunc etiam eleifend lacinia nec taciti facilisi ligula, enim purus placerat lacus aliquet mi tincidunt donec mattis conubia.
Augue nunc habitasse interdum aliquet ultrices venenatis elementum mattis sollicitudin volutpat, ex posuere suscipit erat justo imperdiet aliquam sagittis a, pharetra lorem porta placerat orci nascetur natoque cubilia scelerisque.
Lorem ipsum dolor sit amet consectetur adipiscing elit himenaeos, pellentesque pretium donec tempor metus massa sed lacus augue, venenatis sapien laoreet eros mollis tincidunt tellus.
Lorem ipsum dolor sit amet consectetur, adipiscing elit et eros feugiat aptent, pulvinar ac at placerat.
Lorem ipsum dolor sit amet consectetur adipiscing elit, dis lobortis aliquam molestie pharetra tristique, tortor pellentesque donec netus nascetur etiam.
Responsive Embed
Responsive Utilities
Sample 1: This text disappears on small and extra small screens.
Lorem ipsum dolor sit amet consectetur adipiscing, elit netus enim interdum duis sodales, platea primis natoque inceptos erat.
Sample 2: This text will not be shown on large and extra large screens.
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur vehicula tincidunt porta turpis nulla congue, vitae nec netus facilisi aliquet eleifend maximus cursus sagittis euismod pretium ad porttitor.
Cards
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card Title
Some quick example text to build on the card title and make up the bulk of the card’s content.- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card Title
Lorem ipsum dolor sit.Card Title
Lorem ipsum dolor sit.Card Title
Lorem ipsum dolor sit.Card Title
Cras justo odio.Card Title
Dapibus ac facilisis in.Card Title
Lorem ipsum dolor sit.Card Title
Cras justo odio.Card Title
Dapibus ac facilisis in.Card Title
Lorem ipsum dolor sit.Card Title
Cras justo odio.Card Title
Dapibus ac facilisis in.Card Title
Euismod cubilia mattis sed habitasse.Card Title
Arcu porta aptent lacus.Card Title
Quisque est eget.Card Title
Imperdiet dapibus ridiculus.Card Title
Eros mi mauris ultricies.Card Title
Nascetur commodo imperdiet.No Shadow
Lorem ipsum dolor sit amet consectetur adipiscing elit posuere sem, commodo ridiculus porta nunc netus per sapien urna eu turpis, aptent nostra ultrices cras hac scelerisque pretium lacinia.
Small Shadow
Lorem ipsum dolor sit amet consectetur adipiscing elit vestibulum accumsan molestie suscipit tempor, quis nisi lectus pharetra justo ante interdum aliquet aptent fringilla sem.
Regular Shadow
Lorem ipsum dolor sit amet consectetur adipiscing elit sed interdum etiam scelerisque molestie, nullam rutrum vitae cubilia sociosqu donec ullamcorper nunc mauris venenatis.
Large Shadow
Large Shadow
Lorem ipsum dolor sit amet consectetur adipiscing elit luctus, taciti dapibus auctor facilisi dictum inceptos.
Icons
- Arrow Lft
- Arrow Right
- Arrow Up
- Arrow Down
- Folder Open
- Cloud
- Coffee
- Car
- File
- Bars
- Thumbs Up
Buttons
Button Groups
Dropdowns
Navs
Light Color:
Dark Color:
Breadcrumb
Badge
New Messages 9
New Messages 9
Jumbotron
Header Line
Lorem ipsum dolor sit amet consectetur adipiscing elit, sem molestie neque fames fusce euismod non aenean, dictum finibus malesuada eros odio lacus.
Header Line
Lorem ipsum dolor sit amet consectetur adipiscing elit magnis vivamus accumsan per primis sollicitudin, ac maximus mattis pellentesque laoreet finibus neque semper arcu at habitant quis.
Alerts
Progress Bar
Media Object
Lorem ipsum dolor sit amet consectetur adipiscing elit, tempus nam felis fames enim nullam orci, et velit donec facilisi sociosqu dapibus.
Ut congue semper odio viverra nullam parturient, malesuada maecenas id auctor duis maximus vestibulum, iaculis condimentum leo etiam diam.
Ad consequat eros facilisi phasellus tincidunt suspendisse, volutpat habitasse nullam penatibus sapien, faucibus magnis rhoncus mattis ac.
Lorem ipsum dolor sit amet consectetur adipiscing elit sagittis semper proin, turpis dictumst litora montes neque vehicula posuere tincidunt accumsan ullamcorper, integer donec odio sed curabitur parturient himenaeos per magna.
Sit lacinia nibh ad eleifend nulla ac sollicitudin, libero urna consequat posuere interdum faucibus aenean suscipit, integer tortor natoque per fermentum facilisi.
Ante consequat facilisi tempus facilisis platea lacus sapien, nec efficitur velit rhoncus interdum cubilia, nullam tempor nisl vitae elit ad.
Lorem ipsum dolor sit amet consectetur adipiscing elit a eu himenaeos tortor facilisis, pellentesque habitant integer sodales et sagittis sem platea erat rhoncus curabitur.
Tristique phasellus justo cras faucibus finibus potenti nisi accumsan arcu vestibulum, tincidunt duis venenatis dis maximus nibh bibendum molestie suscipit, hac proin dictumst a mauris inceptos iaculis ornare non.
Bibendum ut urna hendrerit eget ligula magna iaculis congue nisl maecenas imperdiet fusce elementum, ac tristique adipiscing non laoreet torquent faucibus primis conubia venenatis pretium commodo sapien, nisi dui rhoncus natoque efficitur dis parturient vivamus finibus vehicula eleifend est.
Lorem ipsum dolor sit amet consectetur adipiscing elit lacinia porttitor feugiat, aliquam inceptos curae libero porta nisl fringilla tortor placerat, taciti donec eu hac nunc laoreet fames aenean tristique.
Nunc suscipit ut vestibulum ornare mi gravida ultricies, aliquet eget sapien sociosqu nec habitant convallis ex, magna quam lacus eu senectus inceptos.
Ullamcorper rhoncus habitant at ad vulputate magna iaculis nascetur mattis, duis tincidunt quam vel pellentesque in diam sed, dolor nulla sodales tortor convallis odio vitae varius.
Lorem ipsum dolor sit amet consectetur adipiscing elit magna aliquet non mattis, volutpat nascetur ac justo phasellus sem inceptos per facilisi odio.
Cras placerat finibus imperdiet arcu dictum porta eleifend sagittis, torquent mi curae laoreet litora dapibus vitae velit, malesuada ad primis feugiat urna auctor in.
Iaculis mi aliquet porttitor erat ad diam mattis ultrices, praesent molestie massa suscipit ligula nibh ornare.
List Groups
-
Lorem ipsum dolor sit amet consectetur adipiscing, elit nibh sodales lectus nisl, feugiat interdum nostra a sem.
-
Lorem ipsum dolor sit amet consectetur adipiscing elit, praesent congue cursus id sodales facilisis aliquam lobortis, suscipit dictum nunc libero tortor semper.
-
Lorem ipsum dolor sit amet consectetur adipiscing elit lectus ante ligula cursus, efficitur vivamus placerat fusce facilisis nec elementum curae libero cubilia inceptos nisl, ridiculus commodo tristique velit tincidunt eu egestas a dui tellus.
-
Header 1
Lorem ipsum dolor sit amet consectetur adipiscing, elit curabitur venenatis purus praesent parturient luctus, pharetra vitae egestas dictumst ut.
At adipiscing volutpat metus gravida rutrum est dictum lorem fermentum ornare semper feugiat, taciti senectus auctor mi sodales consequat habitant nunc placerat libero dis.
Hendrerit aptent tempus vitae adipiscing sit tristique fusce finibus congue nunc, sed torquent placerat nibh faucibus rutrum aenean tempor pharetra morbi feugiat, eu mauris in praesent sollicitudin ac molestie lectus ornare.
-
Header 2
Lorem ipsum dolor sit amet consectetur adipiscing elit platea gravida, nascetur per accumsan himenaeos magna varius est hendrerit, posuere congue netus cursus ex ullamcorper condimentum maecenas.
Ut nascetur finibus ac libero enim ipsum porttitor litora habitant, blandit bibendum dictumst purus eros sed neque.
Luctus ultrices magna imperdiet faucibus ex bibendum maecenas, elit sit tellus cursus aenean habitant tempus, vulputate penatibus senectus nostra et augue.
-
Header 3
Lorem ipsum dolor sit amet consectetur adipiscing elit felis cursus metus, ex facilisis egestas iaculis auctor pretium primis purus sapien, tellus curae vulputate convallis natoque inceptos nostra hac per.
Posuere aptent dolor massa vel senectus viverra sagittis torquent ullamcorper, dignissim finibus litora in morbi curabitur dis neque, elementum leo rutrum conubia nisl per condimentum interdum.
Aliquet aptent efficitur arcu praesent nostra elit congue leo id, proin eros suspendisse ac morbi iaculis pharetra et a facilisis, imperdiet auctor sodales taciti parturient ut consequat mus.
Code
<h4 id="-modal-footer-parameters">modal-footer parameters</h4><table><thead><tr><th>Parameter</th><th>Description</th><th>Required</th><th>Values</th>q<th>Default</th></tr></thead><tbody><tr><td>class</td><td>Any extra classes you want to add</td><td>optional</td><td>any text</td><td>none</td></tr><tr><td>data</td><td>Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at <a href="#container-parameters">container parameters</a>.</td><td>optional</td><td>any text</td><td>none</td></tr></tbody></table>
<h4 id="-modal-footer-parameters">modal-footer parameters</h4><table><thead><tr><th>Parameter</th><th>Description</th><th>Required</th><th>Values</th>q<th>Default</th></tr></thead><tbody><tr><td>class</td><td>Any extra classes you want to add</td><td>optional</td><td>any text</td><td>none</td></tr><tr><td>data</td><td>Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at <a href="#container-parameters">container parameters</a>.</td><td>optional</td><td>any text</td><td>none</td></tr></tbody></table>
Use the media
flag at the list-group
tag and the listgroup
flag at the media
tag.
Tables
Header 1 | Header 2 | Header 3 |
---|---|---|
A | 1 | 5% |
B | 2 | 10% |
C | 3 | 15% |
D | 4 | 20% |
E | 5 | 25% |
F | 6 | 30% |
G | 7 | 35% |
H | 8 | 40% |
I | 9 | 45% |
J | 10 | 50% |
K | 11 | 55% |
Total |
Images
Figures
Blockquote
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales vivamus, semper dictumst facilisi himenaeos aenean luctus sed etiam quam, tristique ac pretium malesuada eleifend feugiat maximus turpis.
Mus viverra aliquam facilisis sodales parturient luctus sit, ligula id leo habitasse molestie nunc ipsum est, euismod adipiscing nam vitae efficitur sollicitudin.
Lead
Lorem ipsum dolor sit amet consectetur adipiscing, elit curae varius sociosqu luctus, leo ex magnis nisl accumsan.
Lorem ipsum dolor sit amet consectetur adipiscing elit, imperdiet sagittis efficitur maecenas arcu elementum tempor rhoncus, metus urna porta fusce morbi aliquet.
Border
Lorem ipsum dolor sit amet consectetur adipiscing elit nostra efficitur, varius duis diam vel mus bibendum turpis etiam ridiculus torquent, class eleifend vestibulum dictumst est inceptos curae fringilla.
Lorem ipsum dolor sit amet consectetur adipiscing elit vehicula, eu egestas taciti sagittis ridiculus justo cursus cubilia ullamcorper, quam habitant nunc ultrices nec dapibus himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit pharetra fermentum magna, scelerisque imperdiet habitant accumsan quis sociosqu arcu donec.
Color
Lorem ipsum dolor sit amet consectetur adipiscing elit, sapien convallis nulla faucibus natoque interdum malesuada, vitae dapibus lacinia magna quam hac.
Lorem ipsum dolor sit amet consectetur, adipiscing elit phasellus duis tempus semper, nunc diam habitant nisi.
Flex
item
1
item
3
item
5
No Wrap
Wrap
Reverse Wrap
Tooltip
Popover
Accordion
Lorem ipsum dolor sit amet consectetur adipiscing elit justo augue neque, tempus molestie vivamus at quis fringilla urna eu massa.
Lorem ipsum dolor sit amet consectetur adipiscing elit lacinia sapien massa, inceptos dui sollicitudin mollis lectus iaculis est vitae faucibus in, urna justo praesent habitasse scelerisque donec enim lacus morbi.
Lorem ipsum dolor sit amet consectetur adipiscing elit class habitant nascetur, molestie curabitur imperdiet iaculis congue malesuada fringilla dapibus inceptos, libero taciti potenti blandit lobortis conubia scelerisque hac maecenas.
Carousel
Modal
Float and Clearfix
Wrapper
Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit magna diam lacinia velit platea, fusce condimentum iaculis tristique sem pulvinar orci sollicitudin odio accumsan leo ultricies.