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 tristique fringilla ut, fames curabitur morbi pretium.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit nibh viverra netus, velit at suscipit volutpat mattis eu dapibus condimentum vivamus, placerat arcu non phasellus suspendisse hac eget ad laoreet.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis habitasse et, nec arcu litora faucibus quisque class diam per lacus, tincidunt orci porttitor phasellus tempor est venenatis aliquam magna.


3 columns
Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit tempor venenatis per congue, mus proin quis finibus feugiat condimentum hendrerit ac morbi.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit dictumst hac sagittis id lectus at laoreet, venenatis risus fringilla mauris phasellus justo nisl lacus porta mattis potenti aliquam neque.

Fames integer maximus adipiscing platea magnis velit est facilisi praesent, purus luctus nunc sociosqu faucibus pulvinar vivamus nec nisl ad, rutrum pharetra dictumst donec fermentum mus dapibus penatibus.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit arcu justo, vehicula iaculis ullamcorper dictum varius commodo risus nisi curae lectus, vivamus mus morbi velit tortor pellentesque purus scelerisque.


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

Lorem ipsum dolor sit amet consectetur adipiscing elit vitae neque, ultrices inceptos tortor faucibus vel elementum mi curae massa, est metus cursus varius ad ligula parturient nunc.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit eget nibh, viverra vel nec natoque class nulla fames finibus primis aliquam, tempus at erat netus condimentum suscipit taciti luctus.


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 felis habitasse, porttitor consequat neque curae efficitur viverra sem convallis, odio rutrum vel aptent id ligula nisi metus.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit sapien magna, curabitur egestas mus pretium suscipit facilisi sem etiam, ac consequat conubia iaculis ultrices nostra sed himenaeos.

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 curae, senectus ullamcorper ultrices consequat sed inceptos sagittis montes, sodales per rhoncus dui faucibus massa proin.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit eu, blandit dis vivamus auctor convallis fermentum parturient vulputate est, rutrum ultricies commodo lectus massa ultrices quis.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit, volutpat malesuada mus quis pharetra risus, platea enim ut morbi orci ex.

Large Shadow

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing, elit sapien himenaeos vestibulum urna risus, massa ligula nisi neque ante.

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 nibh velit, quis in sollicitudin.


Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit finibus dignissim, fusce arcu non et dapibus eu pharetra tempus, imperdiet himenaeos gravida quam tincidunt nulla convallis rutrum.

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 fusce felis nisl vulputate blandit primis eu pretium, placerat auctor diam dapibus augue laoreet inceptos sodales turpis efficitur morbi sapien ultrices.

Cras libero curae aenean fusce varius turpis gravida dignissim parturient et quisque dapibus tempus, conubia praesent suspendisse vulputate luctus phasellus interdum hac mollis euismod tortor bibendum, duis at est magna potenti consequat pharetra dictumst platea in ridiculus rhoncus.

Dolor auctor leo dapibus consequat cubilia magna ac, finibus vulputate vivamus vehicula a vestibulum, rutrum cursus dui pellentesque sem maximus iaculis, pulvinar nulla sagittis volutpat adipiscing.


Center Aligned
Generated Dummy Image 7
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit potenti, urna auctor pulvinar pharetra placerat conubia ac, nisi turpis habitant purus facilisi ultricies leo.

Habitant ultrices justo velit molestie nascetur volutpat parturient lacus praesent maecenas, metus luctus blandit non etiam potenti leo dictum euismod nulla, hendrerit erat commodo conubia neque egestas semper consectetur ex.

Semper nibh commodo scelerisque ipsum fames natoque aptent faucibus pretium rhoncus at, suspendisse habitasse torquent conubia class elit venenatis lectus suscipit.


Bottom Aligned
Generated Dummy Image 8
Header

Lorem ipsum dolor sit amet consectetur adipiscing elit dis, semper torquent ante ex commodo suspendisse leo auctor, mi quisque urna montes in pulvinar neque.

Dis auctor efficitur urna purus consequat nibh, libero tortor etiam ultrices pretium, curabitur taciti commodo natoque aliquet.

Inceptos ridiculus orci nisi habitant nostra primis phasellus augue hac volutpat eu, cras felis netus potenti risus consequat leo ante lacinia conubia, nec faucibus morbi finibus penatibus maecenas dignissim lectus imperdiet sed.


Nested
Generated Dummy Image 9
Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, sagittis est penatibus odio elementum volutpat litora quis, taciti vitae dignissim habitant condimentum euismod.

Lorem suscipit eget natoque cursus imperdiet magnis ante porta torquent, sagittis vestibulum proin fringilla facilisis inceptos vivamus tincidunt lacus, malesuada vehicula augue arcu diam netus efficitur tortor.

Per luctus vitae laoreet enim inceptos aenean tempor odio metus nunc, curabitur quisque egestas vivamus et imperdiet porttitor lectus orci.

Generated Dummy Image 10
Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit augue dictumst, est fringilla eros dis interdum mus fermentum urna, aenean venenatis tempor sodales nam mollis libero lobortis.

Mollis faucibus eu malesuada quis dolor amet aenean, quisque conubia aliquam porta feugiat curae dapibus ridiculus, diam consequat eget vivamus viverra facilisis.

Sapien libero felis mattis porttitor eros faucibus, porta ridiculus curae magnis diam, sagittis duis hendrerit tincidunt dis.

List Groups

Basic List Group
  • Lorem ipsum dolor sit amet consectetur adipiscing elit orci diam phasellus ullamcorper est, elementum eros conubia eleifend aenean semper rhoncus sem duis erat facilisi feugiat, mauris per ridiculus scelerisque pharetra suscipit penatibus aptent augue arcu mattis.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit congue facilisis sagittis ad, elementum tempor donec aptent fames molestie dictum luctus iaculis nascetur, primis maecenas mattis mi vulputate semper facilisi varius taciti pulvinar.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit, ridiculus per senectus vestibulum efficitur mollis, rhoncus sed tortor lectus tellus conubia.


Linked Items

Media List Group
  • Generated Dummy Image 11

    Header 1

    Lorem ipsum dolor sit amet consectetur adipiscing elit nibh velit, conubia litora accumsan fermentum cursus eu vehicula id nulla sollicitudin, non sem consequat nostra facilisi ut eget parturient.

    Et curae nascetur justo aenean pharetra fermentum suscipit vestibulum lacus adipiscing, nibh ante lobortis facilisi ultrices sit lacinia efficitur penatibus, dapibus consequat neque auctor urna ligula sociosqu tempus egestas.

    Ex feugiat a elit vel mauris varius ac, at arcu placerat consectetur dignissim fermentum consequat nec, venenatis elementum sed maecenas facilisis laoreet.

  • Generated Dummy Image 12

    Header 2

    Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies pulvinar malesuada, donec efficitur semper odio cursus eros viverra netus sollicitudin.

    Facilisis pharetra integer porttitor nam ultrices porta ipsum fringilla finibus, tempus aliquam suspendisse arcu consectetur diam placerat congue sociosqu mauris, imperdiet sagittis elementum lectus sed donec feugiat cubilia.

    Nam nec tincidunt potenti vehicula purus diam molestie, velit sapien pulvinar curabitur sagittis litora sodales, rutrum justo dis nisl magnis est.

  • Generated Dummy Image 13

    Header 3

    Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet vestibulum, nulla luctus finibus penatibus mollis viverra montes porttitor himenaeos, lacus facilisis varius ultricies eget tempus et id.

    Egestas maecenas mattis ac duis massa nisi augue porttitor, consectetur platea praesent metus lacinia dictumst faucibus bibendum, accumsan tellus felis vestibulum porta viverra montes.

    Nulla et euismod laoreet suscipit massa netus nunc magnis lobortis quis, conubia sodales mattis class interdum pellentesque consectetur vehicula tellus, porta bibendum cubilia tortor mus congue quam volutpat diam.

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 eros lectus, id viverra ullamcorper ac metus molestie conubia duis pharetra cursus, interdum malesuada montes tristique eu nec donec turpis.

Dis ac faucibus habitant ultrices himenaeos auctor torquent eleifend magnis, litora mi senectus nascetur eu tincidunt urna pharetra, sit et ullamcorper lorem elementum ornare consequat sed.

Automatically created by lorem ipsum generator

Lead

Lead

Lorem ipsum dolor sit amet consectetur adipiscing elit et tellus, proin fermentum finibus ac curae id tempus nunc.

Lorem ipsum dolor sit amet consectetur adipiscing elit magna, quam nec consequat id inceptos massa convallis ullamcorper fringilla, nascetur purus dignissim risus nisl penatibus nullam.

​Border

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit nulla lacinia maximus curabitur habitasse egestas sagittis, bibendum nibh facilisis dapibus vestibulum malesuada placerat cursus tristique vehicula class interdum.

Lorem ipsum dolor sit amet consectetur adipiscing elit phasellus, rutrum suscipit dictumst conubia aliquam faucibus dictum urna tristique, libero odio curae volutpat torquent convallis ad.

Lorem ipsum dolor sit amet consectetur adipiscing elit ridiculus euismod, ante sollicitudin dis facilisis pulvinar faucibus pretium taciti, maximus quam nibh vestibulum dictum urna primis arcu.

Color

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit ligula, finibus himenaeos eros risus hendrerit egestas inceptos gravida dictum, phasellus sem sed non pellentesque enim scelerisque.

Lorem ipsum dolor sit amet consectetur adipiscing elit pharetra id ultricies nibh lacus nunc nisl, netus class tellus vivamus nascetur dis tempus penatibus suscipit condimentum finibus lacinia.

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 metus bibendum, velit nisi turpis congue vel sem ullamcorper duis, maecenas magnis elementum sollicitudin odio risus quis fermentum.

Lorem ipsum dolor sit amet consectetur, adipiscing elit nibh eu varius mus, condimentum nulla nascetur odio.

Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum aliquam fames, imperdiet metus sapien enim arcu eu nascetur finibus egestas.

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 eu sollicitudin cursus, convallis himenaeos luctus nullam nisl ad nam integer tempor, finibus quam natoque ridiculus in metus habitant nibh sagittis.