Ngôn ngữ:

Bootstrap 4 Shortcodes Demo 4.6.4

Rows and Columns

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.


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.


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.


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

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

Large Shadow

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

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

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, 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
Generated Dummy Image 7
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
Generated Dummy Image 8
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
Generated Dummy Image 9
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.

Generated Dummy Image 10
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.

List Groups

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

Media List Group
  • Generated Dummy Image 11

    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.

  • Generated Dummy Image 12

    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.

  • Generated Dummy Image 13

    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.

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

Lead

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.

​Border

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.

Color

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

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

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 hendrerit magna diam lacinia velit platea, fusce condimentum iaculis tristique sem pulvinar orci sollicitudin odio accumsan leo ultricies.

Số lượt truy cập: 167,986