Skip to main content

- 2
- 3

#### Aigars Silkalns

#### Basic Modal

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

##### Modal title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam, repudiandae modi quae adipisci sunt, quaerat nihil est mollitia delectus consequuntur voluptate nesciunt veniam impedit, odio ducimus provident dolore quia obcaecati.

#### Scrolling Long Modal

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.

##### Modal title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit eligendi unde, dolore vero ullam repudiandae molestias ratione suscipit nobis quas repellat asperiores ab? Atque sequi in deserunt accusamus error ad rerum delectus cupiditate, nesciunt odit! Recusandae vitae est, veritatis sit culpa aperiam omnis! Nesciunt magni est hic, quis facilis iure fugit voluptatibus laborum suscipit accusamus. Adipisci, dolorem similique excepturi quaerat deleniti voluptate possimus ullam exercitationem aliquam perferendis, eaque dolorum nobis sed quidem! Eos, nihil eveniet itaque, deserunt ea impedit cumque eligendi tempore sint, et laborum! Quaerat beatae necessitatibus ad! Id natus, incidunt possimus corporis harum in, quis est provident nisi quaerat impedit! Voluptate debitis laborum quod reiciendis at quisquam enim deleniti, impedit, adipisci praesentium quaerat aut molestiae tenetur, amet iusto autem necessitatibus aliquam tempora cumque placeat sed ratione minima. Modi, ipsum temporibus distinctio quidem magnam, totam, expedita voluptates ducimus libero nesciunt corrupti? Sit officiis nam itaque ducimus laudantium commodi laboriosam consequuntur, natus cum assumenda nisi veritatis magnam reiciendis voluptatibus provident voluptates officia odit necessitatibus libero iure eaque, error praesentium? Neque deserunt fugiat consequuntur explicabo optio commodi quis quia tempore, ut quidem repellendus nobis eligendi quos aperiam assumenda dignissimos praesentium quasi eveniet! Sit adipisci nesciunt veritatis harum mollitia, in quos quam, atque quo aliquam delectus aspernatur perferendis quidem animi quia magni voluptatum commodi eligendi obcaecati pariatur esse dicta deleniti fugit. Id, ad incidunt, repudiandae consequuntur possimus sit expedita soluta ratione quidem nisi officiis itaque atque impedit ullam voluptas perspiciatis maiores repellat quia culpa. Ipsum nisi eos assumenda? Omnis ipsum officiis maxime quo voluptate doloremque numquam tenetur quisquam, corrupti odio porro, exercitationem nemo voluptatum quos necessitatibus. Laudantium animi quod quasi, ratione a facere vel placeat sint necessitatibus neque cumque aspernatur aliquam accusamus ipsam dolore iste. Harum beatae ea, sunt quidem pariatur eaque quos exercitationem vitae consequatur iusto minima illo provident et dolorum culpa tenetur. Eveniet magni error quisquam quia quo debitis temporibus nemo corporis amet ex voluptatum delectus, excepturi commodi. Doloremque, voluptates ducimus alias, asperiores dolorum vitae fugit harum illum accusantium eos quidem libero fugiat sapiente eum earum aliquam facilis corrupti ullam obcaecati et sed quo nobis! Commodi, explicabo perspiciatis modi et quam, suscipit enim dolorem accusantium assumenda, harum ex doloremque. Error fuga eos accusantium consectetur perferendis mollitia unde beatae eaque reiciendis ipsam vel minus fugit quis amet a, sapiente, voluptatem natus delectus? Dicta ad totam voluptas eveniet, laboriosam officia aut, quo dolorum esse laudantium rerum. Quam officiis quibusdam maiores, obcaecati sit sint id dignissimos rerum tempora facilis! Expedita assumenda hic odit, autem alias fugiat voluptas consequuntur. Velit, illum numquam? Velit asperiores accusamus magnam minus quo ex, sunt in molestias alias suscipit! Beatae, eos. Ipsa explicabo possimus repellendus saepe placeat veritatis libero, recusandae quisquam nobis amet assumenda asperiores eveniet inventore totam repellat pariatur ea! Voluptate numquam illo non sed ratione aliquam sequi debitis, ipsam, esse aut tempore quod quam. Quos doloremque, asperiores alias facere dolore, quidem impedit atque odio, dolor adipisci explicabo harum. Pariatur harum enim, quasi excepturi amet architecto maiores illo rem, hic eveniet unde, autem officia id consequuntur atque tempore repellat magnam incidunt nulla. Modi eum commodi ex corporis delectus laudantium nihil. Esse odio aut magni vero autem consectetur repellat quisquam perferendis placeat sint, saepe praesentium nemo deleniti corrupti aperiam totam voluptate libero omnis. Harum placeat nostrum officia odio excepturi doloribus exercitationem totam quibusdam vero quis molestias possimus, optio iusto pariatur. In ea unde doloribus, consequatur odit rerum sunt accusamus quam molestiae necessitatibus, ratione distinctio harum minus. Maxime numquam aperiam inventore totam officia atque, quod asperiores modi ipsum quidem magnam dignissimos laborum nemo in maiores veritatis iste aliquid, voluptas possimus corporis dolor vel cumque debitis. Officiis eaque debitis quia, in ut nisi commodi, quasi fugit blanditiis earum atque asperiores dolorem quaerat temporibus, sunt officia dignissimos sit natus a dolorum non porro repellendus.

#### Vertically centered

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

##### Modal title

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius voluptates explicabo natus nobis, aperiam placeat aliquid nisi ut exercitationem dolor quisquam nam tempora voluptatem. Unde dignissimos est aliquid quidem porro dolorum ipsam suscipit animi quas, debitis ea, sunt quo distinctio doloribus eveniet dolores tempore delectus voluptatum! Possimus earum asperiores animi.

#### Large modal

Modals have two 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.

##### Modal title

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius voluptates explicabo natus nobis, aperiam placeat aliquid nisi ut exercitationem dolor quisquam nam tempora voluptatem. Unde dignissimos est aliquid quidem porro dolorum ipsam suscipit animi quas, debitis ea, sunt quo distinctio doloribus eveniet dolores tempore delectus voluptatum! Possimus earum asperiores animi.

#### Small modal

Modals have two 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.

##### Modal title

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius voluptates explicabo natus nobis, aperiam placeat aliquid nisi ut exercitationem dolor quisquam nam tempora voluptatem. Unde dignissimos est

#### Extra Large modal

Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.Just add `.modal-xl` class on `.modal-dialog`

##### Modal title

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius voluptates explicabo natus nobis, aperiam placeat aliquid nisi ut exercitationem dolor quisquam nam tempora voluptatem. Unde dignissimos est aliquid quidem porro dolorum ipsam suscipit animi quas, debitis ea, sunt quo distinctio doloribus eveniet dolores tempore delectus voluptatum! Possimus earum asperiores animi.

#### Rashed sent you an email

09:35

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.

#### Added

7 Minutes Ago

Lorem ipsum dolor sit amet consectetur.

#### You missed you Password!

09:20 Am

#### Member waiting for you Attention

09:35

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.

#### You Added Kaji Patha few minutes ago

01 minutes ago

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.

#### Ratul Hamba sent you an email

09:35

Hello sir , where are you, i am egerly waiting for you.

#### Rashed sent you an email

09:35

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.

#### Rashed sent you an email

09:35

#### Rashed sent you an email

09:35

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.

#### Rashed sent you an email

09:35

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.

#### General Settings

##### Notifications

Toggle

Keep it 'On' When you want to get all the notification.

##### Show recent activity

Toggle

The for attribute is necessary to bind our custom checkbox with the input.

##### Show your emails

Toggle

Show email so that easily find you.

##### Show Task statistics

Toggle

The for attribute is necessary to bind our custom checkbox with the input.

##### Notifications

Toggle

Use checkboxes when looking for yes or no answers.