- Dashboard
  - Version 1
  - Version 2
  - Version 3
  - Version 4
- UI Kits
  - Alerts
  - Dropdown
  - Buttons
  - Bootstrap tab
  - Cards
  - Card Metrics
  - Carousels
  - Collapsibles
  - Lists
  - Paginations
  - Popover
  - Progressbar
  - Tables
  - Tabs
  - Tooltip
  - Typography
  - Modals
  - Sliders
- Extra Kits
  - Image Cropper
  - Loaders
  - Ladda Buttons
  - Toastr
  - Sweet Alerts
  - User Tour
  - Upload
- Apps
  - contact List
  - Invoice
  - Inbox
  - Chat
  - Task Manager
    - Todo List
    - Task manager
    - Task manager list
    - Minimal ToDo
  - Ecommerce
    - Products
    - Product Details
    - Cart
    - Checkout
  - Contact
    - Contact Lists
    - Contact Grid
    - Contact Details
- Widgets
  - widget card
  - widget statistics
  - Widget List
  - Widget App
  - Weather App
- Charts
  - echarts
  - ChartJs
  - Apex Charts
    - Area Charts
    - Bar Charts
    - Bubble Charts
    - Column Charts
    - CandleStick Charts
    - Line Charts
    - Mix Charts
    - Mix Charts
    - PieDonut Charts
    - Radar Charts
    - RadialBar Charts
    - Scatter Charts
    - Sparkline Charts
- Forms
  - Basic Elements
  - Basic action bar
  - Form Layouts
  - Multi column forms
  - Input Groups
  - Form Validation
  - Smart Wizard
  - Smart Wizard
  - Tag Input
  - Rich Editor
- Datatables
- Sessions
  - Sign in
  - Sign up
  - Forgot
- Others
  - Not Found
  - User Profile
  - Blank Page
- Doc

# Modals

- UI Kits
- Modals

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.

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself.

Vertically centered

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

Optional sizes

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.

Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and HTML`data-*` attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

Below is a live demo followed by example HTML and JavaScript. For more information, read the modal events docs for details on `relatedTarget`.

##### Modal title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere autem consequuntur unde? Dolore, dolor iusto.

##### Modal title

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

##### Modal title

...

##### New message

Recipient:
Message:

##### New message

Recipient:
Message:

##### New message

Recipient:
Message:

##### Modal title

...

##### Modal title

...

Gull - Laravel + Bootstrap 4 admin template

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero quis beatae officia saepe perferendis voluptatum minima eveniet voluptates dolorum, temporibus nisi maxime nesciunt totam repudiandae commodi sequi dolor quibusdam

Buy Gull HTML

© 2018 Gull HTML

All rights reserved

Search results
Headphone 1

Gadget

$300 $400

Sale

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New