Modal

<div class="container mb-5">
    <div class="desc desc-line">Modal / Pop-Up</div>

    <pre><code>.modal</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 text-center">
            <button type="button" class="btn btn-outlined" data-toggle="modal" data-target="#exampleModal">Pop-Up öffnen</button>
        </div>
    </div>

    <pre><code>.modal-lg</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 text-center">
            <button type="button" class="btn btn-outlined btn-lg" data-toggle="modal" data-target="#largeModal">Pop-Up groß</button>
        </div>
    </div>

    <pre><code>.modal-sm</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 text-center">
            <button type="button" class="btn btn-outlined btn-sm" data-toggle="modal" data-target="#smallModal">Pop-Up klein</button>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="exampleModalLabel">Pop Up</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fal fa-times"></i></button>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-contained">Button</button>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="smallModalLabel">Info</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fal fa-times"></i></button>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr!</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-contained btn-sm">Button</button>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="largeeModalLabel">Just a headline</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fal fa-times"></i></button>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <form class="mb-4">
                        <div class="form-group mt-4 mb-2">
                            <input type="email" class="form-control" id="inputEmail" placeholder="E-Mail eingeben...">
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">
                            <label class="custom-control-label" for="customCheck1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-contained btn-lg">Button</button>

                </div>
            </div>
        </div>
    </div>