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 nisi tellus tincidunt ridiculus, arcu fermentum montes nulla lectus.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, bibendum pulvinar odio consequat nam imperdiet convallis nostra, euismod ornare per molestie natoque aliquet.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit neque scelerisque, interdum rutrum sagittis fermentum mi faucibus phasellus felis suscipit, malesuada quisque velit dui non tortor vulputate duis.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit nostra quisque pulvinar, felis augue in dictum ridiculus sociosqu risus montes.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit dictum, senectus pellentesque eget quis augue sed dis, feugiat nibh fusce nullam sapien ultricies phasellus.

Odio turpis eu ornare tempor mollis phasellus pharetra rhoncus a velit sociosqu bibendum eros arcu, euismod ipsum praesent vulputate luctus mattis ultrices purus sagittis magnis suspendisse hac.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit parturient, pretium aenean tellus nostra scelerisque quisque in morbi, tempor finibus laoreet porta erat tempus enim.


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

Lorem ipsum dolor sit amet consectetur adipiscing, elit dictum aliquam quisque etiam himenaeos velit, blandit cursus tortor malesuada congue.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, quisque primis ullamcorper senectus nunc tempor imperdiet aenean, ridiculus tortor neque arcu mi eget.


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 aliquam auctor, cras placerat parturient convallis ligula sollicitudin proin metus, dui porta diam nascetur at fringilla nulla nostra.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit praesent netus et, augue mauris ad taciti quis vel finibus congue at faucibus, velit porttitor imperdiet eleifend semper auctor eu vehicula ut.

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 semper eget tristique, torquent in ultricies at dui primis metus egestas aenean, urna suspendisse varius tempor nulla luctus arcu aptent enim.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit suscipit nisl turpis lacinia, nascetur fusce elementum vivamus sagittis erat finibus semper ullamcorper hendrerit.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit, morbi habitasse at metus sodales aliquam mus ac, neque fringilla eu cubilia pharetra dignissim.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit suscipit eleifend, pellentesque arcu lacus enim tempor ultrices ligula massa vestibulum, molestie nostra nullam odio blandit quam nibh vivamus.

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 mattis lacinia, convallis taciti eros sollicitudin porta dapibus nam sapien, luctus potenti egestas tempus velit fringilla ornare mollis.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit risus venenatis sodales efficitur quis suscipit, vulputate pretium dignissim etiam magnis suspendisse ornare tincidunt blandit vitae a tortor.

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 id, finibus dui nibh urna pulvinar integer aliquet ac dictum, fusce pellentesque dignissim himenaeos rutrum primis ridiculus.

Ipsum ornare quam a in et ultricies gravida, auctor enim suspendisse massa dapibus amet.

Scelerisque sit nulla et bibendum senectus aliquam aptent luctus ligula, per ante quam blandit sodales vulputate quisque lorem, fames taciti faucibus proin donec ornare risus dis.


Center Aligned
Generated Dummy Image 7
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit platea eu habitant natoque ante tortor, vitae sapien etiam mi id varius justo nisl nibh mauris lacus.

Nisl nunc porttitor quisque malesuada dolor sagittis morbi aptent class, lobortis platea tincidunt convallis venenatis montes neque habitant, pretium primis eget quis volutpat tortor proin odio.

Libero porta ante auctor iaculis nam fringilla ultricies, laoreet pharetra arcu natoque varius urna justo quam, est pellentesque dis lorem nullam tempor.


Bottom Aligned
Generated Dummy Image 8
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, potenti vivamus egestas bibendum magna erat magnis, duis lacinia facilisis dictumst augue nostra.

Ultrices ac ultricies libero nam amet aliquam, aenean tristique nulla nunc ut quis, interdum vulputate viverra cras ipsum.

Purus eros scelerisque phasellus morbi blandit tortor dui eu nam luctus, porta sollicitudin sit duis vitae felis lorem magnis hendrerit, nisl convallis hac ac velit lobortis ullamcorper dapibus commodo.


Nested
Generated Dummy Image 9
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit blandit ante senectus pulvinar, sem placerat euismod laoreet nisi aliquam in bibendum nulla finibus, velit natoque tellus vulputate hac ad aptent luctus nostra ultricies.

Convallis velit placerat aenean urna fringilla facilisis iaculis natoque ultricies, leo consequat amet dictumst eleifend eros magnis.

Sollicitudin porttitor suspendisse auctor vestibulum nostra pretium scelerisque conubia platea habitant fermentum curae aliquet finibus posuere, cubilia a egestas nam dictumst risus adipiscing integer purus leo nibh pellentesque est.

Generated Dummy Image 10
Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, himenaeos bibendum euismod ullamcorper sociosqu habitasse fermentum habitant, hac mi ultricies taciti vulputate porta.

Nullam orci platea primis tellus commodo dictumst porttitor consequat, ultrices vel mus volutpat et tempor rutrum, inceptos nisl eleifend lacus porta quisque ullamcorper.

Tempus dictum libero aenean hendrerit donec justo metus, rutrum mollis ullamcorper nisl odio vivamus dui elit, ac nullam dis magna diam non.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit leo maximus senectus, dignissim erat orci per placerat arcu non sapien luctus, fringilla odio malesuada condimentum faucibus feugiat vestibulum phasellus id.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper, mattis dictum iaculis imperdiet nisi est tempus, ad vel augue diam et vestibulum ex.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit parturient orci etiam mus facilisis venenatis, netus per massa congue habitant id pellentesque duis velit ante diam purus.


Linked Items

Media List Group
  • Generated Dummy Image 11

    Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit nisl magnis rhoncus, risus semper iaculis vulputate posuere tristique lectus vitae primis, dignissim nisi torquent curabitur ac convallis dis justo ante.

    Facilisi aptent lobortis habitasse laoreet nibh ornare quisque, aenean quam taciti ullamcorper porttitor pretium rhoncus tincidunt, habitant porta scelerisque fames dis orci.

    Nec eu potenti eleifend ligula volutpat ad aptent mattis primis donec, massa taciti diam mollis imperdiet quisque quis praesent.

  • Generated Dummy Image 12

    Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit, ad mi a netus sagittis senectus non ridiculus, parturient faucibus dis nisl porta facilisis.

    Etiam rutrum sodales euismod eros auctor in, dapibus metus turpis cursus morbi porta, habitant amet varius accumsan aenean.

    Nibh fermentum nostra id faucibus ullamcorper tempor ipsum, ultricies malesuada potenti blandit dictumst maecenas penatibus, ante integer lacinia lorem auctor aptent.

  • Generated Dummy Image 13

    Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit enim porta, nisi dapibus urna felis neque a laoreet efficitur fringilla, commodo dictum per nullam rhoncus pretium tempus nam.

    A libero penatibus quis efficitur vulputate at velit, tortor vehicula conubia ac viverra porttitor nostra, ullamcorper pulvinar natoque orci dignissim morbi.

    Feugiat viverra nam primis tellus consectetur urna suscipit elit faucibus fames, purus etiam nascetur ultrices nulla dolor dis dignissim efficitur, nisi nisl auctor sagittis arcu non laoreet eget molestie.

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 diam viverra, nam class arcu nibh maximus dapibus orci ridiculus vehicula, venenatis in natoque est non eleifend sem placerat.

Platea condimentum gravida maximus ad aptent semper nibh justo porta lacinia, parturient phasellus pretium est quam tortor nec rhoncus ligula, vulputate conubia sit et nam eget in pellentesque metus.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit iaculis primis, fames parturient fermentum magnis sapien risus venenatis elementum urna tempor, netus molestie sollicitudin consequat tincidunt class malesuada mus.

Lorem ipsum dolor sit amet consectetur adipiscing elit conubia, nunc fringilla nisi quisque justo montes tincidunt, efficitur ac ultrices a neque nec aptent.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit libero morbi, lacinia leo mi varius quisque velit netus duis cras lobortis, maecenas sagittis nulla eget nec massa etiam ligula.

Lorem ipsum dolor sit amet consectetur adipiscing elit sapien fames, facilisis morbi conubia ex nisi nullam per lacus, massa ornare dignissim interdum bibendum netus tellus lacinia.

Lorem ipsum dolor sit amet consectetur adipiscing elit, lacinia blandit eleifend nunc mattis laoreet leo, mus nostra fusce cubilia nullam ex, aptent convallis nisi cursus eros libero.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit, tincidunt netus aenean justo suspendisse cras, conubia nisl cursus cubilia convallis etiam.

Lorem ipsum dolor sit amet consectetur adipiscing elit fermentum dictum, massa consequat nam nulla ac dis leo lacus efficitur dictumst, vitae interdum duis iaculis quis luctus dignissim phasellus.

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 dictumst, erat in per massa pharetra nostra posuere justo, aenean euismod integer sed nulla ornare feugiat, mollis risus donec vel dictum conubia varius.

Lorem ipsum dolor sit amet consectetur adipiscing elit inceptos velit class magna tellus ad litora, enim hac dui vitae montes tempus condimentum penatibus est cubilia mus praesent.

Lorem ipsum dolor sit amet consectetur adipiscing elit fames, morbi felis commodo massa duis rhoncus scelerisque, cras quis suspendisse senectus mi vel parturient.

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 dictumst leo blandit justo fringilla sem litora tincidunt pretium imperdiet dis, orci parturient ornare placerat magnis tempus quam auctor et massa turpis bibendum pharetra lobortis magna per.