Bootstrap 4 Shortcodes Demo 4.6.5

Rows and Columns

3 same size columns on medium and larger screens
Column 1 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit ad odio ante, vitae est porttitor sagittis eros aptent platea nascetur pulvinar.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit nisi, vestibulum parturient conubia rutrum mauris volutpat proin venenatis, justo semper eu dui lobortis primis donec.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, sapien eu orci imperdiet cras porta pretium, tempor eleifend fermentum ligula placerat vivamus.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit tristique, semper aliquet rutrum habitasse hac euismod curabitur a congue, quis mattis risus himenaeos pellentesque fusce proin.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit quam lacus venenatis, dui parturient facilisi elementum arcu vel posuere tempor.

Conubia inceptos dis viverra parturient venenatis cursus pulvinar leo luctus, suspendisse congue torquent dolor non eleifend mollis.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit enim risus cubilia tincidunt porta, aenean viverra ornare facilisis rutrum efficitur ante sed sagittis maecenas porttitor.


2 columns with an offset in between
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, id mus primis massa ante erat nisi interdum, sed eu dictum eleifend aliquam praesent.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, lacus blandit potenti nascetur hac felis porta, interdum ornare in pulvinar tempus natoque.


Nested Rows and Columns
Col 1
Col 1.1
Col 1.2
Col 2
Col 2.1
Col 2.2
Col 3
Col 3.1
Col 3.2

Responsive Embed

Embedded Video

No real video

Responsive Utilities

Show text depending on screen size

Sample 1: This text disappears on small and extra small screens.

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend taciti lacus nisi penatibus, montes porttitor turpis luctus erat vehicula gravida convallis placerat mi.

Sample 2: This text will not be shown on large and extra large screens.

Lorem ipsum dolor sit amet consectetur adipiscing elit pulvinar, velit egestas commodo pretium hac leo et penatibus, nisl suscipit convallis rhoncus arcu integer eleifend.

Cards

Simple card with a body element
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Kitchen Sink
​​​
Generated Dummy Image 1

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
Lorem Ipsup Dolor Sit

Simple card with image cap
Generated Dummy Image 2

Card Title

Lorem ipsum dolor sit.

Simple card with image overlay
Generated Dummy Image 3

Card Title

Lorem ipsum dolor sit.

Card with header and footer
Example Header

Card Title

Lorem ipsum dolor sit.

Card group

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.

Card deck

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.

Card columns

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.

Cards with shadows

No Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit laoreet maximus, sollicitudin imperdiet pharetra gravida habitasse volutpat morbi odio pulvinar luctus, habitant nec aliquet tincidunt proin hendrerit leo taciti.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit nulla curae, taciti penatibus nisi diam metus at non auctor placerat integer, cubilia habitasse torquent viverra accumsan urna aliquet morbi.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit efficitur proin molestie scelerisque, augue integer egestas malesuada viverra libero metus lectus eleifend.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit convallis interdum urna, purus dis orci efficitur cursus potenti congue aenean primis vehicula, odio leo litora class facilisis dignissim vitae pretium bibendum.

Icons

Free Icons
  • Facebook
  • Arrow Lft
  • Arrow Right
  • Arrow Up
  • Arrow Down
  • Folder Open
  • Cloud
  • Coffee
  • Car
  • File
  • Bars
  • Thumbs Up

Stacked Icons
​​​

Buttons

Standard buttons
Hyperlink

Outlined buttons
Hyperlink

Button size

Active buttons

Disabled buttons

Block level buttons

Button Groups

Basic example

Button Toolbar

Dropdowns

Single Button Dropdown

Split Button Dropdown

Drop Variations

Navs

Simple Navigation Links

Navigation Link and Dropdown with Pills

Navigation Link and Dropdown with Tabs

Collapsible Navigation Bar

Vertical Navigation Bar

Breadcrumb

Breadcrumb style links

Badge

Badge styles
New Messages 9
New Messages 9
New Messages 9

Jumbotron

Normal Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing, elit bibendum ante orci maximus, sed praesent accumsan proin taciti.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit pretium sociosqu, cursus montes condimentum rhoncus finibus venenatis dis fringilla, eu himenaeos eros urna convallis vulputate blandit molestie.

Alerts

Alerts

Dismissible Alerts

Dismissible Alerts with Fade Effect

Progress Bar

Progress Bar Styles
Simple
50%
Striped
50%
Striped and Animated
50%
Stacked
50%
25%
5%
Stacked and Labeled
50%
25%
5%

Media Object

Top Aligned Media
Generated Dummy Image 6
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit fringilla potenti tellus purus rutrum, lacinia felis praesent tempus neque vulputate ridiculus euismod cursus rhoncus at.

Erat semper fermentum sit per senectus arcu tincidunt varius ullamcorper habitant ultrices velit suscipit, ligula malesuada aliquet lacus dictumst gravida curabitur massa augue penatibus accumsan.

Efficitur eleifend lacinia ultricies aliquet tortor sapien a, phasellus magnis primis litora eget bibendum mattis feugiat, fermentum potenti nullam faucibus pharetra quisque.


Center Aligned
Generated Dummy Image 7
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit nibh eu fames, semper eleifend enim netus libero luctus nunc molestie.

Tellus eget conubia commodo natoque magnis ipsum fames lectus mollis malesuada cras fermentum, nulla parturient maximus dignissim nisl mauris vehicula convallis etiam lobortis.

Laoreet felis maecenas volutpat varius praesent, integer mollis erat adipiscing netus amet, dolor tempor et mauris.


Bottom Aligned
Generated Dummy Image 8
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit hac mollis ridiculus in, ullamcorper magna habitasse quam velit integer est convallis proin taciti, faucibus dis conubia molestie condimentum dictum nam diam malesuada interdum.

Per blandit viverra sollicitudin lectus imperdiet ad montes dapibus cras, dictum sapien elementum ut pulvinar pretium dis.

Euismod ligula fames vitae ipsum mi non hac malesuada erat parturient, per ultrices sagittis aptent proin nulla purus nisi blandit habitasse mollis, fringilla placerat augue volutpat nibh sociosqu natoque tincidunt netus.


Nested
Generated Dummy Image 9
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, iaculis phasellus cursus gravida congue quisque curabitur, praesent libero maecenas tortor natoque ridiculus.

Pellentesque facilisis viverra magna malesuada dignissim sociosqu ornare molestie, vivamus enim velit habitant nisi volutpat fusce elementum, tempor varius lobortis sollicitudin eleifend dui magnis.

Fames rhoncus neque rutrum tortor consectetur vulputate cubilia vitae, ac suspendisse phasellus id ultricies aptent lacus ullamcorper, augue lobortis dignissim fusce euismod purus pellentesque.

Generated Dummy Image 10
Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit sapien magnis rutrum, imperdiet cursus venenatis nunc molestie sagittis sollicitudin potenti quam praesent, quis suscipit et vel nostra eros gravida feugiat risus.

Hendrerit magna elit iaculis euismod cras suscipit porta neque, porttitor magnis sociosqu tempor urna habitasse sapien, gravida quisque libero nibh dis ut quam.

Nec ligula conubia fermentum auctor sit nisi class nunc aptent ornare, suscipit placerat vivamus potenti augue amet duis commodo velit arcu, euismod nullam vestibulum est laoreet pulvinar purus felis ad.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit dapibus nulla curae consequat nisl, fringilla aliquet eget rhoncus efficitur lacus pharetra etiam sollicitudin scelerisque auctor, egestas fusce congue senectus ac vulputate parturient sed aliquam est integer.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit, neque sociosqu inceptos nisi tincidunt tellus molestie, ligula varius libero auctor et torquent.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit mattis felis in tristique lacinia nisl praesent, turpis diam curabitur placerat ad mus vivamus morbi quis purus proin nullam.


Linked Items

Media List Group
  • Generated Dummy Image 11

    Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit at vel vehicula porta, sagittis consequat rutrum semper quisque lectus velit aliquam tincidunt metus, odio dapibus ornare id duis leo blandit efficitur conubia justo.

    Dignissim at nam sit elit congue magnis ullamcorper, nascetur vulputate vel et tellus quam penatibus, lectus viverra ridiculus massa ante nulla.

    Neque ligula inceptos tortor facilisi accumsan proin adipiscing litora, sem metus per primis interdum purus ante ridiculus orci, velit iaculis molestie consequat dictum tincidunt leo.

  • Generated Dummy Image 12

    Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing, elit accumsan donec finibus vel lobortis fermentum, magna natoque habitasse feugiat volutpat.

    Scelerisque nulla proin ullamcorper nam himenaeos sociosqu mi praesent morbi per, dolor nascetur molestie lorem adipiscing purus tincidunt nostra egestas, diam ut nibh venenatis rutrum vehicula convallis imperdiet nullam.

    Sit tincidunt pretium fusce nullam quam turpis morbi ligula eu duis luctus ultricies feugiat, consequat porttitor netus ullamcorper tristique nisl sed et lacus finibus suspendisse.

  • Generated Dummy Image 13

    Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit turpis, feugiat phasellus senectus porttitor sem justo felis euismod lobortis, urna pulvinar dapibus metus finibus eleifend nascetur.

    Metus scelerisque est mauris sem diam eros ullamcorper convallis condimentum dui, gravida litora duis dis proin felis lacus placerat himenaeos per libero, dictumst velit dignissim risus natoque euismod quisque turpis rutrum.

    Hendrerit velit aenean vehicula erat laoreet taciti commodo sollicitudin pellentesque dictum amet, ad leo mauris litora urna adipiscing scelerisque lectus et natoque vitae praesent, purus molestie donec cubilia morbi vel blandit euismod nunc etiam.

Code

Code Snippet
<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>

Scrollable Code Snippet
<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>

Inline Code

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

Images
Generated Dummy Image 14 Generated Dummy Image 15

Image Borders and Thumbnails
Generated Dummy Image 16 Generated Dummy Image 17 Generated Dummy Image 18 Generated Dummy Image 19 Generated Dummy Image 20

Figures

Image with Text above
A caption for the below image.
Generated Dummy Image 21
A caption for the below image.
Generated Dummy Image 22

Image with Text below
Generated Dummy Image 23
A caption for the above image.
Generated Dummy Image 24
A caption for the above image.

Blockquote

Blockquote

Lorem ipsum dolor sit amet consectetur adipiscing elit, dictumst natoque nisi vel mus phasellus dictum, pulvinar lobortis netus dis vestibulum ullamcorper.

Quis elementum sollicitudin torquent dui taciti facilisis, ad augue porta lacus ornare enim purus, sapien luctus maecenas eu a.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit himenaeos, curabitur convallis porta praesent in ultricies netus nibh tristique, viverra vitae feugiat cubilia facilisis nunc dictumst.

Lorem ipsum dolor sit amet consectetur adipiscing elit per et odio eleifend ultricies, dapibus orci elementum donec tellus viverra libero a turpis massa hac.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit nam urna id laoreet maecenas lectus nullam a, netus sodales velit varius purus interdum suscipit tellus quis odio finibus curae rhoncus.

Lorem ipsum dolor sit amet consectetur adipiscing elit cursus suscipit, mus rhoncus volutpat faucibus facilisi vel mi.

Lorem ipsum dolor sit amet consectetur adipiscing elit proin lectus mus, dictum ullamcorper porttitor leo nascetur fringilla lobortis magnis tortor augue netus, sodales sociosqu dignissim dis penatibus aenean pretium id suscipit.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit odio nunc mauris, fermentum sagittis ultricies quis phasellus bibendum nulla ultrices nostra nullam, et purus pretium proin morbi eros tortor vulputate habitasse.

Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper velit, morbi etiam sem eros vel non molestie habitasse, proin mi lacus quis senectus litora odio porttitor.

Flex

Flex Row
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6

Flex Reverse Row
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6

Inline Flex
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6

Inline Reverse Row Flex
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6

Flex Column
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6

Flex Reverse Column
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6

Flex Justify Center
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6

Flex Align Items Center
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6

Flex Item Self-Align
Flex
item
1
Flex item 2
Flex
item
3
Flex item 4
Flex
item
5
Flex item 6

Flex Wrap

No Wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20

Wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20

Reverse Wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20

Flex Row Fill
Flex item 1
Flex item 2
Flex item 3

Flex Grow
Flex grow item 1
Flex item 2
Flex item 3

Flex Shrink
Flex shrink item 1
Flex item 2
Flex item 3

Flex No Shrink
Flex no-shrink item 1
Flex item 2
Flex item 3

Tooltip

Tooltip Examples

Popover

popover Examples

Accordion

Basic Accordion

Lorem ipsum dolor sit amet consectetur adipiscing elit id, fermentum senectus ac aptent non conubia nostra, in congue eu hendrerit iaculis tristique ligula.

Lorem ipsum dolor sit amet consectetur adipiscing, elit etiam dignissim tortor turpis mus sagittis, lacus nibh pretium magna sapien.

Lorem ipsum dolor sit amet consectetur adipiscing elit magna lacinia et, elementum hendrerit metus nec turpis lacus purus torquent at, porta fames nisl eget ex risus nisi curae cras.

Carousel

Carousel with text

Standard Carousel

Customized Carousel

Modal

Standard Modal Examples
Centered Small Modal Examples

Float and Clearfix

Float and Clearfix Examples
No Float
Left Float
Left Float
Right Float
No Float
Right Float
Float Left
Generated Dummy Image 33
Generated Dummy Image 34 Generated Dummy Image 35

Wrapper

Wrapper Example (set color for icon and text)

Lorem ipsum dolor sit amet consectetur adipiscing elit velit tristique placerat per montes vitae parturient malesuada cras senectus metus, blandit mauris eget fermentum arcu vestibulum aliquam curae dapibus tempus justo lectus ornare lacus nulla a.