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

Narrow your browser window to see the columns stack.

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.

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

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

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

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.

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

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

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

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

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.

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.

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

Active Disabled Link 1 Link 2

Media List Group

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

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

Images generated with img-gen.

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.

First paragraph uses lead.

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.

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

Lorem ipsum dolor sit amet consectetur adipiscing elit diam, ante accumsan luctus himenaeos ullamcorper facilisi feugiat eu, nascetur suspendisse nisi faucibus aliquet tempor nullam.

Lorem ipsum dolor sit amet consectetur adipiscing elit at eget, ex lacus risus cubilia efficitur porttitor felis.

Lorem ipsum dolor sit amet consectetur adipiscing elit cubilia fames condimentum proin, auctor vehicula scelerisque dui molestie lectus rhoncus eleifend ad id, maecenas ut quisque ultrices efficitur nisl class leo turpis venenatis.

Lorem ipsum dolor sit amet consectetur adipiscing elit libero, pulvinar lectus per turpis quam tristique dapibus platea, suscipit pellentesque fringilla vehicula id vestibulum velit.

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

Icon and Text inside span with «success» color.