@extends('layouts.master') @section('title')Unikit @endsection @section('css') @endsection @section('body-start') @endsection @section('content') @section('breadcrumb') @component('components.breadcrumb') @slot('li_1') UI Kit @endslot @slot('title') Modals @endslot @endcomponent @endsection

Optional sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.

Size Class Modal max-width Modal Demo
Small .modal-sm 300px
Default None 500px
Large .modal-lg 800px
Extra large .modal-xl 1140px
Default (Center Modal) .modal-dialog-centered 500px
Default (Scroll Modal) .modal-dialog-scrollable 500px

Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.

Class Availability Modal Demo
.modal-fullscreen Always
.modal-fullscreen-sm-down Below 576px
.modal-fullscreen-md-down Below 768px
.modal-fullscreen-lg-down Below 992px
.modal-fullscreen-xl-down Below 1200px
.modal-fullscreen-xxl-down Below 1400px

Themes Modal

You can use custom modals with themes colors.

Login & Signup Modal

You can use custom modals with Login and SignUp form.

@endsection @section('script') @endsection @section('body-end') @endsection