Demo

FD Bootstrap Components

Visual guide of components in the newest Bootstrap 4 and Fluent Design

Buttons

Basic buttons

Button tags

Link

Outline buttons

Block buttons

Sizing

Button states

Primary link Link

Disabled buttons

Primary link Link

Buttons with icons

Cards

Basic card

photo
NEW

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Call to action

Personal card

Card image
Jim Trump

UX Designer

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, deserunt.

  • Ellsworth , ME
  • 123 456 789
  • exmaple@exmaple.com

Features card

Lorem, ipsum.

Lorem, ipsum.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere facilis ullam est velit corporis corrupti nisi dolore soluta fugit provident!

  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.

Product card

photo
WORKSPACE HEALTH COMFORT

About blogs and more

by @SomeOne

20/06/2018 in Somewhere

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.

Call to action
121 66 19

Product card v.2

photo

Amazing set

With that set, you will learn new amazing skills.

  • Everything white and black
  • More ram
  • Better graphic card
  • Wireless headphones
  • Unforgettable impressions

Available in five different colors

Now 75% off
$300 $75

Product card

02/06/2018

The Best of Classical Music

by @Muzyka Instrumentalna

Classical Music Piano Playlist Mix.

67 695 660 views
393k 18k

Card group

Card image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card deck

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card columns

Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download
Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download
Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download
Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download
Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download
Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download
Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download
Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download
Card image

Lorem, ipsum.

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet..

Download

Tables

Basic table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Borderless table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hoverable rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Captions

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Always responsive

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

Breakpoint specific

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

Inputs

Checkboxes


Radios

Footers

Basic footer

Copyright

Links

Text

Footer text 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita sapiente sint, nulla, nihil repudiandae commodi voluptatibus corrupti animi sequi aliquid magnam debitis, maxime quam recusandae harum esse fugiat. Itaque, culpa?

Footer text 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio deserunt fuga perferendis modi earum commodi aperiam temporibus quod nulla nesciunt aliquid debitis ullam omnis quos ipsam, aspernatur id excepturi hic.

© 2018 Copyright: MDBootstrap.com

Forms

Images

Video

Icons

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Primary Secondary Default Success Danger Warning Info Light Dark

Progress

Basic progress bars

Circle

Primary color

Default color

Secondary color

Succes color

Danger color

Warning color

Info color

Line

Primary color

Default color

Secondary color

Success color

Danger color

Warning color

Info color

Colors palette

#FFB900 warning-color

#FF8C00 amber

#F7630C orange

#CA5010 chocolate

#DA3B01 deep-orange

#EF6950 salmon

#D13438 dark-coral

#FF4343 coral

#E74856 crimson

#E81123 red

#EA005E pink

#C30052 medium-violet

#E3008C megent

#BF0077 dark-pink

#C239B3 orchid

#9A0089 purple

#0078D7 blue

#0063B1 dark-blue

#8E8CD8 light-violet

6B69D6 slate-blue

#8764B8 light-purple

#744DA9 dark-purple

#B146C2 medium-orchid

#881798 dark-orchid

#0099BC cyan

#2D7D9A steel-blue

#00B7C3 turquoise

#038387 teal

#00B294 light-sea

#018574 dark-cyan

#00CC6A green

#10893E forest-green

#7A7574 dimgrey

#5D5A58 dark-dimgrey

#68768A bluegrey

#515C6B dark-bluegrey

#567C73 slate-grey

#486860 green-grey

#498205 grass-green

#107C10 dark-green

#767676 grey

#4C4A48 dark-grey

#69797E steel

#4A5459 dark-steel

#647C64 olive

#525E54 dark-olive

#847545 sandy

#7E735F earth

primary

secondary

default

info

success

warning

danger

Tabs

Basic tabs

First title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Disabled item

First title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Fill

First title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Justify

First title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Fourth title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Carousels

Slides only

With controls

With indicators

With captions

Crossfade

Collapse

Basic collapse

Click the buttons below to show and hide another element via class changes.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Multiple target

A button or a can show and hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute. Multiple button> or a can show and hide an element if they each reference it with their href or data-target attribute.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Alerts

Basic alerts

Links

Additional content

Typography

Hierarchy

Header size 1

Subheader size 1

Paragraph 1


Header size 2

Subheader size 2

Paragraph 2


Header size 3

Subheader size 3

Paragraph 3


Header size 4

Subheader size 4

Paragraph 4


Header size 5

Subheader size 5

Paragraph 5


Header size 6

Subheader size 6

Paragraph 6

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Text alignment

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

Text utilities

This text should overflow the parent.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

This is in monospace

LoweRCased text.

Uppercased text.

capitalized text.

Bold text.

Normal weight text.

Light weight text.

Italic text.

Modals

Pagination



Active

Popovers

Basic popovers

Dismiss on next click

Dismissible popover

Tooltips

Basic tooltips

Shadows

Basic shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Media

Basic media

Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Alignment

Generic placeholder image
Top-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Generic placeholder image
Center-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Generic placeholder image
Bottom-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media list

  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Icons

Basic icons

  • EA01 Accept
  • EA02 Accident
  • EA03 AccidentSolid
  • EA04 Accounts
  • EA05 ActionCenter
  • EA06 ActionCenterAsterisk
  • EA07 ActionCenterMirrored
  • EA08 ActionCenterNotification
  • EA09 ActionCenterNotificationMirrored
  • EA0A ActionCenterQuiet
  • EA0B ActionCenterQuietNotification
  • EA0C Add
  • EA0D AddFriend
  • EA0E AddRemoteDevice
  • EA0F AddSurfaceHub
  • EA10 AddTo
  • EA11 AdjustHologram
  • EDE4 facebook-official
  • EDE5 facebook
  • EE33 twitter
  • EDFA instagram
  • EDFD joomla
  • EDFE jsfiddle
  • EE01 linkedin
  • EE04 maxcdn
  • EE06 medium
  • EE08 mixcloud
  • EE10 paypal
  • EE13 pinterest-p
  • EE14 product-hunt
  • EE18 rebel
  • EE19 reddit-alien
  • EE1D sellsy
  • EE1F simplybuilt
  • EE20 skyatlas
  • EE21 skype
  • EE22 slack
  • EE24 snapchat-ghost
  • EE25 soundcloud
  • EE26 spotify