Demo

FD Bootstrap Components

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


Cards

...

Card title

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

Button
...
Title of the news
View and share files
Conversation about takeaways from annual SharePoint conference

Sent a few minutes ago

...
Large_file_name_…s_truncating.pptx
...
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
Card image
Jim Lohan

UX Designer

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

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

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.

Carousel


Buttons


Progress

25%
25%

Spinners

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...


Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...



Alerts


Badges

Example heading New

Example heading New

Example heading New

Example heading New

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



Primary Secondary Success Danger Warning Info Light Dark

Notes & typography

Note primary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note secondary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note success: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note danger: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note warning: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note info: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note light: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Main website heading (h1)

Website subheading (h4)


Section heading (h3)


Component heading (h5)

Component subheading

Component alternative subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?

Component heading (h5)

Component subheading

Component alternative subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?

Component heading (h5)

Component subheading

Component alternative subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?


Button group
























Collapse

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. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Dropdowns


Modal


Toasts


Acrylic

Blur: 30px

Blur: 60px

Blur: 40px

Blur: 15px

Blur: 5px

Blur: 30px

Blur: 60px

Blur: 40px

Blur: 15px

Blur: 5px


Tooltips


Popovers


Footer

Footer Content

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam voluptatem veniam, est atque cumque eum delectus sint!

© 2020 Copyright: MDBootstrap.com
Footer Content

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam voluptatem veniam, est atque cumque eum delectus sint!

© 2020 Copyright: MDBootstrap.com

Breadcrumbs


Pills

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi eligendi nulla doloremque, et consequuntur! Fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi eligendi nulla doloremque, et consequuntur! Fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi eligendi nulla doloremque, et consequuntur! Fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi eligendi nulla doloremque, et consequuntur! Fuga.

Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi eligendi nulla doloremque, et consequuntur! Fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi eligendi nulla doloremque, et consequuntur! Fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi eligendi nulla doloremque, et consequuntur! Fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi eligendi nulla doloremque, et consequuntur! Fuga.

Tables

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

Shadows