Social navigation box

This bootstrap snippet called "Social navigation box" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection


<!-- Font awesome -->
<script src="https://use.fontawesome.com/cb2d0db4c2.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4 h col-xs-12">
            <ul class="nav nav-tabs nav-justified">
                <li class="border-bottom-active" role="presentation">
                    <a class="home" href="#home">
                        Home
                        <span class="badge">
                            12
                        </span>
                    </a>
                </li>
                <li class="profile" role="presentation">
                    <a href="#profile">
                        Profile
                    </a>
                </li>
                <li class="messages" role="presentation">
                    <a href="#messages">
                        Messages
                        <span class="badge">
                            3
                        </span>
                    </a>
                </li>
            </ul>
            <div class="row ">
                <div class="col-md-12 ">
                    <div class=" row" id="home">
                        <div class="col-md-12 ">
                            <div class="row">
                                <div class="col-md-3 ">
                                    <div class="media-left media-middle">
                                        <a href="#">
                                            <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="col-md-12 content">
                                        <div class="list-group">
                                            <a class="list-group-item " href="#">
                                                <h4 class="list-group-item-heading">
                                                    Elio Zac
                                                </h4>
                                                <p class="list-group-item-text">
                                                    OMG!
                                                </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="media-left media-middle">
                                        <a href="#">
                                            <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="col-md-12 content">
                                        <div class="list-group">
                                            <a class="list-group-item " href="#">
                                                <h4 class="list-group-item-heading">
                                                    Clarence Etwood
                                                </h4>
                                                <p class="list-group-item-text">
                                                    Come here baby.
                                                </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="media-left media-middle">
                                        <a href="#">
                                            <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="col-md-12 content">
                                        <div class="list-group">
                                            <a class="list-group-item " href="#">
                                                <h4 class="list-group-item-heading">
                                                    Rick Stark
                                                </h4>
                                                <p class="list-group-item-text">
                                                    Bitch!
                                                </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="media-left media-middle">
                                        <a href="#">
                                            <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="col-md-12 content">
                                        <div class="list-group">
                                            <a class="list-group-item " href="#">
                                                <h4 class="list-group-item-heading">
                                                    Frank Ziu!
                                                </h4>
                                                <p class="list-group-item-text">
                                                    Come on!
                                                </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <nav aria-label="...">
                            <ul class="pager">
                                <li class="previous disabled">
                                    <a href="#">
                                        <span aria-hidden="true">
                                            ←
                                        </span>
                                        Older
                                    </a>
                                </li>
                                <li class="next">
                                    <a href="#">
                                        Newer
                                        <span aria-hidden="true">
                                            →
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="row hidden tab" id="profile">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <a href="">
                                        <img class="img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                        <i aria-hidden="true" class="fa fa-wrench ">
                                        </i>
                                    </a>
                                    <h2>Mikel Row</h2>
                                    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row hidden tab" id="messages">
                        <div class="col-md-12 content">
                            <div class="row">
                                <div class="col-md-12 content">
                                    <div class="media">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                            </a>
                                        </div>
                                        <div class="media-body ">
                                            <h4 class="media-heading dropdown">
                                                Marko Steve
                                                <button class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button">
                                                    <i class="fa fa-angle-down" id="box-options">
                                                    </i>
                                                </button>
                                                <ul aria-labelledby="box-options" class="dropdown-menu pull-right">
                                                    <li>
                                                        <a href="#">
                                                            <i aria-hidden="true" class="fa fa-trash-o">
                                                            </i>
                                                            Delete
                                                        </a>
                                                    </li>
                                                </ul>
                                            </h4>
                                            <p>
                                                Look around. Stop, look around again!
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 content">
                                    <div class="media ">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading dropdown">
                                                Luna Jun
                                                <button aria-expanded="false" aria-haspopup="true" class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button">
                                                    <i class="fa fa-angle-down" id="box-options">
                                                    </i>
                                                </button>
                                                <ul aria-labelledby="box-options" class="dropdown-menu pull-right">
                                                    <li>
                                                        <a href="#">
                                                            <i aria-hidden="true" class="fa fa-trash-o">
                                                            </i>
                                                            Delete
                                                        </a>
                                                    </li>
                                                </ul>
                                            </h4>
                                            <p>
                                                Wait a moment.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 content">
                                    <div class="media">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading dropdown">
                                                Jean Cyan
                                                <button aria-expanded="false" aria-haspopup="true" class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button">
                                                    <i class="fa fa-angle-down" id="box-options">
                                                    </i>
                                                </button>
                                                <ul aria-labelledby="box-options" class="dropdown-menu pull-right">
                                                    <li>
                                                        <a href="#">
                                                            <i aria-hidden="true" class="fa fa-trash-o">
                                                            </i>
                                                            Delete
                                                        </a>
                                                    </li>
                                                </ul>
                                            </h4>
                                            <p>
                                                OH my god!
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 content">
                                    <div class="media">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading dropdown">
                                                Daniel Orland
                                                <button aria-expanded="false" aria-haspopup="true" class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button">
                                                    <i class="fa fa-angle-down" id="box-options">
                                                    </i>
                                                </button>
                                                <ul aria-labelledby="box-options" class="dropdown-menu pull-right">
                                                    <li>
                                                        <a href="#">
                                                            <i aria-hidden="true" class="fa fa-trash-o">
                                                            </i>
                                                            Delete
                                                        </a>
                                                    </li>
                                                </ul>
                                            </h4>
                                            <p>
                                                Hello?
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 ">
        </div>
            </div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection


.nav li a {
    border: none !important;
}

.border-bottom-active {
    border: none !important;
    border-bottom: 3px solid red !important;
    color: green;
}

.nav-tabs {
    margin-bottom: 30px;
}

.content {
    padding-bottom: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom: 10px;
    /*border: 1px solid gray;
  background-color: ;*/
}

.media-object {
    width: 64px;
    height: 64px;
}

#profile img {
    width: 180px;
    position: relative;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

#profile i {
    transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
    opacity: 0.8;
    color: blue;
    font-size: 30px;
    position: absolute;
    top: 30%;
    left: 46%;

}

#profile a .fa-wrench {
    display: none;
}

#profile a:hover .fa-wrench {
    display: inline;
    color: red;
}

#profile a:hover img {
    opacity: 0.5;
}
                                    

Javascript/Jquery code

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection


$(document).ready(function() {
    var menues = $(".nav li");
    // manejador de click sobre todos los elementos
    menues.click(function() {
        // eliminamos active de todos los elementos
        menues.removeClass("border-bottom-active");
        // activamos el elemento clicado.
        $(this).addClass("border-bottom-active");
    });
});
$(document).ready(function() {
    $(".home").on("click", function() {
        $('#profile').addClass('hidden');
        $('#messages').addClass('hidden');
        $('#home').removeClass('hidden');
    });
    $(".profile").on("click", function() {
        $('#home').addClass('hidden');
        $('#messages').addClass('hidden');
        $('#profile').removeClass('hidden');
    });
    $(".messages").on("click", function() {
        $('#home').addClass('hidden');
        $('#profile').addClass('hidden');
        $('#messages').removeClass('hidden');
    });
}); 

Similar snippets

Bootstrap snippet bs4 profile with messages and edit

bs4 profile with messages and edit

View

Bootstrap snippet bs4 groups list

bs4 groups list

View

Bootstrap snippet Designer buttons

Designer buttons

View

About this snippet

Creator: Facundo Chuburu

Bootstrap version: 3.3.6

Created: Sep 6th 2016, 12:01

Views: 2.7K

Rated 5/5 based on 2 reviews