Bootstrap Snippet inbox compose message using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet">
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="container">
<div class="row inbox">
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-body inbox-menu">                     
                <a href="#page-inbox-compose.html" class="btn btn-danger btn-block">New Email</a>
                <ul>
                    <li>
                        <a href="#page-inbox.html"><i class="fa fa-inbox"></i> Inbox <span class="label label-danger">4</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-star"></i> Stared</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-rocket"></i> Sent</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-trash-o"></i> Trash</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bookmark"></i> Important<span class="label label-info">5</span></a>
                    </li>
                    <li class="title">
                        Labels
                    </li>
                    <li>
                        <a href="#">Home <span class="label label-danger"></span></a>
                    </li>
                    <li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{margin-top:20px;
background:#eee;
}
.inbox .inbox-menu ul {
    margin-top: 30px;
    padding: 0;
    list-style: none
}
.inbox .inbox-menu ul li {
    height: 30px;
    padding: 5px 15px;
    position: relative
}
.inbox .inbox-menu ul li:hover,
.inbox .inbox-menu ul li.active {
    background: #e4e5e6
}
.inbox .inbox-menu ul li.title {
    margin: 20px 0 -5px 0;
    text-transform: uppercase;
    font-size: 10px;
    color: #d1d4d7
}
.inbox .inbox-menu ul li.title:hover {
    background: 0 0
}
.inbox .inbox-menu ul li a {
    display: block;
    width: 100%;
    text-decoration: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
$(document).ready(function(){
    $("#to, #cc, #bcc").select2({tags:["team@bm.com", "ceo@bm.com", "cto@bm.com"]});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

" inbox compose message"
Bootstrap 3.3.0 Snippet by megatela

Related: See More

Questions / Comments:

" inbox compose message" Bootstrap 3.3.0 Snippet by megatela

Related: See More

Questions / Comments:

" inbox compose message"
Bootstrap 3.3.0 Snippet by megatela