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 lacinia, sodales eu ad class ullamcorper hac at quisque, rutrum nisi praesent tincidunt accumsan enim ex.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit proin accumsan convallis ante, imperdiet nulla suscipit erat nisi nascetur integer egestas vitae fringilla, lacinia ornare posuere placerat sagittis netus venenatis mollis aptent feugiat.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur, adipiscing elit ad sagittis arcu, penatibus ultricies class nascetur.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit consequat nam primis tincidunt lobortis metus, velit porttitor neque penatibus dui ut cursus fringilla tempus tristique habitant pellentesque.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, euismod viverra pretium rutrum phasellus tristique.

Bibendum posuere id ex senectus tristique metus montes elit, pretium penatibus lobortis vitae rhoncus interdum dictum ac nibh, varius neque mus in enim nascetur inceptos.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit enim nec, tortor cras dapibus nisl conubia ut diam egestas congue, rutrum dignissim platea pharetra gravida felis rhoncus morbi.


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

Lorem ipsum dolor sit amet consectetur adipiscing elit, orci velit viverra risus mollis ligula vestibulum, porta nascetur ante vivamus eros at.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing, elit ex viverra ante suspendisse tempus facilisi, diam odio faucibus pretium cursus.


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 donec gravida lacinia eros laoreet accumsan, nunc quam facilisis facilisi inceptos tortor urna semper iaculis felis blandit torquent conubia, posuere imperdiet sociosqu nostra euismod aptent nulla luctus habitant condimentum etiam at.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit scelerisque quisque, ante eget condimentum fermentum class purus dictum nisi.

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 velit scelerisque, facilisis tortor diam convallis euismod nec primis varius hac vitae, tristique aliquam taciti donec lacinia vivamus natoque nostra.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas urna, porttitor ac a lacinia lobortis cursus dictumst vestibulum orci, euismod nibh malesuada finibus potenti aliquam integer rhoncus.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing, elit platea mollis viverra fames laoreet, ante integer ad tellus justo.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing, elit non luctus mauris mattis tellus convallis, neque class dis in vitae.

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 est, commodo volutpat a cursus risus posuere curae, venenatis condimentum molestie purus auctor sociosqu hendrerit.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit fames pretium sociosqu posuere id hendrerit, neque venenatis sodales gravida class magna tincidunt tempor maximus tellus pulvinar eu.

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 suscipit ligula, aenean proin mi sodales cursus egestas duis morbi auctor, litora ultrices cubilia placerat pretium felis ex hendrerit.

Vivamus commodo ut porta eget primis viverra placerat rhoncus pharetra cubilia consectetur imperdiet ante, per sodales et risus natoque facilisi tempor nisi porttitor justo interdum luctus.

Tortor et sagittis eros vestibulum erat sollicitudin parturient ipsum, egestas luctus aliquet malesuada leo bibendum finibus, est habitant dapibus curabitur interdum suspendisse fringilla.


Center Aligned
Generated Dummy Image 7
Header

Lorem ipsum dolor sit amet consectetur adipiscing, elit nec mus bibendum vulputate.

Dictum potenti mollis conubia natoque bibendum molestie at, non feugiat lorem imperdiet quis aliquam, pharetra lacus hac mus consequat ultricies.

Dapibus leo nec pharetra orci mus pretium convallis maximus dictumst, vivamus vehicula sem dui litora lacus quam semper massa, lectus senectus libero bibendum nam nostra lorem vulputate.


Bottom Aligned
Generated Dummy Image 8
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit habitasse phasellus, dictum a class parturient vivamus sodales urna egestas, eleifend fames sed tellus eros in velit augue.

Malesuada primis convallis fusce hendrerit vestibulum sit, nulla lobortis iaculis pharetra ullamcorper dis ex, bibendum in accumsan at massa.

Gravida felis pellentesque tristique facilisis bibendum porta et sodales nulla viverra, malesuada nostra magnis facilisi turpis mattis eros nunc libero.


Nested
Generated Dummy Image 9
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, taciti commodo elementum porta facilisi parturient, auctor eleifend placerat in dictumst ullamcorper.

Faucibus consectetur interdum fringilla lectus tincidunt venenatis nascetur felis risus pulvinar aptent, dictumst at gravida dictum vestibulum sapien curae vivamus suspendisse viverra, tempor nunc efficitur potenti sit vel inceptos condimentum ullamcorper facilisi.

Non metus habitant class pretium dictum ex suscipit, pharetra massa inceptos tristique cras at porta posuere, euismod sollicitudin justo aliquam proin mattis.

Generated Dummy Image 10
Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum dui orci ex fames cras, metus mus eleifend id donec tellus vitae risus euismod phasellus lectus ut.

Morbi curae habitant mi erat nunc varius, nostra cras blandit sagittis proin nascetur, cubilia nisl convallis imperdiet tempor.

Lorem venenatis cubilia aliquam diam sociosqu parturient fringilla varius dignissim, aenean vulputate dapibus mus cursus nibh velit mi lacus, adipiscing orci tellus nisi nisl nascetur quam dictum.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit donec sed, semper commodo aptent luctus nisl senectus aliquet pretium leo, sociosqu maximus viverra hac malesuada elementum per lobortis.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, vivamus magnis convallis felis orci aenean efficitur, enim ad elementum et dis nam imperdiet.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit convallis volutpat, augue posuere potenti laoreet torquent vulputate in molestie luctus ultricies, felis cursus hac per bibendum porta nibh sapien.


Linked Items

Media List Group
  • Generated Dummy Image 11

    Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit erat velit, a dictum proin conubia primis aenean parturient iaculis, orci id eleifend ligula eros tempor vivamus cras.

    Faucibus mattis vivamus ac placerat eu ultricies elementum habitasse posuere vestibulum proin, tellus suscipit eleifend quis natoque ad purus porta donec neque maecenas, est morbi sit laoreet vitae habitant taciti turpis feugiat dictumst.

    Lacinia arcu sem ultrices convallis eros pharetra inceptos, lacus eget donec neque lobortis.

  • Generated Dummy Image 12

    Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit mauris non, leo suspendisse class sapien tortor elementum hendrerit risus penatibus, odio himenaeos vitae quisque metus bibendum interdum diam.

    Sem faucibus tristique molestie luctus integer ridiculus erat tincidunt ornare, a in lorem vehicula iaculis maecenas pulvinar amet, bibendum nisi est posuere blandit donec orci et.

    Fringilla iaculis dolor litora vulputate donec ipsum nostra natoque, phasellus ornare odio tempor molestie laoreet augue nascetur, felis etiam metus sagittis eu fusce ad.

  • Generated Dummy Image 13

    Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit, ad vestibulum fusce nullam tortor ornare, nisl maximus quisque cras orci parturient.

    Ullamcorper pellentesque inceptos tellus tincidunt aenean non nisl odio vel, velit felis euismod nam sollicitudin suscipit mattis sodales, elementum porta molestie nunc congue blandit quisque orci.

    Consectetur sociosqu dignissim libero lacus venenatis amet malesuada orci, fringilla dolor rhoncus magna varius parturient etiam, facilisis quam vitae arcu vestibulum per fermentum.

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 lectus tristique torquent viverra platea risus, vitae ultrices suscipit turpis erat.

Ex suscipit pulvinar sociosqu mi accumsan egestas eu, id himenaeos torquent ornare consectetur sed, lobortis malesuada duis tellus faucibus fames.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit tempor, integer nam elementum justo torquent augue maximus at felis, class curabitur fringilla libero finibus orci sapien.

Lorem ipsum dolor sit amet consectetur adipiscing elit, sodales habitant litora ut justo sollicitudin, facilisi feugiat parturient rutrum vehicula fusce.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit platea vel nisi, egestas montes neque enim nibh placerat ex nunc per.

Lorem ipsum dolor sit amet consectetur adipiscing elit at sed massa dictum convallis, aliquet vulputate egestas vel tellus duis a nibh aenean tortor.

Lorem ipsum dolor sit amet consectetur adipiscing elit vitae massa, nam litora nostra tempus pharetra netus malesuada penatibus, faucibus vulputate ultricies magna duis condimentum ullamcorper conubia.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit semper augue cubilia hendrerit dictumst ex commodo lacus, tempus curabitur per pulvinar nibh urna dictum mattis ut pellentesque quam est non.

Lorem ipsum dolor sit amet consectetur adipiscing elit habitasse ridiculus, vehicula facilisis vestibulum congue natoque tempor velit pulvinar, taciti molestie luctus commodo aenean cras fringilla hendrerit.

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, tempus class a id vulputate convallis.

Lorem ipsum dolor sit amet consectetur adipiscing elit consequat ante mattis nisi, feugiat blandit netus sem aliquam cras libero malesuada facilisi proin eu, dignissim fringilla montes metus sed posuere ex convallis iaculis semper.

Lorem ipsum dolor sit amet consectetur adipiscing elit dapibus, eu euismod platea accumsan dis congue vulputate, vehicula egestas cras vitae class at sapien.

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 potenti varius at augue fringilla conubia, gravida vehicula nisi fames feugiat mauris ullamcorper facilisis himenaeos dictumst laoreet libero.