\r\n\t);\r\n};\r\n\r\nexport default ServicesContent;","import React, { Fragment } from 'react';\r\nimport MetaTags from 'react-meta-tags';\r\n\r\nimport Loading from '../blocks/loading/Loading';\r\nimport Header from '../blocks/header/Header';\r\nimport Footer from '../blocks/footer/Footer';\r\n\r\nimport PageTitleHome from '../blocks/page-title/PageTitleHome';\r\nimport ContactsUs from \"../blocks/contacts/ContactUs\";\r\nimport ServicesHome from '../blocks/services/ServicesHome';\r\nimport AboutsUs from '../blocks/about/AboutUs';\r\nimport News from '../blocks/news/News';\r\nimport Newsletter from '../blocks/newsletter/Newsletter';\r\nimport ServicesContent from '../blocks/services/ServicesContent';\r\n\r\n\r\nconst Home = () => {\r\n document.body.classList.add('home');\r\n document.body.classList.add('header-absolute-true');\r\n\r\n return (\r\n \r\n \r\n \r\n Home | Mykery - Beauty Salon React JS Template\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AboutClients;\r\n","import React, { Fragment } from 'react';\r\nimport MetaTags from 'react-meta-tags';\r\n\r\nimport Loading from '../blocks/loading/Loading';\r\nimport Header from '../blocks/header/Header';\r\nimport Footer from '../blocks/footer/Footer';\r\n\r\nimport PageTitleAbout from '../blocks/page-title/PageTitleAbout';\r\nimport AboutReviews from '../blocks/about/AboutReviews';\r\nimport AboutImg from '../blocks/about/AboutImg';\r\nimport AboutsUs from '../blocks/about/AboutUs';\r\nimport AboutOurTeam from '../blocks/about/AboutOurTeam';\r\nimport AboutServices from '../blocks/about/AboutServices';\r\nimport AboutClients from '../blocks/about/AboutClients';\r\n\r\nconst About = () => {\r\n document.body.classList.add( 'page' );\r\n\r\n return (\r\n \r\n \r\n \r\n About us | Mykery - Beauty Salon React JS Template\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.
\r\n\r\n
\r\n
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
\r\n
\r\n\r\n
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
\r\n\r\n
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
\r\n );\r\n};\r\n\r\nexport default NewsComments;\r\n","import React, { Fragment } from 'react';\r\nimport MetaTags from 'react-meta-tags';\r\n\r\nimport Loading from '../blocks/loading/Loading';\r\nimport Header from '../blocks/header/Header';\r\nimport Footer from '../blocks/footer/Footer';\r\n\r\nimport PageTitleNewsSingle from '../blocks/page-title/PageTitleNewsSingle';\r\nimport NewsMeta from '../blocks/news/NewsMeta';\r\nimport NewsTitle from '../blocks/news/NewsTitle';\r\nimport NewsDescription from '../blocks/news/NewsDescription';\r\nimport NewsTags from '../blocks/news/NewsTags';\r\nimport NewsComments from '../blocks/news/NewsComments';\r\nimport Widget from '../blocks/widget/Widget';\r\n\r\nconst NewsSinglePost = () => {\r\n document.body.classList.add( 'single-post' );\r\n\r\n return (\r\n \r\n \r\n \r\n News single post | Mykery - Beauty Salon React JS Template\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default BackToServices;\r\n","import React, { Fragment } from 'react';\r\nimport MetaTags from 'react-meta-tags';\r\n\r\nimport Loading from '../blocks/loading/Loading';\r\nimport Header from '../blocks/header/Header';\r\nimport PageTitleServicesInside from '../blocks/page-title/PageTitleServicesInside'\r\nimport Footer from '../blocks/footer/Footer';\r\nimport BackToServices from '../components/button/BackToServices';\r\n\r\nconst ServicesInside = () => {\r\n document.body.classList.add( 'single' );\r\n document.body.classList.add( 'single-adveits_services' );\r\n\r\n return (\r\n \r\n \r\n \r\n Service inside | Mykery - Beauty Salon React JS Template\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
\r\n
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
Price list
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
Special in-salon treatments
\r\n
\r\n\r\n
\r\n
\r\n Unique hair restoring treatment with Lorem Ipsum\r\n From 35 $\r\n
\r\n\r\n
\r\n Scalp renewing treatment with Lorem Ipsum\r\n From 35 $\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
Haircut and hair styling
\r\n
\r\n\r\n
\r\n
\r\n Haircut\r\n From 35 $\r\n
\r\n\r\n
\r\n Bangs\r\n From 35 $\r\n
\r\n\r\n
\r\n Hair styling\r\n From 35 $\r\n
\r\n\r\n
\r\n Hair styling for occasion\r\n From 35 $\r\n
\r\n\r\n
\r\n Consulting\r\n From 35 $\r\n
\r\n\r\n
\r\n Trial hairstyling for occasion\r\n From 35 $\r\n
.mark and .small classes are also available to apply the same styles as <mark> and <small> while avoiding any unwanted semantic implications that the tags would bring.
\r\n\r\n
While not shown above, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
\r\n
\r\n );\r\n};\r\n\r\nexport default InlineTextElements;\r\n","import React from 'react'\r\nimport { Link } from \"react-scroll\";\r\n\r\nconst TextUtilities = () => {\r\n return (\r\n
\r\n
Text utilities
\r\n
Change text alignment, transform, style, weight, and color with our text and color utilities.
\r\n
\r\n );\r\n};\r\n\r\nexport default TextUtilities;\r\n","import React from 'react'\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst Abbreviations = () => {\r\n return (\r\n
\r\n
Abbreviations
\r\n
Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
\r\n
Add .initialism to an abbreviation for a slightly smaller font-size.
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.
\r\n\r\n
\r\n
\r\n
Description lists
\r\n
A description list is perfect for defining terms.
\r\n\r\n
Euismod
\r\n
\r\n
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
\r\n
Donec id elit non mi porta gravida at eget metus.
\r\n
\r\n\r\n
Malesuada porta
\r\n
Etiam porta sem malesuada magna mollis euismod.
\r\n\r\n
Truncated term is truncated
\r\n
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
\r\n\r\n
Nesting
\r\n
\r\n
\r\n
Nested definition list
\r\n
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
Description lists
\\n' +\r\n '
A description list is perfect for defining terms.
\\n' +\r\n '\\n' +\r\n '
Euismod
\\n' +\r\n '
\\n' +\r\n '
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
\\n' +\r\n '
Donec id elit non mi porta gravida at eget metus.
\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '
Malesuada porta
\\n' +\r\n '
Etiam porta sem malesuada magna mollis euismod.
\\n' +\r\n '\\n' +\r\n '
Truncated term is truncated
\\n' +\r\n '
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
\\n' +\r\n '\\n' +\r\n '
Nesting
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Nested definition list
\\n' +\r\n '
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
\r\n );\r\n};\r\n\r\nexport default MoreExamples;\r\n","import React from 'react';\r\nimport Headings from '../../content/typography/children/Headings';\r\nimport InlineTextElements from '../../content/typography/children/InlineTextElements';\r\nimport TextUtilities from './children/TextUtilities';\r\nimport Abbreviations from '../../content/typography/children/Abbreviations';\r\nimport Blockquotes from '../../content/typography/children/Blockquotes';\r\nimport Lists from '../../content/typography/children/Lists';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst Typography = () => {\r\n return (\r\n
\r\n
Typography
\r\n
There are examples of typography, including global settings, headings, body text, lists and more.
\r\n );\r\n};\r\n\r\nexport default Typography;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst Icons = () => {\r\n return (\r\n
\r\n
Icons
\r\n
More than 1,550 beautifully crafted icons with some helper classes.
\r\n\r\n
\r\n
FontAwesome
\r\n
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
\r\n );\r\n};\r\n\r\nexport default Icons;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ResponsiveImages = () => {\r\n return (\r\n
\r\n
Responsive images
\r\n
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.
\r\n );\r\n};\r\n\r\nexport default Picture;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ObjectFitSize = () => {\r\n return (\r\n
\r\n
Object fit size
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '\\n' }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default ObjectFitSize;\r\n","import React from 'react';\r\nimport ResponsiveImages from '../../content/images/children/ResponsiveImages';\r\nimport ImageThumbnails from '../../content/images/children/ImageThumbnails';\r\nimport AligningImages from '../../content/images/children/AligningImages';\r\nimport Picture from './children/Picture';\r\nimport ObjectFitSize from '../../content/images/children/ObjectFitSize';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst Image = () => {\r\n return (\r\n
\r\n
Images
\r\n
Information for opting your images into responsive behaviour (images never become larger than their parent elements). All of the image styles are added via classes.
\r\n );\r\n};\r\n\r\nexport default Image;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst TablesExamples = () => {\r\n return (\r\n
\r\n
Examples
\r\n
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.
\r\n
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
Create responsive tables by wrapping any .table with .table-responsive{ '-sm' | '-md' | '-lg' | '-xl' }, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
\r\n
\r\n );\r\n};\r\n\r\nexport default ContextualClasses;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst Captions = () => {\r\n return (\r\n
\r\n
Captions
\r\n
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
\r\n );\r\n};\r\n\r\nexport default Captions;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ResponsiveTables = () => {\r\n return (\r\n
\r\n
Responsive tables
\r\n
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{ '-sm' | '-md' | '-lg' | '-xl' }.
\r\n\r\n
\r\n
Vertical clipping/truncation
\r\n\r\n
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
\r\n
\r\n\r\n
\r\n
Always responsive
\r\n
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
Use .table-responsive{ '-sm' | '-md' | '-lg' | '-xl' } as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
\r\n
These tables may appear broken until their responsive styles apply at specific viewport widths.
\\n' +\r\n ''\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ResponsiveTables;\r\n","import React from 'react';\r\nimport TablesExamples from './children/TablesExamples';\r\nimport TablesHeadOptions from './children/TablesHeadOptions';\r\nimport StrippedRows from './children/StrippedRows';\r\nimport BorderedTable from './children/BorderedTable';\r\nimport BorderlessTable from './children/BorderlessTable';\r\nimport HoverableRows from './children/HoverableRows';\r\nimport SmallTable from './children/SmallTable';\r\nimport ContextualClasses from './children/ContextualClasses';\r\nimport Captions from './children/Captions';\r\nimport ResponsiveTables from './children/ResponsiveTables';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst Tables = () => {\r\n return (\r\n
\r\n );\r\n};\r\n\r\nexport default Tables;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst Figures = () => {\r\n return (\r\n
\r\n
Figures
\r\n
Examples for displaying related images and text with the figure component.
\r\n
Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>.
\r\n
Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.
\r\n\r\n
\r\n \r\n \r\n A caption for the above image.\r\n \r\n
\r\n\r\n
Aligning the figure’s caption is easy with text utilities.
\r\n\r\n \\n' +\r\n ' \\n' +\r\n ' A caption for the above image.\\n' +\r\n '\\n'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n\r\n
\r\n \r\n \r\n A caption for the above image.\r\n \r\n
\r\n\r\n \\n' +\r\n ' \\n' +\r\n ' A caption for the above image.\\n' +\r\n '\\n'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Figures;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst AlertExamples = () => {\r\n return (\r\n
\r\n
Examples
\r\n
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).
\r\n\r\n
\r\n
\r\n A simple primary alert—check it out!\r\n
\r\n\r\n
\r\n A simple secondary alert—check it out!\r\n
\r\n\r\n
\r\n A simple success alert—check it out!\r\n
\r\n\r\n
\r\n A simple danger alert—check it out!\r\n
\r\n\r\n
\r\n A simple warning alert—check it out!\r\n
\r\n\r\n
\r\n A simple info alert—check it out!\r\n
\r\n\r\n
\r\n A simple light alert—check it out!\r\n
\r\n\r\n
\r\n A simple dark alert—check it out!\r\n
\r\n
\r\n\r\n \\n' +\r\n ' A simple primary alert—check it out!\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' A simple secondary alert—check it out!\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' A simple success alert—check it out!\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' A simple danger alert—check it out!\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' A simple warning alert—check it out!\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' A simple info alert—check it out!\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' A simple light alert—check it out!\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' A simple dark alert—check it out!\\n' +\r\n '
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
\r\n\r\n
\r\n
\r\n
Well done!
\r\n
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
\r\n \r\n
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
Well done!
\\n' +\r\n '
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
\\n' +\r\n ' \\n' +\r\n '
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
\\n' +\r\n '
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default AdditionalContent;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport AlertExamples from './children/AlertExamples';\r\nimport LinkColor from './children/LinkColor';\r\nimport AdditionalContent from './children/AdditionalContent';\r\n\r\nconst Alerts = () => {\r\n return (\r\n
\r\n
Alerts
\r\n
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Alerts;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst LinksBadges = () => {\r\n return (\r\n
\r\n
Links
\r\n
Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default ContextualVariations;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst BadgeExample = () => {\r\n return (\r\n
\r\n
Example
\r\n
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
\r\n\r\n
Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.
\r\n );\r\n};\r\n\r\nexport default BadgeExample;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport LinksBadges from './children/LinksBadges';\r\nimport PillBadges from './children/PillBadges';\r\nimport ContextualVariations from './children/ContextualVariations';\r\nimport BadgeExample from './children/BadgeExample';\r\n\r\nconst Badge = () => {\r\n return (\r\n
\r\n
Badges
\r\n
Examples for badges, our small count and labeling component.
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Badge;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ButtonsExamples = () => {\r\n return (\r\n
\r\n );\r\n};\r\n\r\nexport default OutlineButtons;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ButtonTags = () => {\r\n return (\r\n
\r\n
Button tags
\r\n
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
\r\n
When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role=\"button\" to appropriately convey their purpose to assistive technologies such as screen readers.
\r\n );\r\n};\r\n\r\nexport default ButtonHover;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ButtonActive = () => {\r\n return (\r\n
\r\n
Button active
\r\n
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed=\"true\" attribute) should you need to replicate the state programmatically.
Disabled buttons using the <a> element behave a bit different:
\r\n\r\n
\r\n
<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
\r\n
Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
\r\n
Disabled buttons should include the aria-disabled=\"true\" attribute to indicate the state of the element to assistive technologies.
The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex=\"-1\" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default ButtonDisabled;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ButtonPlugin = () => {\r\n return (\r\n
\r\n
Button plugin
\r\n
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
\r\n\r\n
\r\n
Toggle states
\r\n
Add data-toggle=\"button\" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class andaria-pressed=\"true\" to the <button>.
Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle=\"buttons\" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.
\r\n
The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type=\"reset\"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.
\r\n
Note that pre-checked buttons require you to manually add the .active class to the input’s <label>.
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ButtonPlugin;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport ButtonsExamples from './children/ButtonsExamples';\r\nimport OutlineButtons from './children/OutlineButtons';\r\nimport ButtonTags from './children/ButtonTags';\r\nimport ButtonSizes from './children/ButtonSizes';\r\nimport ButtonHover from './children/ButtonHover';\r\nimport ButtonActive from './children/ButtonActive';\r\nimport ButtonDisabled from './children/ButtonDisabled';\r\nimport ButtonPlugin from './children/ButtonPlugin';\r\n\r\nconst Buttons = () => {\r\n return (\r\n
\r\n
Buttons
\r\n
Includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role=\"group\", while toolbars should have a role=\"toolbar\".
\r\n\r\n
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ButtonGroupBasicExample;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ButtonGroupButtonToolbar = () => {\r\n return (\r\n
\r\n
Button toolbar
\r\n
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.
\r\n );\r\n};\r\n\r\nexport default ButtonGroup;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst CardExample = () => {\r\n return (\r\n
\r\n
Example
\r\n
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.
\r\n
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various spacing utilities.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.
\r\n
Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.
\r\n\r\n
\r\n
\r\n
\r\n
Card title
\r\n
Card subtitle
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\\n' +\r\n ''\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default CardContentType;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst CardSizing = () => {\r\n return (\r\n
\r\n
Sizing
\r\n
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
\r\n\r\n
Using grid markup
\r\n
Using the grid, wrap cards in columns and rows as needed.
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Special title treatment
\r\n
With supporting text below as a natural lead-in to additional content.
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
\r\n\r\n
\r\n
Image caps
\r\n
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n
This is a wider card with supporting text below as a natural\r\n lead-in to additional content. This content is a little bit longer.
\r\n
\r\n Last updated 3 mins ago\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Card title
\r\n
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\r\n
\r\n Last updated 3 mins ago\r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\\n' +\r\n '
\\n' +\r\n ' Last updated 3 mins ago\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .no-gutters and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
Card title
\r\n
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\r\n
\r\n Last updated 3 mins ago\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\\n' +\r\n '
Last updated 3 mins ago
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default ImageHorizontal;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst CardStyle = () => {\r\n return (\r\n
\r\n
Card style
\r\n
Cards include various options for customizing their backgrounds, borders, and color.
\r\n\r\n
\r\n
Background and color
\r\n
Use text and background utilities to change the appearance of a card.
\r\n\r\n
\r\n\r\n
\r\n
Header
\r\n
\r\n
Primary card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Secondary card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Success card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Danger card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Warning card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Info card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Light card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Dark card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Primary card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Secondary card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Success card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Danger card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Warning card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Info card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Light card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Dark card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
Use border utilities to change just the border-color of a card. Note that you can put .text- color classes on the parent .card or a subset of the card’s contents as shown below.
\r\n\r\n
\r\n\r\n
\r\n
Header
\r\n
\r\n
Primary card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Secondary card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Success card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Danger card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Warning card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Info card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Light card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n
Header
\r\n
\r\n
Dark card title
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Primary card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Secondary card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Success card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Danger card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Warning card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Info card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Light card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Header
\\n' +\r\n '
\\n' +\r\n '
Dark card title
\\n' +\r\n '
Some quick example text to build on the card title and make up the bulk of the card\\'s content.
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
\r\n\r\n
\r\n
Card groups
\r\n
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\r\n
Last updated 3 mins ago
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n
This card has supporting text below as a natural lead-in to additional content.
\r\n
Last updated 3 mins ago
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\\n' +\r\n '
\\n' +\r\n ' Last updated 3 mins ago\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This card has supporting text below as a natural lead-in to additional content.
Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
\r\n\r\n
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title that wraps to a new line
\r\n
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\r\n
\r\n
\r\n
\r\n
\r\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n
This card has supporting text below as a natural lead-in to additional content.
\r\n
\r\n Last updated 3 mins ago\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
Card title
\r\n
This card has a regular title and short paragraphy of text below it.
\r\n
\r\n Last updated 3 mins ago\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
Card title
\r\n
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
\r\n
\r\n Last updated 3 mins ago\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Card title that wraps to a new line
\\n' +\r\n '
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This card has supporting text below as a natural lead-in to additional content.
\\n' +\r\n '
Last updated 3 mins ago
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This card has a regular title and short paragraphy of text below it.
\\n' +\r\n '
Last updated 3 mins ago
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Card title
\\n' +\r\n '
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CardPost;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport CardExample from './children/CardExample';\r\nimport CardContentType from './children/CardContentType';\r\nimport CardSizing from './children/CardSizing';\r\nimport CardNavigation from './children/CardNavigation';\r\nimport CardImages from './children/CardImages';\r\nimport ImageHorizontal from './children/ImageHorizontal';\r\nimport CardStyle from './children/CardStyle';\r\nimport CardLayout from './children/CardLayout';\r\nimport CardPost from './children/CardPost';\r\n\r\nconst Card = () => {\r\n return (\r\n
\r\n
Card
\r\n
Cards provide a flexible and extensible content container. It supports a wide variety of content, including images, text, links, and more.
Click the buttons below to show and hide another element via class changes:
\r\n\r\n
\r\n
.collapse hides content
\r\n
.collapsing is applied during transitions
\r\n
.collapse.show shows content
\r\n
\r\n\r\n
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle=\"collapse\" is required.
\r\n\r\n
\r\n setOpen( !open ) }\r\n aria-controls=\"collapseExample\"\r\n aria-expanded={ open }\r\n >\r\n Button with data-target\r\n \r\n \r\n
\r\n
\r\n 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.\r\n
\\n' +\r\n ' 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.\\n' +\r\n '
A <button> can show and hide multiple elements by referencing them with a query selector in its data-target attribute. Multiple <button> or <a> can show and hide an element if they each reference it with their or data-target attribute.
\r\n 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.\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n 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.\r\n
\\n' +\r\n ' 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.\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' 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.\\n' +\r\n '
\r\n );\r\n};\r\n\r\nexport default MultipleTargets;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Accordion, Card, Button } from 'react-bootstrap';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst AccordionExample = () => {\r\n return (\r\n
\r\n
Accordion example
\r\n
Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n Collapsible Group Item #1\r\n \r\n \r\n \r\n \r\n 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.\r\n \r\n \r\n \r\n \r\n \r\n \r\n Collapsible Group Item #2\r\n \r\n \r\n \r\n \r\n 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.\r\n \r\n \r\n \r\n \r\n \r\n \r\n Collapsible Group Item #3\r\n \r\n \r\n \r\n \r\n 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.\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' 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.\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' 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.\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' 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.\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default AccordionExample;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport CollapseExample from './children/CollapseExample';\r\nimport MultipleTargets from './children/MultipleTargets';\r\nimport AccordionExample from './children/AccordionExample';\r\n\r\nconst Collapse = () => {\r\n return (\r\n
\r\n
Collapse
\r\n
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.
\r\n\r\n
\r\n
Single button
\r\n
Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
\r\n
We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
Historically dropdown menu contents had to be links, but that’s no longer the case with v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
\r\n\r\n
\r\n \r\n Action\r\n Another action\r\n Something else here\r\n \r\n
If you want to use responsive alignment, disable dynamic positioning by adding the data-display=\"static\" attribute and use the responsive variation classes.
\r\n
To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{ '-sm' | '-md' | '-lg' | '-xl' }-right.
\r\n\r\n
\r\n \r\n \r\n Left-aligned but right aligned when large screen\r\n \r\n\r\n \r\n Action\r\n Another action\r\n Something else\r\n \r\n \r\n\r\n
To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right and .dropdown-menu{ '-sm' | '-md' | '-lg' | '-xl' }-left.
\r\n\r\n
\r\n \r\n \r\n Right-aligned but left aligned when large screen\r\n \r\n\r\n \r\n Action\r\n Another action\r\n Something else\r\n \r\n \r\n
Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
\r\n\r\n
\r\n \r\n
Some example text that's free-flowing within the dropdown menu.
\r\n
And this is more example text.
\r\n \r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n ' Some example text that\\'s free-flowing within the dropdown menu.\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' And this is more example text.\\n' +\r\n '
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item. The data-toggle=\"dropdown\" attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.
\r\n\r\n
Via data attributes
\r\n
Add data-toggle=\"dropdown\" to a link or button to toggle a dropdown.
\r\n\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n ' ...\\n' +\r\n '
\\n' +\r\n '
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default DropdownUsage;\r\n","import React, { Component } from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nimport OpenVariations from './children/OpenVariations';\r\nimport DropdownExamples from './children/DropdownExamples';\r\nimport Directions from './children/Directions';\r\nimport MenuItems from './children/MenuItems';\r\nimport MenuAlignment from './children/MenuAlignment';\r\nimport MenuContent from './children/MenuContent';\r\nimport DropdownOptions from './children/DropdownOptions';\r\nimport DropdownUsage from './children/DropdownUsage';\r\n\r\nclass Dropdowns extends Component {\r\n render() {\r\n return (\r\n
\r\n
Dropdowns
\r\n
Toggle contextual overlays for displaying lists of links and more.
\r\n );\r\n};\r\n\r\nexport default FormExamples;\r\n","import React\r\n from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst FormControls = () => {\r\n return (\r\n
\r\n
Form controls
\r\n
Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
\r\n
Be sure to explore our custom forms to further style <select>s.
Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
\r\n );\r\n};\r\n\r\nexport default FormControls;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst CheckboxesAndRadios = () => {\r\n return (\r\n
\r\n
Checkboxes and radios
\r\n
Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
\r\n
Disabled checkboxes and radios are supported. The disabled attribute will apply a lighter color to help indicate the input’s state.
\r\n
Checkboxes and radio buttons support HTML-based form validation and provide concise, accessible labels. As such, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.
\r\n\r\n
\r\n
Default (stacked)
\r\n
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.
Add .position-static to inputs within .form-check that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).
\r\n\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CheckboxesAndRadios;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst FormLayout = () => {\r\n return (\r\n
\r\n
Layout
\r\n
Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
\r\n\r\n
\r\n
Form groups
\r\n
The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.
\r\n
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.
Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.
As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.
The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
\r\n\r\n
\r\n
Controls are display: flex, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities.
\r\n
Controls and input groups receive width: auto to override the Bootstrap default width: 100%.
\r\n
Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
\r\n
\r\n\r\n
You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a <label> with each form control, even if you need to hide it from non-screenreader visitors with .sr-only.
Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these are present, assistive technologies may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.
\r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default FormLayout;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst HelpText = () => {\r\n return (\r\n
\r\n
Help text
\r\n
Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.
\r\n\r\n
\r\n
Associating help text with form controls
\r\n\r\n
Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.
\r\n
\r\n\r\n
Help text below inputs can be styled with .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above.
\r\n\r\n
\r\n \r\n \r\n Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.\r\n
\r\n\r\n Password\\n' +\r\n '\\n' +\r\n ' \\n' +\r\n ' Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.\\n' +\r\n ' '\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n\r\n
Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else) with nothing more than a utility class.
\r\n );\r\n};\r\n\r\nexport default DisabledForms;\r\n","import React, { Component } from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport FormExamples from './children/FormExamples';\r\nimport FormControls from './children/FormControls';\r\nimport CheckboxesAndRadios from './children/CheckboxesAndRadios';\r\nimport FormLayout from './children/FormLayout';\r\nimport HelpText from './children/HelpText';\r\nimport DisabledForms from './children/DisabledForms';\r\n\r\nclass Forms extends Component {\r\n render() {\r\n return (\r\n
\r\n
Forms
\r\n
Several form control styles, layout options, and custom components for creating a wide variety of forms.
\r\n );\r\n};\r\n\r\nexport default InputGroupSecondary;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst InputGroupBasicExamples = () => {\r\n return (\r\n
\r\n
Basic examples
\r\n
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.
Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with .flex-nowrap.
Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
\r\n
Sizing on the individual input group elements isn’t supported.
Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
\r\n
The exact technique to be used (<label> elements hidden using the .sr-only class, or use of the aria-label and aria-labelledby attributes, possibly in combination with aria-describedby) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.
\r\n
\r\n );\r\n};\r\n\r\nexport default InputGroupAccessibility;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport InputGroupPrimary from './children/InputGroupPrimary';\r\nimport InputGroupSecondary from './children/InputGroupSecondary';\r\nimport InputGroupBasicExamples from './children/InputGroupBasicExamples';\r\nimport InputGroupWrapping from './children/InputGroupWrapping';\r\nimport InputGroupSizing from './children/InputGroupSizing';\r\nimport InputGroupCheckboxesAndRadios from './children/InputGroupCheckboxesAndRadios';\r\nimport MultipleInputs from './children/MultipleInputs';\r\nimport MultipleAddons from './children/MultipleAddons';\r\nimport ButtonAddons from './children/ButtonAddons';\r\nimport ButtonsWithDropdowns from './children/ButtonsWithDropdowns';\r\nimport SegmentedButtons from './children/SegmentedButtons';\r\nimport CustomForms from './children/CustomForms';\r\nimport InputGroupAccessibility from './children/InputGroupAccessibility';\r\n\r\nconst InputGroup = () => {\r\n return (\r\n
\r\n
Input group
\r\n
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
\r\n );\r\n};\r\n\r\nexport default InputGroup;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst BasicExamples = () => {\r\n return (\r\n
\r\n
Basic examples
\r\n
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
\r\n );\r\n};\r\n\r\nexport default ActiveItems;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst DisabledItems = () => {\r\n return (\r\n
\r\n
Disabled items
\r\n
Add .disabled to a .list-group-item to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).
\r\n );\r\n};\r\n\r\nexport default DisabledItems;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst LinksAndButtons = () => {\r\n return (\r\n
\r\n
Links and buttons
\r\n
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.
\r\n
Be sure to not use the standard .btn classes here.
\r\n );\r\n};\r\n\r\nexport default Flush;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst Horizontal = () => {\r\n return (\r\n
\r\n
Horizontal
\r\n
Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{ 'sm' | 'md' | 'lg' | 'xl' } to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.
\r\n
ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.
Contextual classes also work with .list-group-item-action. Note the addition of the hover styles here not present in the previous example. Also supported is the .active state; apply it to indicate an active selection on a contextual list group item.
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ListGroupContextualClasses;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst ListGroupWithBadges = () => {\r\n return (\r\n
\r\n
With badges
\r\n
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default ListGroupCustomContent;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport BasicExamples from './children/BasicExamples';\r\nimport ActiveItems from './children/ActiveItems';\r\nimport DisabledItems from './children/DisabledItems';\r\nimport LinksAndButtons from './children/LinksAndButtons';\r\nimport Flush from './children/Flush';\r\nimport Horizontal from './children/Horizontal';\r\nimport ListGroupContextualClasses from './children/ListGroupContextualClasses';\r\nimport ListGroupWithBadges from './children/ListGroupWithBadges';\r\nimport ListGroupCustomContent from './children/ListGroupCustomContent';\r\n\r\nconst ListGroup = () => {\r\n return (\r\n
\r\n
List group
\r\n
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
\r\n );\r\n};\r\n\r\nexport default ListGroup;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst MediaObjectExample = () => {\r\n return (\r\n
\r\n
Example
\r\n
The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.
\r\n
Below is an example of a single media object. Only two classes are required—the wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utilities.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Media heading
\r\n
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.
\r\n
\r\n
\r\n
\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Media heading
\\n' +\r\n '
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.
Media objects can be infinitely nested, though we suggest you stop at some point. Place nested .media within the .media-body of a parent media object.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Media heading
\r\n
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.
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.
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Media heading
\\n' +\r\n '
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.
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.
Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your .media-body content.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Top-aligned media
\r\n
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.
\r\n
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.
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Top-aligned media
\\n' +\r\n '
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.
\\n' +\r\n '
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.
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.
\r\n
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.
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Center-aligned media
\\n' +\r\n '
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.
\\n' +\r\n '
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.
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.
\r\n
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.
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
Bottom-aligned media
\\n' +\r\n '
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.
\\n' +\r\n '
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.
Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the order property (to an integer of your choosing).
\r\n\r\n
\r\n
\r\n
\r\n
Media object
\r\n
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.
\r\n
\r\n \r\n
\r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n '
Media object
\\n' +\r\n '
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.
Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <ul> or <ol>, add the .list-unstyled to remove any browser default list styles, and then apply .media to your <li>s. As always, use spacing utilities wherever needed to fine tune.
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
List-based media object
\r\n
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.
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
List-based media object
\r\n
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.
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
List-based media object
\r\n
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.
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
List-based media object
\\n' +\r\n '
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.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
List-based media object
\\n' +\r\n '
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.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
List-based media object
\\n' +\r\n '
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.
\r\n );\r\n};\r\n\r\nexport default MediaList;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport MediaObjectExample from './children/MediaObjectExample';\r\nimport MediaObjectNesting from './children/MediaObjectNesting';\r\nimport MediaObjectAlignment from './children/MediaObjectAlignment';\r\nimport MediaObjectOrder from './children/MediaObjectOrder';\r\nimport MediaList from './children/MediaList';\r\n\r\nconst MediaObject = () => {\r\n return (\r\n
\r\n
Media object
\r\n
Object to construct highly repetitive components like blog comments, tweets, and the like.
\r\n );\r\n }\r\n};\r\n\r\nexport default ModalCustom;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst ModalComponents = () => {\r\n return (\r\n
\r\n
Modal components
\r\n
Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
\r\n\r\n \r\n
\r\n
\r\n
Modal title
\r\n \r\n
\r\n
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Modal title
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\\n' +\r\n '
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\\n' +\r\n '
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\\n' +\r\n '
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\\n' +\r\n '
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\\n' +\r\n '
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\\n' +\r\n '
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.
\r\n\r\n \r\n
\r\n
\r\n
Modal title
\r\n \r\n
\r\n
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.\r\n
\r\n\r\n \r\n
\r\n
\r\n
Modal title
\r\n \r\n
\r\n
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n\r\n \r\n
\r\n
\r\n
Modal title
\r\n \r\n
\r\n
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\r\n
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\r\n
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Modal title
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n ' \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Modal title
\\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
\\n' +\r\n '
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\\n' +\r\n '
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
\\n' +\r\n '
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
\r\n );\r\n}\r\n\r\nexport default MenuModal;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst BaseNav = () => {\r\n return (\r\n
\r\n
Base nav
\r\n
Navigation available in share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
\r\n
The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
\r\n\r\n
\r\n
The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, <ol> if the order of your items is important, or roll your own with a <nav> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.
\r\n );\r\n};\r\n\r\nexport default BaseNav;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst AvailableStyles = () => {\r\n return (\r\n
\r\n
Available styles
\r\n
Change the style of .navs component with modifiers and utilities. Mix and match as needed, or build your own.
\r\n\r\n
\r\n
Horizontal alignment
\r\n
Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.
Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).
Force your .nav’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.
For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.
\r\n );\r\n};\r\n\r\nexport default AvailableStyles;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst WorkingWithFlexUtilities = () => {\r\n return (\r\n
\r\n
Working with flex utilities
\r\n
If you need responsive nav variations, consider using a series of flexbox utilities. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
\r\n );\r\n};\r\n\r\nexport default WorkingWithFlexUtilities;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Nav, NavDropdown } from 'react-bootstrap';\r\n\r\nconst RegardingAccessibility = () => {\r\n return (\r\n
\r\n
Regarding accessibility
\r\n
If you’re using navs to provide a navigation bar, be sure to add a role=\"navigation\" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.
\r\n
Note that navigation bars, even if visually styled as tabs with the .nav-tabs class, should not be given role=\"tablist\", role=\"tab\" or role=\"tabpanel\" attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAIARIA Authoring Practices.
\r\n\r\n
\r\n
Using dropdowns
\r\n
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
\r\n );\r\n};\r\n\r\nexport default RegardingAccessibility;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\nimport { Row, Col, Nav, Tabs, Tab } from 'react-bootstrap';\r\n\r\nconst JavascriptBehavior = () => {\r\n return (\r\n
\r\n
JavaScript behavior
\r\n\r\n
\r\n\r\n \r\n \r\n
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
\r\n \r\n \r\n
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
\r\n \r\n \r\n
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Raw denim you probably haven\\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Food truck fixie locavore, accusamus mcsweeney\\'s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\\'s organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven\\'t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
\r\n \r\n \r\n
Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.
\r\n \r\n \r\n
Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
\r\n \r\n \r\n
Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.
\r\n \r\n \r\n
Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.
\r\n \r\n \r\n
Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.
\\n' +\r\n '
\\n' +\r\n '
\\n' +\r\n '
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default JavascriptBehavior;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport BaseNav from './children/BaseNav';\r\nimport AvailableStyles from './children/AvailableStyles';\r\nimport WorkingWithFlexUtilities from './children/WorkingWithFlexUtilities';\r\nimport RegardingAccessibility from './children/RegardingAccessibility';\r\nimport JavascriptBehavior from './children/JavascriptBehavior';\r\n\r\nconst UINav = () => {\r\n return (\r\n
\r\n
Navs
\r\n
Examples for how to use included navigation components.
\r\n );\r\n};\r\n\r\nexport default UINav;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst PaginationOverview = () => {\r\n return (\r\n
\r\n
Overview
\r\n
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
\r\n
In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label=\"Search results pages\".
\r\n );\r\n};\r\n\r\nexport default WorkingWithIcons;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst DisabledAndActiveStates = () => {\r\n return (\r\n
\r\n
Disabled and active states
\r\n
Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.
\r\n
While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex=\"-1\" on disabled links and use custom JavaScript to fully disable their functionality.
You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
\r\n );\r\n};\r\n\r\nexport default PaginationAlignment;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport PaginationOverview from './children/PaginationOverview';\r\nimport WorkingWithIcons from './children/WorkingWithIcons';\r\nimport DisabledAndActiveStates from './children/DisabledAndActiveStates';\r\nimport PaginationSizing from './children/PaginationSizing';\r\nimport PaginationAlignment from './children/PaginationAlignment';\r\n\r\nconst Pagination = () => {\r\n return (\r\n
\r\n
Pagination
\r\n
Examples for showing pagination to indicate a series of related content exists across multiple pages.
\r\n );\r\n }\r\n}\r\n\r\nexport default Popup;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport { Link } from 'react-scroll';\r\n\r\nconst Scroll = () => {\r\n return (\r\n
\r\n
Scroll
\r\n
Visitors can access a specific section of the page by clicking a link. You need to add an ID attribute to your target element. Then, use that ID in value of href attribute of your <a> tag and add a .scroll-to-id class.
\r\n\r\n
\r\n Scroll to content\r\n
\r\n\r\n Scroll to content'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default Scroll;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\n\r\nconst ScrollBar = () => {\r\n return (\r\n
\r\n
Scrollbar
\r\n
Custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
\r\n\r\n
\r\n
\r\n
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\r\n
\r\n\r\n
\r\n
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\r\n
\r\n
\r\n\r\n \\n' +\r\n '
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '
\\n' +\r\n '
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Use .rounded-lg or .rounded-sm for larger or smaller border-radius.
\r\n\r\n
\r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default BorderRadiusSize;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport Border from './children/Border';\r\nimport BorderColor from './children/BorderColor';\r\nimport BorderRadius from './children/BorderRadius';\r\nimport BorderRadiusSize from './children/BorderRadiusSize';\r\n\r\nconst Borders = () => {\r\n return (\r\n
\r\n
Borders
\r\n
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Borders;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst Background = () => {\r\n return (\r\n
\r\n
Clearfix
\r\n
Quickly and easily clear floated content within a container by adding a clearfix utility.
\r\n
Easily clear floats by adding .clearfixto the parent element. Can also be used as a mixin.
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.
\r\n );\r\n};\r\n\r\nexport default TextColor;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst BackgroundColor = () => {\r\n return (\r\n
\r\n
Background color
\r\n
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.
\r\n\r\n
\r\n
.bg-primary
\r\n
.bg-secondary
\r\n
.bg-success
\r\n
.bg-danger
\r\n
.bg-warning
\r\n
.bg-info
\r\n
.bg-light
\r\n
.bg-dark
\r\n
.bg-white
\r\n
.bg-transparent
\r\n
\r\n\r\n .bg-primary
\\n' +\r\n '
.bg-secondary
\\n' +\r\n '
.bg-success
\\n' +\r\n '
.bg-danger
\\n' +\r\n '
.bg-warning
\\n' +\r\n '
.bg-info
\\n' +\r\n '
.bg-light
\\n' +\r\n '
.bg-dark
\\n' +\r\n '
.bg-white
\\n' +\r\n '
.bg-transparent
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default BackgroundColor;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport TextColor from './children/TextColor';\r\nimport BackgroundColor from './children/BackgroundColor';\r\n\r\nconst Colors = () => {\r\n return (\r\n
\r\n
Colors
\r\n
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
\r\n
As such, the classes are named using the format:
\r\n\r\n
\r\n
.d-{ 'value' } for xs
\r\n
.d-{ 'breakpoint' }-{ 'value' } for sm, md, lg, and xl.
\r\n
\r\n\r\n
Where value is one of:
\r\n\r\n
\r\n
none
\r\n
inline
\r\n
inline-block
\r\n
block
\r\n
table
\r\n
table-cell
\r\n
table-row
\r\n
flex
\r\n
inline-flex
\r\n
\r\n\r\n
The display values can be altered by changing the $displays variable and recompiling the SCSS.
\r\n\r\n
The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default DisplayNotation;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst DisplayExamples = () => {\r\n return (\r\n
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
\r\n
To hide elements simply use the .d-none class or one of the .d-{ 'sm,md,lg,xl' }-none classes for any responsive screen variation.
\r\n
To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.
Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.
\r\n\r\n
\r\n
.d-print-none
\r\n
.d-print-inline
\r\n
.d-print-inline-block
\r\n
.d-print-block
\r\n
.d-print-table
\r\n
.d-print-table-row
\r\n
.d-print-table-cell
\r\n
.d-print-flex
\r\n
.d-print-inline-flex
\r\n
\r\n\r\n
The print and display classes can be combined.
\r\n\r\n
\r\n
Screen Only (Hide on print only)
\r\n
Print Only (Hide on screen only)
\r\n
Hide up to large on screen, but always show on print
\r\n
\r\n\r\n Screen Only (Hide on print only)
\\n' +\r\n '
Print Only (Hide on screen only)
\\n' +\r\n '
Hide up to large on screen, but always show on print
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default DisplayInPrint;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport DisplayNotation from './children/DisplayNotation';\r\nimport DisplayExamples from './children/DisplayExamples';\r\nimport HiddingElements from './children/HiddingElements';\r\nimport DisplayInPrint from './children/DisplayInPrint';\r\n\r\nconst Display = () => {\r\n return (\r\n
\r\n
Display
\r\n
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
\r\n
Pro-Tip! You don’t need to include frameborder=\"0\" in your <iframe>s as we override that for you.
\r\n
\r\n );\r\n};\r\n\r\nexport default EmbedAbout;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst EmbedExample = () => {\r\n return (\r\n
\r\n
Example
\r\n
Wrap any embed like an <iframe> in a parent element with .embed-responsive and an aspect ratio. The .embed-responsive-item isn’t strictly required, but we encourage it.
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
\r\n\r\n
\r\n
I'm a flexbox container!
\r\n
\r\n\r\n \r\n
<div className="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
\r\n \r\n\r\n
\r\n
I'm an inline flexbox container!
\r\n
\r\n\r\n \r\n
<div className="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
\r\n \r\n\r\n
Responsive variations also exist for .d-flex and .d-inline-flex.\r\n
\r\n\r\n
\r\n
.d-flex
\r\n
.d-inline-flex
\r\n
.d-sm-flex
\r\n
.d-sm-inline-flex
\r\n
.d-md-flex
\r\n
.d-md-inline-flex
\r\n
.d-lg-flex
\r\n
.d-lg-inline-flex
\r\n
.d-xl-flex
\r\n
.d-xl-inline-flex
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default EnableFlexBehaviors;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst Direction = () => {\r\n return (\r\n
\r\n
Direction
\r\n
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
\r\n
Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.
Responsive variations also exist for flex-direction.
\r\n\r\n
\r\n
.flex-row
\r\n
.flex-row-reverse
\r\n
.flex-column
\r\n
.flex-column-reverse
\r\n
.flex-sm-row
\r\n
.flex-sm-row-reverse
\r\n
.flex-sm-column
\r\n
.flex-sm-column-reverse
\r\n
.flex-md-row
\r\n
.flex-md-row-reverse
\r\n
.flex-md-column
\r\n
.flex-md-column-reverse
\r\n
.flex-lg-row
\r\n
.flex-lg-row-reverse
\r\n
.flex-lg-column
\r\n
.flex-lg-column-reverse
\r\n
.flex-xl-row
\r\n
.flex-xl-row-reverse
\r\n
.flex-xl-column
\r\n
.flex-xl-column-reverse
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Direction;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst JustifyContent = () => {\r\n return (\r\n
\r\n
Justify content
\r\n
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.
Responsive variations also exist for justify-content.\r\n
\r\n\r\n
\r\n
.justify-content-start
\r\n
.justify-content-end
\r\n
.justify-content-center
\r\n
.justify-content-between
\r\n
.justify-content-around
\r\n
.justify-content-sm-start
\r\n
.justify-content-sm-end
\r\n
.justify-content-sm-center
\r\n
.justify-content-sm-between
\r\n
.justify-content-sm-around
\r\n
.justify-content-md-start
\r\n
.justify-content-md-end
\r\n
.justify-content-md-center
\r\n
.justify-content-md-between
\r\n
.justify-content-md-around
\r\n
.justify-content-lg-start
\r\n
.justify-content-lg-end
\r\n
.justify-content-lg-center
\r\n
.justify-content-lg-between
\r\n
.justify-content-lg-around
\r\n
.justify-content-xl-start
\r\n
.justify-content-xl-end
\r\n
.justify-content-xl-center
\r\n
.justify-content-xl-between
\r\n
.justify-content-xl-around
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default JustifyContent;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst AlignItems = () => {\r\n return (\r\n
\r\n
Align items
\r\n
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).
Responsive variations also exist for align-items.\r\n
\r\n\r\n
\r\n
.align-items-start
\r\n
.align-items-end
\r\n
.align-items-center
\r\n
.align-items-baseline
\r\n
.align-items-stretch
\r\n
.align-items-sm-start
\r\n
.align-items-sm-end
\r\n
.align-items-sm-center
\r\n
.align-items-sm-baseline
\r\n
.align-items-sm-stretch
\r\n
.align-items-md-start
\r\n
.align-items-md-end
\r\n
.align-items-md-center
\r\n
.align-items-md-baseline
\r\n
.align-items-md-stretch
\r\n
.align-items-lg-start
\r\n
.align-items-lg-end
\r\n
.align-items-lg-center
\r\n
.align-items-lg-baseline
\r\n
.align-items-lg-stretch
\r\n
.align-items-xl-start
\r\n
.align-items-xl-end
\r\n
.align-items-xl-center
\r\n
.align-items-xl-baseline
\r\n
.align-items-xl-stretch
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AlignItems;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst AlignSelf = () => {\r\n return (\r\n
\r\n
Align self
\r\n
Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).\r\n
Responsive variations also exist for align-self.\r\n
\r\n\r\n
\r\n
.align-self-start
\r\n
.align-self-end
\r\n
.align-self-center
\r\n
.align-self-baseline
\r\n
.align-self-stretch
\r\n
.align-self-sm-start
\r\n
.align-self-sm-end
\r\n
.align-self-sm-center
\r\n
.align-self-sm-baseline
\r\n
.align-self-sm-stretch
\r\n
.align-self-md-start
\r\n
.align-self-md-end
\r\n
.align-self-md-center
\r\n
.align-self-md-baseline
\r\n
.align-self-md-stretch
\r\n
.align-self-lg-start
\r\n
.align-self-lg-end
\r\n
.align-self-lg-center
\r\n
.align-self-lg-baseline
\r\n
.align-self-lg-stretch
\r\n
.align-self-xl-start
\r\n
.align-self-xl-end
\r\n
.align-self-xl-center
\r\n
.align-self-xl-baseline
\r\n
.align-self-xl-stretch
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AlignSelf;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst Fill = () => {\r\n return (\r\n
\r\n
Fill
\r\n
Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
\r\n \r\n );\r\n};\r\n\r\nexport default Fill;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst GrowAndShrink = () => {\r\n return (\r\n
\r\n
Grow and shrink
\r\n
Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the .flex-grow-1 elements uses all available space it can, while allowing the remaining two flex items their necessary space.
Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with .flex-shrink-1 is forced to wrap it’s contents to a new line, “shrinking” to allow more space for the previous flex item with .w-100.
Responsive variations also exist for flex-grow and flex-shrink.
\r\n\r\n
\r\n
.flex-{ 'grow | shrink' }-0
\r\n
.flex-{ 'grow | shrink' }-1
\r\n
.flex-sm-{ 'grow | shrink' }-0
\r\n
.flex-sm-{ 'grow | shrink' }-1
\r\n
.flex-md-{ 'grow | shrink' }-0
\r\n
.flex-md-{ 'grow | shrink' }-1
\r\n
.flex-lg-{ 'grow | shrink' }-0
\r\n
.flex-lg-{ 'grow | shrink' }-1
\r\n
.flex-xl-{ 'grow | shrink' }-0
\r\n
.flex-xl-{ 'grow | shrink' }-1
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default GrowAndShrink;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst AutoMargins = () => {\r\n return (\r\n
\r\n
Auto margins
\r\n
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).
\r\n
Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default justify-content value.See this StackOverflow answer for more details.
Vertically move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.\r\n
Responsive variations also exist for flex-wrap.\r\n
\r\n\r\n
\r\n
.flex-nowrap
\r\n
.flex-wrap
\r\n
.flex-wrap-reverse
\r\n
.flex-sm-nowrap
\r\n
.flex-sm-wrap
\r\n
.flex-sm-wrap-reverse
\r\n
.flex-md-nowrap
\r\n
.flex-md-wrap
\r\n
.flex-md-wrap-reverse
\r\n
.flex-lg-nowrap
\r\n
.flex-lg-wrap
\r\n
.flex-lg-wrap-reverse
\r\n
.flex-xl-nowrap
\r\n
.flex-xl-wrap
\r\n
.flex-xl-wrap-reverse
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Wrap;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst Order = () => {\r\n return (\r\n
\r\n
Order
\r\n
Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.
\r\n \r\n );\r\n};\r\n\r\nexport default Order;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst AlignContent = () => {\r\n return (\r\n
\r\n
Align content
\r\n
Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.
\r\n\r\n
Heads up! This property has no effect on single rows of flex items.
Responsive variations also exist for align-content.
\r\n\r\n
\r\n
.align-content-start
\r\n
.align-content-end
\r\n
.align-content-center
\r\n
.align-content-around
\r\n
.align-content-stretch
\r\n
.align-content-sm-start
\r\n
.align-content-sm-end
\r\n
.align-content-sm-center
\r\n
.align-content-sm-around
\r\n
.align-content-sm-stretch
\r\n
.align-content-md-start
\r\n
.align-content-md-end
\r\n
.align-content-md-center
\r\n
.align-content-md-around
\r\n
.align-content-md-stretch
\r\n
.align-content-lg-start
\r\n
.align-content-lg-end
\r\n
.align-content-lg-center
\r\n
.align-content-lg-around
\r\n
.align-content-lg-stretch
\r\n
.align-content-xl-start
\r\n
.align-content-xl-end
\r\n
.align-content-xl-center
\r\n
.align-content-xl-around
\r\n
.align-content-xl-stretch
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AlignContent;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport EnableFlexBehaviors from './children/EnableFlexBehaviors';\r\nimport Direction from './children/Direction';\r\nimport JustifyContent from './children/JustifyContent';\r\nimport AlignItems from './children/AlignItems';\r\nimport AlignSelf from './children/AlignSelf';\r\nimport Fill from './children/Fill';\r\nimport GrowAndShrink from './children/GrowAndShrink';\r\nimport AutoMargins from './children/AutoMargins';\r\nimport WithAlignItems from './children/WithAlignItems';\r\nimport Wrap from './children/Wrap';\r\nimport Order from './children/Order';\r\nimport AlignContent from './children/AlignContent';\r\n\r\nconst Flex = () => {\r\n return (\r\n
\r\n
Flex
\r\n
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
\r\n \r\n );\r\n};\r\n\r\nexport default FloatResponsive;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport FloatClasses from './children/FloatClasses';\r\nimport FloatResponsive from './children/FloatResponsive';\r\n\r\nconst Float = () => {\r\n return (\r\n
\r\n
Float
\r\n
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
\r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Float;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst Overflow = () => {\r\n return (\r\n
\r\n
Overflow
\r\n
Use these shorthand utilities for quickly configuring how content overflows an element.
\r\n
Barebones overflow functionality is provided for two values by default, and they are not responsive.
\r\n\r\n
\r\n
\r\n This is an example of using .overflow-auto on an element with set width and height\r\n dimensions. By design, this content will vertically scroll.\r\n
\r\n
\r\n This is an example of using .overflow-hidden on an element with set width and height\r\n dimensions.\r\n
Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS’s position: sticky, which isn’t fully supported in all browsers.
\r\n
IE11 and IE10 will render position: sticky as position: relative. As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that can render it properly.
\r\n\r\n \r\n
<div className="sticky-top">...</div>
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default StickyTop;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport CommonValues from './children/CommonValues';\r\nimport FixedTop from './children/FixedTop';\r\nimport FixedBottom from './children/FixedBottom';\r\nimport StickyTop from './children/StickyTop';\r\n\r\nconst Position = () => {\r\n return (\r\n
\r\n
Position
\r\n
Use these shorthand utilities for quickly configuring the position of an element.
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Position;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst Shadows = () => {\r\n return (\r\n
\r\n
Shadows
\r\n
Add or remove shadows to elements with box-shadow utilities.
\r\n\r\n
\r\n
Examples
\r\n
While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).
You can also use utilities to set the width and height relative to the viewport.
\r\n\r\n Min-width 100vw
\\n' +\r\n '
Min-height 100vh
\\n' +\r\n '
Width 100vw
\\n' +\r\n '
Height 100vh
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default RelativeToTheViewport;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport RelativeToTheParent from './children/RelativeToTheParent';\r\nimport RelativeToTheViewport from './children/RelativeToTheViewport';\r\n\r\nconst Sizing = () => {\r\n return (\r\n
\r\n
Sizing
\r\n
Easily make an element as wide or as tall with our width and height utilities.
\r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Sizing;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst HorizontalCentering = () => {\r\n return (\r\n
\r\n
Horizontal centering
\r\n
Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.
In CSS, margin properties can utilize negative values (padding cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1, 2, 3, 4, 5). These utilities are ideal for customizing grid column gutters across breakpoints.
\r\n
The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here’s an example class that’s the opposite of .mt-1:
\r\n\r\n\r\n \r\n\r\n
Here’s an example of customizing the Bootstrap grid at the medium (md) breakpoint and above. We’ve increased the .col padding with .px-md-5 and then counteracted that with .mx-md-n5 on the parent .row.
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n\r\n \r\n\r\n \r\n );\r\n};\r\n\r\nexport default ContentExamples;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport HorizontalCentering from './children/HorizontalCentering';\r\nimport NegativeMargin from './children/NegativeMargin';\r\nimport ContentExamples from './children/ContentExamples';\r\n\r\nconst Spacing = () => {\r\n return (\r\n
\r\n
Spacing
\r\n
Wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
\r\n\r\n
How it works
\r\n
Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.
\r\n\r\n
Notation
\r\n
Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
\r\n
The classes are named using the format { 'property' }{ 'sides' }-{ 'size' } for xs and { 'property' }{ 'sides' }-{ 'breakpoint' }-{ 'size' } for sm, md, lg, and xl.
\r\n
Where property is one of:
\r\n\r\n
\r\n
m - for classes that set margin
\r\n
p - for classes that set padding
\r\n
\r\n\r\n
Where sides is one of:\r\n
\r\n\r\n
\r\n
t - for classes that set margin-top or padding-top
\r\n
b - for classes that set margin-bottom or padding-bottom
\r\n
l - for classes that set margin-left or padding-left
\r\n
r - for classes that set margin-right or padding-right
\r\n
x - for classes that set both *-left and *-right
\r\n
y - for classes that set both *-top and *-bottom
\r\n
blank - for classes that set a margin or padding on all 4 sides of the element
\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Spacing;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst StrechedLink = () => {\r\n return (\r\n
\r\n
Stretched link
\r\n
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
\r\n\r\n
Add .stretched-link to a link to make its containing block clickable via a ::after pseudo element. In most cases, this means that an element with position: relative; that contains a link with the .stretched-link class is clickable.
\r\n
Cards have position: relative by default in Bootstrap, so in this case you can safely add the .stretched-link class to a link in the card without any other HTML changes.
\r\n
Multiple links and tap targets are not recommended with stretched links. However, some position and z-index styles can help should this be required.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Card with stretched link
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
Media objects do not have position: relative by default, so we need to add the .position-relative here to prevent the link from stretching outside the media object.
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Media with stretched link
\r\n
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.
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.
Columns are position: relative by default, so clickable columns only require the .stretched-link class on a link. However, stretching a link over an entire .row requires .position-static on the column and .position-relative on the row.
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
Columns with stretched link
\r\n
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.
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.
If the stretched link doesn’t seem to work, thecontaining block will probably be the cause. The following CSS properties will make an element the containing block:
\r\n\r\n
\r\n
A position value other than static
\r\n
A transform or perspective value other than none
\r\n
A will-change value of transform or perspective
\r\n
A filter value other than none or a will-change value of filter (only works on Firefox)
\r\n
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Card with stretched links
\r\n
Some quick example text to build on the card title and make up the bulk of the card's content.
Easily realign text to components with text alignment classes.
\r\n\r\n
\r\n
Left aligned text on all viewport sizes.
\r\n
Center aligned text on all viewport sizes.
\r\n
Right aligned text on all viewport sizes.
\r\n\r\n
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
\r\n
\r\n\r\n Left aligned text on all viewport sizes.\\n' +\r\n '
Center aligned text on all viewport sizes.
\\n' +\r\n '
Right aligned text on all viewport sizes.
\\n' +\r\n '\\n' +\r\n '
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
Prevent text from wrapping with a .text-nowrap class.
\r\n\r\n
\r\n
\r\n This text should overflow the parent.\r\n
\r\n
\r\n\r\n \\n' +\r\n ' This text should overflow the parent.\\n' +\r\n ''\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n\r\n
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.
\r\n\r\n
\r\n
\r\n
\r\n Praeterea iter est quasdam res quas ex communi.\r\n
\r\n
\r\n\r\n \r\n Praeterea iter est quasdam res quas ex communi.\r\n \r\n
\r\n\r\n \\n' +\r\n '
\\n' +\r\n ' Praeterea iter est quasdam res quas ex communi.\\n' +\r\n '
\\n' +\r\n '\\n' +\r\n '\\n' +\r\n '\\n' +\r\n ' Praeterea iter est quasdam res quas ex communi.\\n' +\r\n ''\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default TextWrappingAndOverflow;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../../components/prsimjs/Prismjs';\r\n\r\nconst WordBreak = () => {\r\n return (\r\n
\r\n
Word break
\r\n
Prevent long strings of text from breaking your components’ layout by using .text-break to set overflow-wrap: break-word (and word-break: break-word for IE & Edge compatibility).
\r\n );\r\n};\r\n\r\nexport default TextDecoration;\r\n","import React from 'react';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\nimport TextAlignment from './children/TextAlignment';\r\nimport TextWrappingAndOverflow from './children/TextWrappingAndOverflow';\r\nimport WordBreak from './children/WordBreak';\r\nimport TextTransform from './children/TextTransform';\r\nimport FontWeightAndItalics from './children/FontWeightAndItalics';\r\nimport Monospace from './children/Monospace';\r\nimport ResetColor from './children/ResetColor';\r\nimport TextDecoration from './children/TextDecoration';\r\n\r\nconst Text = () => {\r\n return (\r\n
\r\n
Text
\r\n
Examples for common text utilities to control alignment, wrapping, weight, and more.
\r\n );\r\n};\r\n\r\nexport default Text;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst VerticalAlignment = () => {\r\n return (\r\n
\r\n
Vertical alignment
\r\n
Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
\r\n\r\n
Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
\r\n\r\n
Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
\r\n );\r\n};\r\n\r\nexport default VerticalAlignment;\r\n","import React from 'react';\r\nimport { PrismCode } from '../../../../components/prsimjs/Prismjs';\r\nimport MoreExamples from '../../blocks/MoreExamples';\r\n\r\nconst Visibility = () => {\r\n return (\r\n
\r\n
Visibility
\r\n
Control the visibility, without modifying the display, of elements with visibility utilities.
\r\n\r\n
Set the visibility of elements with our visibility utilities. These utility classes do not modify the display value at all and do not affect layout – .invisible elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.
\r\n\r\n
Apply .visible or .invisible as needed.
\r\n\r\n ...
\\n' +\r\n '
...
'\r\n }\r\n language=\"html\"\r\n plugins={ [\"line-numbers\"] }\r\n />\r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Visibility;\r\n","import React from 'react';\r\nimport { Link } from 'react-scroll/modules';\r\n\r\nconst Sidebar = () => {\r\n window.onscroll = function() {\r\n var rect = document.querySelector( \"#aside-sticky\" ).getBoundingClientRect();\r\n var offsetTop = rect.top + window.scrollY;\r\n\r\n var position = window.pageYOffset - offsetTop;\r\n var parentwidth = window.getComputedStyle( document.getElementById( \"aside-sticky\" ), null );\r\n var parentContainerWidth = parentwidth.getPropertyValue( \"width\" );\r\n var parentPaddingLeft = parentwidth.getPropertyValue( \"padding-left\" );\r\n var parentPaddingRight = parentwidth.getPropertyValue( \"padding-right\" );\r\n\r\n var parentContainerWidthSplit = parentContainerWidth.split( \"px\" );\r\n var parentPaddingLeftSplit = parentPaddingLeft.split( \"px\" );\r\n var parentPaddingRightSplit = parentPaddingRight.split( \"px\" );\r\n\r\n var parentWidthAfterCalc = parentContainerWidthSplit[0] - parentPaddingLeftSplit[0] - parentPaddingRightSplit[0];\r\n\r\n if ( position > 0 ) {\r\n document.getElementById( 'aside' ).classList.add( 'sticky-fixed-lg' );\r\n document.getElementById( 'aside' ).style.width = parentWidthAfterCalc + 'px';\r\n } else {\r\n document.getElementById( 'aside' ).classList.remove( 'sticky-fixed-lg' );\r\n document.getElementById( 'aside' ).style.width = null;\r\n }\r\n };\r\n\r\n window.onresize = function() {\r\n var rect = document.querySelector( \"#aside-sticky\" ).getBoundingClientRect();\r\n var offsetTop = rect.top + window.scrollY;\r\n\r\n var position = window.pageYOffset - offsetTop;\r\n var parentwidth = window.getComputedStyle( document.getElementById( \"aside-sticky\" ), null );\r\n var parentContainerWidth = parentwidth.getPropertyValue( \"width\" );\r\n var parentPaddingLeft = parentwidth.getPropertyValue( \"padding-left\" );\r\n var parentPaddingRight = parentwidth.getPropertyValue( \"padding-right\" );\r\n\r\n var parentContainerWidthSplit = parentContainerWidth.split( \"px\" );\r\n var parentPaddingLeftSplit = parentPaddingLeft.split( \"px\" );\r\n var parentPaddingRightSplit = parentPaddingRight.split( \"px\" );\r\n\r\n var parentWidthAfterCalc = parentContainerWidthSplit[0] - parentPaddingLeftSplit[0] - parentPaddingRightSplit[0];\r\n\r\n if ( position > 0 ) {\r\n document.getElementById( 'aside' ).classList.add( 'sticky-fixed-lg' );\r\n document.getElementById( 'aside' ).style.width = parentWidthAfterCalc + 'px';\r\n } else {\r\n document.getElementById( 'aside' ).classList.remove( 'sticky-fixed-lg' );\r\n document.getElementById( 'aside' ).style.width = null;\r\n }\r\n };\r\n\r\n return (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Sidebar;\r\n","import React, { Fragment } from 'react';\r\nimport MetaTags from 'react-meta-tags';\r\n\r\nimport Loading from '../blocks/loading/Loading';\r\nimport HeaderUI from '../blocks/header/HeaderUI';\r\nimport Footer from '../blocks/footer/Footer';\r\n\r\nimport PageTitleUserInterface from '../blocks/page-title/PageTitleUserInterface';\r\n\r\n// Content\r\nimport Typography from '../blocks/ui/content/typography/Typography';\r\nimport Icons from '../blocks/ui/content/icons/Icons';\r\nimport Images from '../blocks/ui/content/images/Images';\r\nimport Tables from '../blocks/ui/content/tables/Tables';\r\nimport Figures from '../blocks/ui/content/figures/Figures';\r\n\r\n// Components\r\nimport Alerts from '../blocks/ui/components/alerts/Alerts';\r\nimport Badge from '../blocks/ui/components/badge/Badge';\r\nimport Buttons from '../blocks/ui/components/buttons/Buttons';\r\nimport ButtonGroup from '../blocks/ui/components/button-group/ButtonGroup';\r\nimport Card from '../blocks/ui/components/card/Card';\r\nimport Slider from '../blocks/ui/components/slider/Slider';\r\nimport Collapse from '../blocks/ui/components/collapse/Collapse';\r\nimport Dropdowns from '../blocks/ui/components/dropdowns/Dropdowns';\r\nimport Forms from '../blocks/ui/components/forms/Forms';\r\nimport InputGroup from '../blocks/ui/components/input-group/InputGroup';\r\nimport ListGroup from '../blocks/ui/components/list-group/ListGroup';\r\nimport MediaObject from '../blocks/ui/components/media-object/MediaObject';\r\nimport Modal from '../blocks/ui/components/modal/Modal';\r\nimport UINav from '../blocks/ui/components/navs/Navs';\r\nimport Pagination from '../blocks/ui/components/pagination/Pagination';\r\nimport PopUp from '../blocks/ui/components/pop-up/PopUp';\r\nimport Scroll from '../blocks/ui/components/scroll/Scroll';\r\nimport ScrollBar from '../blocks/ui/components/scroll-bar/ScrollBar';\r\n\r\n// Utilities\r\nimport Borders from '../blocks/ui/utilities/borders/Borders';\r\nimport Clearfix from '../blocks/ui/utilities/clearfix/Clearfix';\r\nimport Colors from '../blocks/ui/utilities/colors/Colors';\r\nimport Display from '../blocks/ui/utilities/display/Display';\r\nimport Embed from '../blocks/ui/utilities/embed/Embed';\r\nimport Flex from '../blocks/ui/utilities/flex/Flex';\r\nimport Float from '../blocks/ui/utilities/float/Float';\r\nimport Overflow from '../blocks/ui/utilities/overflow/Overflow';\r\nimport Position from '../blocks/ui/utilities/position/Position';\r\nimport Shadows from '../blocks/ui/utilities/shadows/Shadows';\r\nimport Sizing from '../blocks/ui/utilities/sizing/Sizing';\r\nimport Spacing from '../blocks/ui/utilities/spacing/Spacing';\r\nimport StrechedLink from '../blocks/ui/utilities/streched-link/StrechedLink';\r\nimport Text from '../blocks/ui/utilities/text/Text';\r\nimport VerticalAlignment from '../blocks/ui/utilities/vertical-alignment/VerticalAlignment';\r\nimport Visibility from '../blocks/ui/utilities/visibility/Visibility';\r\n\r\n// Sidebar\r\nimport Sidebar from '../blocks/ui/sidebar/Sidebar';\r\n\r\nconst UserInterface = () => {\r\n document.body.classList.add( 'page' );\r\n document.body.classList.add( 'ui' );\r\n\r\n return (\r\n \r\n \r\n \r\n UI | Mykery - Beauty Salon React JS Template\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n\r\n
\r\n
Mykery project is created using Bootstrap 4 Framework and all of the examples below are based on it. Also, Mykery includes custom classes, plugins and scripts which are also based on our experience of Bootstrap 4 Framework.
\r\n );\r\n }\r\n}\r\n\r\nexport default OpenPopup;\r\n","import React from 'react';\r\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\r\nimport Home from './pages/Home';\r\nimport About from './pages/About';\r\nimport Contacts from './pages/Contacts';\r\nimport News from './pages/News';\r\nimport NewsSinglePost from './pages/NewsSinglePost';\r\nimport Gallery from './pages/Gallery';\r\nimport SearchResults from './pages/SearchResults';\r\nimport Services from './pages/Services';\r\nimport ServicesInside from './pages/ServicesInside';\r\nimport page404 from './pages/404';\r\nimport UserInterface from './pages/UserInterface';\r\nimport ServiceBooking from './pages/ServiceBooking';\r\n\r\nfunction App() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/**/}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.0/8 are considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport function register( config ) {\r\n if ( process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator ) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL( process.env.PUBLIC_URL, window.location.href );\r\n\r\n if ( publicUrl.origin !== window.location.origin ) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener( 'load', () => {\r\n const swUrl = `${ process.env.PUBLIC_URL }/service-worker.js`;\r\n\r\n if ( isLocalhost ) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker( swUrl, config );\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then( () => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n );\r\n } );\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW( swUrl, config );\r\n }\r\n } );\r\n }\r\n}\r\n\r\nfunction registerValidSW( swUrl, config ) {\r\n navigator.serviceWorker.register( swUrl ).then( registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n\r\n if ( installingWorker == null ) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if ( installingWorker.state === 'installed' ) {\r\n if ( navigator.serviceWorker.controller ) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n );\r\n\r\n // Execute callback\r\n if ( config && config.onUpdate ) {\r\n config.onUpdate( registration );\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log( 'Content is cached for offline use.' );\r\n\r\n // Execute callback\r\n if ( config && config.onSuccess ) {\r\n config.onSuccess( registration );\r\n }\r\n }\r\n }\r\n };\r\n };\r\n } ).catch( error => {\r\n console.error( 'Error during service worker registration:', error );\r\n } );\r\n}\r\n\r\nfunction checkValidServiceWorker( swUrl, config ) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch( swUrl, {\r\n headers: { 'Service-Worker': 'script' },\r\n } ).then( response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get( 'content-type' );\r\n\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf( 'javascript' ) === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then( registration => {\r\n registration.unregister().then( () => {\r\n window.location.reload();\r\n } );\r\n } );\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW( swUrl, config );\r\n }\r\n } ).catch( () => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n } );\r\n}\r\n\r\nexport function unregister() {\r\n if ( 'serviceWorker' in navigator ) {\r\n navigator.serviceWorker.ready.then( registration => {\r\n registration.unregister();\r\n } ).catch( error => {\r\n console.error( error.message );\r\n } );\r\n }\r\n}\r\n","import i18n from 'i18next';\r\nimport { initReactI18next } from 'react-i18next';\r\nimport Backend from 'i18next-http-backend';\r\nimport LanguageDetector from 'i18next-browser-languagedetector';\r\nimport Cache from 'i18next-localstorage-cache';\r\n\r\n\r\ni18n.use(Cache).use(Backend).use(LanguageDetector).use(initReactI18next).init({\r\n fallbackLng: 'en',\r\n whitelist: ['en', 'ee', 'ua', 'ru'],\r\n debug: true,\r\n detection: {\r\n order: ['cookie', 'localStorage', 'navigator'],\r\n caches: ['localStorage', 'cookie']\r\n },\r\n cache: {\r\n enabled: true,\r\n expirationTime: 7,\r\n version: '1.5',\r\n types: ['localStorage', 'cookie'],\r\n keySeparator: '.',\r\n checkOnLoad: true,\r\n reloadOnRestart: false\r\n },\r\n interpolation: {\r\n escapeValue: false\r\n }\r\n});\r\n\r\nexport default i18n;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport './assets/sass/style.scss';\r\nimport App from './App';\r\nimport * as serviceWorker from './serviceWorker';\r\nimport './i18n';\r\nimport { Suspense } from 'react';\r\nimport Loading from './blocks/loading/Loading';\r\n\r\nReactDOM.render( }>, document.getElementById( 'root' ) );\r\n\r\n// If you want your app to work offline and load faster, you can change\r\n// unregister() to register() below. Note this comes with some pitfalls.\r\n// Learn more about service workers: https://bit.ly/CRA-PWA\r\nserviceWorker.unregister();\r\n"],"sourceRoot":""}
![\"Logo\"](\"assets/img/logo/logo_custom_dark.png\"){kind=logo}
*/}\r\n }){kind=logo}
*/}\r\n {/* ![\"Face](\"assets/img/demo/02_img.jpg\")
\r\n ![\"Hair](\"assets/img/demo/03_img.jpg\")
\r\n ![\"Hands](\"assets/img/demo/04_img.jpg\")
\r\n ![\"Haircuts](\"assets/img/demo/05_img.jpg\")
\r\n ![\"Beauty](\"assets/img/demo/08_img.jpg\")
\r\n ![\"Icon\"](\"assets/img/demo/32_img.png\")
\r\n ![\"Tommy](\"assets/img/demo/21_img.png\")
\r\n ![\"Arthur](\"assets/img/demo/22_img.png\")
\r\n ![\"Rosie](\"assets/img/demo/23_img.png\")
\r\n ![\"About](\"assets/img/demo/17_img.png\")
\r\n ![\"Rosie](\"assets/img/demo/18_img.jpg\")
\r\n ![\"Tom](\"assets/img/demo/19_img.jpg\")
\r\n ![\"Lana](\"assets/img/demo/20_img.jpg\")
\r\n ![\"Balkan\"](\"assets/img/demo/24_img.png\")
\r\n ![\"Adveits\"](\"assets/img/demo/25_img.png\")
\r\n ![\"Swiger\"](\"assets/img/demo/26_img.png\")
\r\n ![\"The](\"assets/img/demo/27_img.png\")
\r\n ![\"Women](\"assets/img/demo/09_img.jpg\")
\r\n ![\"Best](\"assets/img/demo/10_img.jpg\")
\r\n ![\"Women](\"assets/img/demo/11_img.jpg\")
\r\n ![\"Rosie](\"assets/img/demo/31_img.jpg\")
\r\n ![\"Best](\"assets/img/demo/15_img.jpg\")
\r\n ![\"Hair](\"assets/img/demo/12_img.jpg\")
\r\n