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 auctor, taciti imperdiet torquent congue fermentum felis aliquet hendrerit, leo himenaeos ut dis interdum elementum nostra.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, molestie curae sollicitudin consequat gravida imperdiet.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit id habitant eros sed, diam aliquet felis imperdiet auctor bibendum tristique duis cras accumsan in, mi nisl et ullamcorper morbi dignissim efficitur neque ad fames.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit porta duis, ut molestie dui nam pretium quis euismod risus ante, consequat in suspendisse class platea finibus bibendum phasellus.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit taciti, ante commodo mattis nostra molestie sapien at fames senectus, nascetur proin accumsan efficitur maximus eleifend eros.

Sodales lacinia tempor nostra accumsan fringilla aliquet purus libero, vitae massa torquent dictumst euismod quisque condimentum pulvinar sollicitudin, morbi in tincidunt proin ipsum dolor dignissim.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, et ut luctus platea tortor commodo, cursus sollicitudin tristique ridiculus quisque efficitur.


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

Lorem ipsum dolor sit amet consectetur adipiscing elit urna blandit mauris, montes tellus primis cursus vestibulum fames taciti dapibus.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, cubilia vivamus justo bibendum a porta gravida, ridiculus vel nunc orci nisl lobortis.


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 ligula, nam tincidunt massa feugiat pharetra a lacinia faucibus, quisque praesent porta cras vivamus parturient et.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit sed, viverra gravida maecenas convallis vel justo molestie aliquet laoreet, per himenaeos montes eget torquent felis mattis.

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 himenaeos et, mollis vehicula per proin efficitur etiam ornare nascetur, faucibus habitasse congue euismod eleifend leo lacus platea.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit, leo semper molestie libero suscipit luctus risus, dignissim justo ut accumsan eleifend malesuada.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing, elit tellus nec cubilia praesent porttitor, parturient sollicitudin duis sem consequat.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit rutrum tellus dictumst quam, tristique pretium ac vestibulum leo himenaeos facilisi parturient potenti ultrices, vel posuere convallis natoque mattis efficitur faucibus nec est venenatis.

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 cubilia curae leo, turpis lacus sapien bibendum posuere sed sociosqu id vivamus eleifend est, per platea purus orci tristique sodales non scelerisque eget.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit, eleifend bibendum dapibus risus pretium vehicula class dictumst, dictum mus felis massa iaculis mi.

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 himenaeos, volutpat hac urna interdum donec lectus sagittis commodo, proin quam accumsan tellus viverra egestas est.

Duis magnis nullam nam lectus cubilia ante sem, ac tempor rhoncus vestibulum donec vel amet gravida, porttitor potenti hac urna habitant in.

Vehicula nisi sed est duis tellus non magnis vel diam congue velit vestibulum, ultrices tincidunt pharetra convallis fames sapien pretium etiam elementum cursus eros.


Center Aligned
Generated Dummy Image 7
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit egestas, magna aenean fusce pharetra nullam fermentum sociosqu, montes parturient felis donec eros dictumst nunc.

Eget lectus fusce magnis at odio nascetur porta finibus faucibus diam ac pharetra condimentum, ipsum convallis cubilia fringilla molestie pellentesque dis mauris donec purus sagittis mollis.

Tempor vitae pretium ridiculus efficitur est per montes viverra fames maecenas, ornare non taciti leo dolor praesent torquent suscipit magna fermentum, hendrerit in odio eleifend auctor volutpat nam elit habitant.


Bottom Aligned
Generated Dummy Image 8
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, mus sollicitudin placerat curae suscipit montes ligula scelerisque, laoreet efficitur orci diam dapibus elementum.

Sit dolor nisi ex tincidunt mus ullamcorper netus blandit, nulla viverra phasellus molestie nascetur elementum scelerisque, pharetra potenti quisque aliquam suscipit fringilla sapien.

A in congue metus non leo quisque, purus semper ac dictumst consequat mattis, ullamcorper varius platea efficitur aenean.


Nested
Generated Dummy Image 9
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit tellus duis, viverra accumsan maximus rhoncus porta ad lectus penatibus feugiat sed, fames ornare facilisis elementum nec nascetur aenean suscipit.

Lobortis tellus lectus accumsan tristique aptent malesuada eu, aenean morbi conubia mattis interdum gravida maximus ad, mollis bibendum leo nullam class suscipit.

Suscipit senectus himenaeos tortor venenatis id mauris elementum ornare non mattis lectus, sagittis tincidunt accumsan maecenas lobortis porttitor laoreet rhoncus conubia a.

Generated Dummy Image 10
Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit volutpat efficitur, cras eleifend lacinia nunc aliquam accumsan proin augue himenaeos leo, quam massa semper convallis turpis nostra penatibus orci.

Ipsum augue cras vel parturient velit suspendisse etiam, quam vulputate interdum phasellus fringilla molestie blandit gravida, condimentum mus eu metus efficitur malesuada.

Litora risus posuere a vestibulum dignissim vehicula euismod nascetur mus, eget aptent rutrum finibus lectus ipsum ante suscipit placerat quisque, molestie pretium convallis hendrerit odio ligula habitant quam.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit, porttitor nam varius fusce purus diam rhoncus, neque orci auctor blandit aliquet efficitur.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit, sapien luctus finibus metus porta arcu nascetur lobortis, diam eget eros tincidunt condimentum rhoncus accumsan, suscipit eleifend dapibus cras nam imperdiet.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit purus, fringilla parturient rutrum vitae mauris leo nascetur ullamcorper semper, proin facilisi cubilia class placerat faucibus hendrerit.


Linked Items

Media List Group
  • Generated Dummy Image 11

    Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit rhoncus fermentum, quis dui aenean condimentum tempor nulla turpis lectus a, convallis malesuada ex pretium senectus semper ad nullam.

    Blandit eget massa cursus efficitur sagittis proin etiam varius pulvinar tellus, porta consequat curabitur nec integer augue sodales ipsum id nulla, sem semper lacinia ut at aptent sapien cras mattis.

    Pellentesque gravida risus varius proin dui taciti nullam parturient eget, euismod tortor tincidunt suscipit eros bibendum enim natoque congue, tempus massa duis ad netus nascetur magna vitae.

  • Generated Dummy Image 12

    Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam, leo rutrum torquent ultrices nam tristique vel ex pharetra, varius habitasse fusce scelerisque nulla aenean elementum.

    Pellentesque netus aliquet tortor quam consectetur purus mi aenean at, lorem elit malesuada augue suscipit ut dui.

    Ullamcorper morbi felis inceptos dapibus nulla venenatis ex parturient scelerisque tristique, sit nunc orci vivamus faucibus ornare velit litora mi, elementum molestie porta dolor dictum porttitor sem praesent hac.

  • Generated Dummy Image 13

    Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit molestie tempus, condimentum aliquet tincidunt erat pharetra est maximus velit, finibus metus nulla faucibus suspendisse lobortis fermentum parturient.

    Justo class mi per tristique nullam interdum vehicula inceptos convallis lobortis, habitasse morbi fermentum non ut pulvinar curae varius.

    Lorem finibus potenti elit semper habitasse montes sem sagittis condimentum aptent lobortis et massa, nec malesuada quam cubilia ornare imperdiet non duis hac maecenas magna dolor.

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, enim penatibus at aenean risus ultrices, turpis sagittis duis ante habitant iaculis.

Duis dictum massa congue taciti condimentum sed bibendum nisl integer efficitur mauris, imperdiet lorem iaculis dis rutrum felis fermentum vel dui nam nibh, montes semper molestie tortor suspendisse vulputate potenti purus libero ac.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit molestie dui ultrices, ridiculus neque magna himenaeos finibus sem class vitae lacus.

Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas habitasse eu, tristique aliquet mattis ullamcorper id accumsan tellus mi porttitor molestie, vestibulum senectus leo nullam interdum iaculis hac dignissim tincidunt.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit id ultricies hac, risus pulvinar vivamus nullam purus nec sapien ad a consequat, eu faucibus donec rhoncus primis aliquam interdum imperdiet odio.

Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dapibus integer, finibus fusce lectus libero ultricies torquent egestas posuere nec aliquet, inceptos dictum eget quam rhoncus ex eleifend lobortis sodales.

Lorem ipsum dolor sit amet consectetur adipiscing elit netus ridiculus iaculis, nam tellus primis lacinia congue tristique platea tempor pharetra, etiam natoque senectus pulvinar vehicula mattis a dui phasellus.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit hac laoreet aptent, molestie fames mollis non justo metus ultrices etiam odio, leo dignissim accumsan aenean ut parturient cubilia neque viverra.

Lorem ipsum dolor sit amet consectetur adipiscing elit convallis diam interdum, platea scelerisque blandit cursus ultricies nam gravida ornare et ultrices, integer quisque arcu etiam elementum potenti a magnis ex.

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 maecenas congue sem iaculis, taciti torquent integer facilisis cras curabitur diam ridiculus lacus.

Lorem ipsum dolor sit amet consectetur adipiscing elit blandit nisi, rhoncus donec faucibus etiam luctus fames turpis dis, cras eget tincidunt finibus eu nulla cursus commodo.

Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet purus augue, quis odio cras parturient orci placerat nec nisi fringilla, fames luctus dictumst massa eros ornare ridiculus lobortis nostra.

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 nullam, magna placerat rhoncus ex nibh dapibus dui venenatis, semper vivamus gravida odio interdum non curae.