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

Narrow your browser window to see the columns stack.

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.

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

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

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

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

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

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

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

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

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.

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.

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

Active Disabled Link 1 Link 2

Media List Group

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

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

Images generated with img-gen.

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.

First paragraph uses lead.

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.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit, consequat diam molestie suspendisse enim ornare etiam, purus efficitur placerat ullamcorper eros vel, nibh nisl pretium dictumst hendrerit lacinia.

Lorem ipsum dolor sit amet consectetur adipiscing elit pulvinar torquent, suscipit penatibus ex aptent habitasse interdum odio montes pharetra maximus, morbi himenaeos sollicitudin enim justo nulla molestie etiam.

Lorem ipsum dolor sit amet consectetur adipiscing elit est finibus, curabitur iaculis cursus diam cras tristique mi fusce consequat, dis pharetra ante maximus magnis at morbi porta.

Lorem ipsum dolor sit amet consectetur, adipiscing elit facilisi dictumst habitant, scelerisque curabitur congue nunc per, morbi himenaeos phasellus nisi.

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

Icon and Text inside span with «success» color.