Bootstrap 4 Shortcodes Demo 4.6.4

3 same size columns on medium and larger screens

Column 1 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit habitasse mattis consequat, conubia molestie finibus ullamcorper euismod erat tortor phasellus enim eget porta, fusce volutpat ad viverra mauris nunc orci pretium malesuada.

Column 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing, elit eu hac ante sem tempus convallis, magna ac per ultrices dis.

Column 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit dui in donec, quisque blandit turpis massa felis odio enim a ultrices, auctor quam ullamcorper rhoncus diam pretium sociosqu vitae mauris.

Narrow your browser window to see the columns stack.

3 columns

Column 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit mollis, libero lobortis sed ultricies feugiat urna ad ornare, eget quam euismod imperdiet nunc posuere fringilla.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit blandit natoque egestas at, dapibus neque nunc etiam eleifend lacinia nec taciti facilisi ligula, enim purus placerat lacus aliquet mi tincidunt donec mattis conubia.

Augue nunc habitasse interdum aliquet ultrices venenatis elementum mattis sollicitudin volutpat, ex posuere suscipit erat justo imperdiet aliquam sagittis a, pharetra lorem porta placerat orci nascetur natoque cubilia scelerisque.

Column 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit himenaeos, pellentesque pretium donec tempor metus massa sed lacus augue, venenatis sapien laoreet eros mollis tincidunt tellus.

These columns will not stack when you narrow your browser window.

2 columns with an offset in between

Column 1 (25%)

Lorem ipsum dolor sit amet consectetur, adipiscing elit et eros feugiat aptent, pulvinar ac at placerat.

Column 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, dis lobortis aliquam molestie pharetra tristique, tortor pellentesque donec netus nascetur etiam.

These columns will not stack when you narrow your browser window.

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

These columns will not stack when you narrow your browser window.

Embedded Video

No real video

Narrow your browser window to see the video size adjust.

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 netus enim interdum duis sodales, platea primis natoque inceptos erat.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur vehicula tincidunt porta turpis nulla congue, vitae nec netus facilisi aliquet eleifend maximus cursus sagittis euismod pretium ad porttitor.

Narrow and widen your browser window to see the effect.

Simple card with a body element

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

List group is flush with the card

Kitchen Sink

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

List group is flush with the card. Links in footer are next to each other.

Simple card with image cap

Card Title

Lorem ipsum dolor sit.

Image caps are supported with the [card-img] shortcode and the top or bottom flag.

Simple card with image overlay

Card Title

Lorem ipsum dolor sit.

Image overlay cards are supported with the [card-img-overlay] shortcode.

Card with header and footer

Example Header

Card Title

Lorem ipsum dolor sit.

Example footer.

Card header and card footers are supported with the [card-header] and [card-footer] shortcodes.

Card group

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.

Use card groups to render cards as a single, attached element with equal width and height columns.

Card deck

Card Title

Lorem ipsum dolor sit.

Card Title

Cras justo odio.

Card Title

Dapibus ac facilisis in.

Use a card deck for a set of equal width and height cards that aren’t attached to one another.

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 can be organized into Masonry-like columns with just CSS by wrapping them in [card-columns].

Cards with shadows

No Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit posuere sem, commodo ridiculus porta nunc netus per sapien urna eu turpis, aptent nostra ultrices cras hac scelerisque pretium lacinia.

Small Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit vestibulum accumsan molestie suscipit tempor, quis nisi lectus pharetra justo ante interdum aliquet aptent fringilla sem.

Regular Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit sed interdum etiam scelerisque molestie, nullam rutrum vitae cubilia sociosqu donec ullamcorper nunc mauris venenatis.

Large Shadow

Lorem ipsum dolor sit amet consectetur adipiscing elit luctus, taciti dapibus auctor facilisi dictum inceptos.

Use the shadow utilities to add a shadow to the cards.

Free Icons

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

See the Font Awesome Gallery for more icons.

Stacked Icons

The second icon is bigger than the first.

Standard buttons

Hyperlink

Outlined buttons

Hyperlink

Button size

Active buttons

Disabled buttons

Block level buttons

Basic example

The large button group is justified and vertical.

Button Toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Single Button Dropdown

Any single [button] or link can be turned into a dropdown toggle with some markup changes.

Split Button Dropdown

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of split for proper spacing around the dropdown caret.

Drop Variations

Use drop="up|left|right" to show the dropdown over, left or right to the button or link.

Simple Navigation Links

Navigation Link and Dropdown with Pills

Note: The [dropdown-menu] has to be inside the [nav-item].

Navigation Link and Dropdown with Tabs

Note: The [dropdown-menu] has to be inside the [nav-item].

Collapsible Navigation Bar

Light Color:

Dark Color:

Narrow your browser window to see the menu bar collapse.

Vertical Navigation Bar

No Branding or toggler with the vertical navigation bar.

Breadcrumb style links

Use active for the currently active breadcrumb.

Badge styles

New Messages 9
New Messages 9
New Messages 9

Use utility class to format the badge and right to float the badge to align to the right of its container.

Normal Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit, sem molestie neque fames fusce euismod non aenean, dictum finibus malesuada eros odio lacus.

Fluid Jumbotron

Header Line

Lorem ipsum dolor sit amet consectetur adipiscing elit magnis vivamus accumsan per primis sollicitudin, ac maximus mattis pellentesque laoreet finibus neque semper arcu at habitant quis.

The fluid jumbotron is still confined to its parent’s container.

Alerts

Default loremipsumdolorsit

Primary loremipsumdolorsit

Secondary loremipsumdolorsit

Success loremipsumdolorsit

Info loremipsumdolorsit

Warning loremipsumdolorsit

Danger loremipsumdolorsit

Dark loremipsumdolorsit

Light loremipsumdolorsit

Use the alert-link class to quickly provide matching colored links within any alert.

Dismissible Alerts

Primary loremipsumdolorsit

Secondary loremipsumdolorsit

Success loremipsumdolorsit

Info loremipsumdolorsit

Warning loremipsumdolorsit

Danger loremipsumdolorsit

Dark loremipsumdolorsit

Light loremipsumdolorsit

Dismissible Alerts with Fade Effect

Primary loremipsumdolorsit

Secondary loremipsumdolorsit

Success loremipsumdolorsit

Info loremipsumdolorsit

Warning loremipsumdolorsit

Danger loremipsumdolorsit

Dark loremipsumdolorsit

Light loremipsumdolorsit

Progress Bar Styles

Simple

Striped

Striped and Animated

Stacked

Stacked and Labeled

50%

25%

5%

Top Aligned Media

Header

Lorem ipsum dolor sit amet consectetur adipiscing elit, tempus nam felis fames enim nullam orci, et velit donec facilisi sociosqu dapibus.

Ut congue semper odio viverra nullam parturient, malesuada maecenas id auctor duis maximus vestibulum, iaculis condimentum leo etiam diam.

Ad consequat eros facilisi phasellus tincidunt suspendisse, volutpat habitasse nullam penatibus sapien, faucibus magnis rhoncus mattis ac.

Center Aligned

Header

Lorem ipsum dolor sit amet consectetur adipiscing elit sagittis semper proin, turpis dictumst litora montes neque vehicula posuere tincidunt accumsan ullamcorper, integer donec odio sed curabitur parturient himenaeos per magna.

Sit lacinia nibh ad eleifend nulla ac sollicitudin, libero urna consequat posuere interdum faucibus aenean suscipit, integer tortor natoque per fermentum facilisi.

Ante consequat facilisi tempus facilisis platea lacus sapien, nec efficitur velit rhoncus interdum cubilia, nullam tempor nisl vitae elit ad.

Bottom Aligned

Header

Lorem ipsum dolor sit amet consectetur adipiscing elit a eu himenaeos tortor facilisis, pellentesque habitant integer sodales et sagittis sem platea erat rhoncus curabitur.

Tristique phasellus justo cras faucibus finibus potenti nisi accumsan arcu vestibulum, tincidunt duis venenatis dis maximus nibh bibendum molestie suscipit, hac proin dictumst a mauris inceptos iaculis ornare non.

Bibendum ut urna hendrerit eget ligula magna iaculis congue nisl maecenas imperdiet fusce elementum, ac tristique adipiscing non laoreet torquent faucibus primis conubia venenatis pretium commodo sapien, nisi dui rhoncus natoque efficitur dis parturient vivamus finibus vehicula eleifend est.

Nested

Outer Header

Lorem ipsum dolor sit amet consectetur adipiscing elit lacinia porttitor feugiat, aliquam inceptos curae libero porta nisl fringilla tortor placerat, taciti donec eu hac nunc laoreet fames aenean tristique.

Nunc suscipit ut vestibulum ornare mi gravida ultricies, aliquet eget sapien sociosqu nec habitant convallis ex, magna quam lacus eu senectus inceptos.

Ullamcorper rhoncus habitant at ad vulputate magna iaculis nascetur mattis, duis tincidunt quam vel pellentesque in diam sed, dolor nulla sodales tortor convallis odio vitae varius.

Inner Header

Lorem ipsum dolor sit amet consectetur adipiscing elit magna aliquet non mattis, volutpat nascetur ac justo phasellus sem inceptos per facilisi odio.

Cras placerat finibus imperdiet arcu dictum porta eleifend sagittis, torquent mi curae laoreet litora dapibus vitae velit, malesuada ad primis feugiat urna auctor in.

Iaculis mi aliquet porttitor erat ad diam mattis ultrices, praesent molestie massa suscipit ligula nibh ornare.

Basic List Group

Lorem ipsum dolor sit amet consectetur adipiscing, elit nibh sodales lectus nisl, feugiat interdum nostra a sem.
Lorem ipsum dolor sit amet consectetur adipiscing elit, praesent congue cursus id sodales facilisis aliquam lobortis, suscipit dictum nunc libero tortor semper.
Lorem ipsum dolor sit amet consectetur adipiscing elit lectus ante ligula cursus, efficitur vivamus placerat fusce facilisis nec elementum curae libero cubilia inceptos nisl, ridiculus commodo tristique velit tincidunt eu egestas a dui tellus.

Linked Items

Active Disabled Link 1 Link 2

Media List Group

Header 1

Lorem ipsum dolor sit amet consectetur adipiscing, elit curabitur venenatis purus praesent parturient luctus, pharetra vitae egestas dictumst ut.
At adipiscing volutpat metus gravida rutrum est dictum lorem fermentum ornare semper feugiat, taciti senectus auctor mi sodales consequat habitant nunc placerat libero dis.
Hendrerit aptent tempus vitae adipiscing sit tristique fusce finibus congue nunc, sed torquent placerat nibh faucibus rutrum aenean tempor pharetra morbi feugiat, eu mauris in praesent sollicitudin ac molestie lectus ornare.
Header 2

Lorem ipsum dolor sit amet consectetur adipiscing elit platea gravida, nascetur per accumsan himenaeos magna varius est hendrerit, posuere congue netus cursus ex ullamcorper condimentum maecenas.
Ut nascetur finibus ac libero enim ipsum porttitor litora habitant, blandit bibendum dictumst purus eros sed neque.
Luctus ultrices magna imperdiet faucibus ex bibendum maecenas, elit sit tellus cursus aenean habitant tempus, vulputate penatibus senectus nostra et augue.
Header 3

Lorem ipsum dolor sit amet consectetur adipiscing elit felis cursus metus, ex facilisis egestas iaculis auctor pretium primis purus sapien, tellus curae vulputate convallis natoque inceptos nostra hac per.
Posuere aptent dolor massa vel senectus viverra sagittis torquent ullamcorper, dignissim finibus litora in morbi curabitur dis neque, elementum leo rutrum conubia nisl per condimentum interdum.
Aliquet aptent efficitur arcu praesent nostra elit congue leo id, proin eros suspendisse ac morbi iaculis pharetra et a facilisis, imperdiet auctor sodales taciti parturient ut consequat mus.

Use the media flag at the [list-group] tag and the list-group flag at the [media] tag.

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.

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

Some bootstrap themes already have their [img] tag set to responsive.

Image Borders and Thumbnails

Images generated with img-gen.

Image with Text above

Generated Dummy Image 21 — A caption for the below image.

Generated Dummy Image 22 — A caption for the below image.

Images generated with img-gen.

Image with Text below

Generated Dummy Image 23 — A caption for the above image.

Generated Dummy Image 24 — A caption for the above image.

Images generated with img-gen.

Blockquote

Lorem ipsum dolor sit amet consectetur adipiscing elit sodales vivamus, semper dictumst facilisi himenaeos aenean luctus sed etiam quam, tristique ac pretium malesuada eleifend feugiat maximus turpis.
Mus viverra aliquam facilisis sodales parturient luctus sit, ligula id leo habitasse molestie nunc ipsum est, euismod adipiscing nam vitae efficitur sollicitudin.

Automatically created by lorem ipsum generator

Images generated with img-gen.

Lead

Lorem ipsum dolor sit amet consectetur adipiscing, elit curae varius sociosqu luctus, leo ex magnis nisl accumsan.

Lorem ipsum dolor sit amet consectetur adipiscing elit, imperdiet sagittis efficitur maecenas arcu elementum tempor rhoncus, metus urna porta fusce morbi aliquet.

First paragraph uses lead.

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit nostra efficitur, varius duis diam vel mus bibendum turpis etiam ridiculus torquent, class eleifend vestibulum dictumst est inceptos curae fringilla.

Lorem ipsum dolor sit amet consectetur adipiscing elit vehicula, eu egestas taciti sagittis ridiculus justo cursus cubilia ullamcorper, quam habitant nunc ultrices nec dapibus himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit pharetra fermentum magna, scelerisque imperdiet habitant accumsan quis sociosqu arcu donec.

Colored Text Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit, sapien convallis nulla faucibus natoque interdum malesuada, vitae dapibus lacinia magna quam hac.

Lorem ipsum dolor sit amet consectetur, adipiscing elit phasellus duis tempus semper, nunc diam habitant nisi.

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

The flex container has a fixed height of 150px.

Flex Item Self-Align

Flex
item
1

Flex item 2

Flex
item
3

Flex item 4

Flex
item
5

Flex item 6

2 is aligned at start, 4 at center and 6 at end

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 Examples

Tooltips work best with [button]s or links but can be attached to any element.

popover Examples

Popovers work best with [button]s or links but can be attached to any element.

Basic Accordion

Lorem ipsum dolor sit amet consectetur adipiscing elit justo augue neque, tempus molestie vivamus at quis fringilla urna eu massa.

Lorem ipsum dolor sit amet consectetur adipiscing elit lacinia sapien massa, inceptos dui sollicitudin mollis lectus iaculis est vitae faucibus in, urna justo praesent habitasse scelerisque donec enim lacus morbi.

Lorem ipsum dolor sit amet consectetur adipiscing elit class habitant nascetur, molestie curabitur imperdiet iaculis congue malesuada fringilla dapibus inceptos, libero taciti potenti blandit lobortis conubia scelerisque hac maecenas.

Carousel with text

Lorem ipsum dolor sit amet consectetur adipiscing elit augue accumsan, faucibus maecenas litora torquent orci ligula vitae non eleifend, imperdiet porttitor nascetur blandit vulputate vehicula elementum malesuada.

Lorem ipsum dolor sit amet consectetur adipiscing elit fringilla, auctor blandit viverra metus accumsan quis ligula diam, erat neque in lacus sagittis convallis ad.

Lorem ipsum dolor sit amet consectetur adipiscing elit placerat, a ut fusce dignissim montes viverra tellus id ornare, per pharetra imperdiet nullam vel pellentesque dui.

Lorem ipsum dolor sit amet consectetur adipiscing elit sociosqu metus pulvinar, primis et per lacus tortor habitasse ante vulputate mus, habitant in luctus dictumst sodales natoque id senectus accumsan.

Card body adjust to paragraph height.

Standard Carousel

4 slides, pause, no controls, no indicator, wrap, interval 5000ms

Customized Carousel

Caption 1

Caption 2

Caption 3

Caption 4

4 slides, no pause, controls, indicator, wrap, interval 1000ms

Standard Modal Examples

Centered Small Modal Examples

Float and Clearfix Examples

No Float

Left Float

Right Float

No Float

Right Float

Float Left

Wrapper Example (set color for icon and text)

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit magna diam lacinia velit platea, fusce condimentum iaculis tristique sem pulvinar orci sollicitudin odio accumsan leo ultricies.

Icon and Text inside span with “success” color.