Social navigation box

Bootstrap snippet. Social navigation box, this snippet 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 account tickets

bs4 account tickets

View

Bootstrap snippet bs4 authors card

bs4 authors card

View

Bootstrap snippet bs4 sevices page

bs4 sevices page

View

About this snippet

Creator: Facundo Chuburu

Bootstrap version: 3.3.6

Created: Sep 6th 2016, 12:01

Views: 2.8K

Rated 5/5 based on 2 reviews