Bootstrap 4 Shortcodes Demo 4.6.5

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.

Narrow your browser window to see the columns stack.

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.

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 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.

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 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.

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 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

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.

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 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.

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 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

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

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

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.

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.

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

Active Disabled Link 1 Link 2

Media List Group

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.
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.
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.

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, 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

Images generated with img-gen.

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.

First paragraph uses lead.

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.

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 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 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 with text

Lorem ipsum dolor sit amet consectetur adipiscing elit venenatis vestibulum interdum nam est pharetra, lacus cras eleifend litora vitae maecenas blandit id sed cursus laoreet.

Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam, conubia mattis dapibus montes proin diam ridiculus, enim elementum pulvinar orci hac feugiat maecenas.

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc non, class litora commodo tellus et aliquet torquent libero iaculis faucibus, ridiculus velit ac sagittis nostra luctus nibh rhoncus.

Lorem ipsum dolor sit amet consectetur adipiscing elit etiam, consequat mus leo nam nec ex.

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

Icon and Text inside span with «success» color.