Clarity - Responsive Minimalist Bootstrap 4 HTML Template

General

<!-- Modal -->
<div class="modal d-block position-static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <!-- Header -->
            <div class="modal-header">

                <!-- Title -->
                <h5 class="modal-title">Modal title</h5>
                <!-- /Title -->

                <!-- Close Button -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <!-- /Close Button -->

            </div>
            <!-- /Header -->

            <!-- Body -->
            <div class="modal-body">
                <p class="m-0">Modal body text goes here.</p>
            </div>
            <!-- /Body -->

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save Changes</button>
            </div>
            <!-- /Footer -->

        </div>
    </div>
</div>
<!-- /Modal -->

Live Demo

Show Code

<!-- Launch Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-demo-01">
    Launch Modal
</button>
<!-- /Launch Modal Button -->

<!-- Modal -->
<div class="modal fade" id="modal-demo-01" tabindex="-1" role="dialog" aria-labelledby="modal-demo-01-lbl" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <!-- Header -->
            <div class="modal-header">

                <!-- Title -->
                <h5 class="modal-title" id="modal-demo-01-lbl">Modal Title</h5>
                <!-- /Title -->

                <!-- Close Button -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <!-- /Close Button -->

            </div>
            <!-- /Header -->

            <!-- Body -->
            <div class="modal-body">
                ...
            </div>
            <!-- /Body -->

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save Changes</button>
            </div>
            <!-- /Footer -->

        </div>
    </div>
</div>
<!-- /Modal -->

Long Content

Show Code

<!-- Launch Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-demo-02">
    Launch Modal
</button>
<!-- /Launch Modal Button -->

<!-- Modal -->
<div class="modal fade" id="modal-demo-02" tabindex="-1" role="dialog" aria-labelledby="modal-demo-02-lbl" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <!-- Header -->
            <div class="modal-header">

                <!-- Title -->
                <h5 class="modal-title" id="modal-demo-02-lbl">Modal Title</h5>
                <!-- /Title -->

                <!-- Close Button -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <!-- /Close Button -->

            </div>
            <!-- /Header -->

            <!-- Body -->
            <div class="modal-body">
                <h4>What is Lorem Ipsum?</h4>
                <p>...</p>
                <h4>Where does it come from?</h4>
                <p>...</p>
                <p>...</p>
                <h4>Why do we use it?</h4>
                <p>...</p>
                <h4>Where can I get some?</h4>
                <p>...</p>
            </div>
            <!-- /Body -->

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save Changes</button>
            </div>
            <!-- /Footer -->

        </div>
    </div>
</div>
<!-- /Modal -->

Show Code

<!-- Launch Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-demo-03">
    Launch Modal
</button>
<!-- /Launch Modal Button -->

<!-- Modal -->
<div class="modal fade" id="modal-demo-03" tabindex="-1" role="dialog" aria-labelledby="modal-demo-03-lbl" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">

            <!-- Header -->
            <div class="modal-header">

                <!-- Title -->
                <h5 class="modal-title" id="modal-demo-03-lbl">Modal Title</h5>
                <!-- /Title -->

                <!-- Close Button -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <!-- /Close Button -->

            </div>
            <!-- /Header -->

            <!-- Body -->
            <div class="modal-body">
                <h4>What is Lorem Ipsum?</h4>
                <p>...</p>
                <h4>Where does it come from?</h4>
                <p>...</p>
                <p>...</p>
                <h4>Why do we use it?</h4>
                <p>...</p>
                <h4>Where can I get some?</h4>
                <p>...</p>
            </div>
            <!-- /Body -->

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save Changes</button>
            </div>
            <!-- /Footer -->

        </div>
    </div>
</div>
<!-- /Modal -->

Vertically Centered

Show Code

<!-- Launch Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-demo-04">
    Launch Modal
</button>
<!-- /Launch Modal Button -->

<!-- Modal -->
<div class="modal fade" id="modal-demo-04" tabindex="-1" role="dialog" aria-labelledby="modal-demo-04-lbl" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
        <div class="modal-content">

            <!-- Header -->
            <div class="modal-header">

                <!-- Title -->
                <h5 class="modal-title" id="modal-demo-04-lbl">Modal Title</h5>
                <!-- /Title -->

                <!-- Close Button -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <!-- /Close Button -->

            </div>
            <!-- /Header -->

            <!-- Body -->
            <div class="modal-body">
                <p class="m-0">Modal body text goes here.</p>
            </div>
            <!-- /Body -->

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save Changes</button>
            </div>
            <!-- /Footer -->

        </div>
    </div>
</div>
<!-- /Modal -->

Purchase $8.00 only!

Do you like our template? Updates, new pages and widgets every week.

Purchase Cleathin