Navigation :

Bootstrap Gallery

<!-- Nav tabs -->
    <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row image-box-css">
                        <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row image-box-css">
                        <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery2" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row image-box-css">
                        <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery3" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery3" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery3" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row image-box-css">
                        <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery4" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery4" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

body a, body .btn { -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; font-family: ‘Montserrat’, sans-serif; } .nav-tabs>li>a { margin-right: 2px; line-height: 1.42857143; border-radius: 4px 4px 0 0; text-transform: uppercase; color: #5b9ee6 !important; font-weight: inherit !important; } .nav-tabs>li>a:hover { border-color: #eee #eee #ddd } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { color: #FFFFFF; cursor: default; background-color: #00C0FF !important; font-weight: 500; border: 1px solid #016da8 !important; border-radius: 20px; text-transform: uppercase; -webkit-box-shadow: 1px 1px 1px 0px rgba(233, 233, 233, 1.00); box-shadow: 1px 1px 1px 0px rgba(233, 233, 233, 1.00); } .nav>li>a:hover, .nav>li>a:focus { text-decoration: none; border: 1px solid #016da8 !important; border-radius: 20px; } .tab-content { margin-top: 50px; margin-bottom: 30px; } .nav-tabs { border-bottom: none !important; } .nav-tabs .nav-link.active { border: 1px solid #016da8 !important; border-radius: 20px; } .tab-pane>.row { margin-left: 0px !important; margin-right: 0px !important; } .image-box-css>a { padding-bottom: 15px; }

$(document).on(‘click’, ‘[data-toggle=“lightbox”]‘, function (event) { event.preventDefault(); $(this).ekkoLightbox(); });