Google Inbox style design using Bootstrap | 2my4edge

02 September 2015

Google Inbox style design using Bootstrap

Here i'm going to make google inbox style design using bootstrap with font-awesome icons. i hope everybody knew about google inbox that is similar like gmail. In that, there is an design for compose mail as i'm showing in the below image. like that only we are going do here. lets see the code.

gmail google inbox style design
DOWNLOAD                         LIVE DEMO

So, we are going to do that in bootstrap. so we need add all bootstrap css and js files will jquery plugin and also we have add font awesome css file.

BOOTSTRAP FILES
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" 
 rel="stylesheet" id="bootstrap-css">
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/
font-awesome.min.css'>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

HTML CODE
<div class="container">
<div class="row">
<div id="inboxstyle">
<div class="fab btn-group show-on-hover dropup">
<div data-toggle="tooltip" data-placement="left" title="Compose" style="margin-left: 42px;">
<button type="button" class="btn btn-danger btn-io dropdown-toggle" data-toggle="dropdown">
      <span class="fa-stack fa-2x">
          <i class="fa fa-circle fa-stack-2x fab-backdrop"></i>
          <i class="fa fa-plus fa-stack-1x fa-inverse fab-primary"></i>
          <i class="fa fa-pencil fa-stack-1x fa-inverse fab-secondary"></i>
      </span>
    </button>
  </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 1">
<i class="fa fa-coffee"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 2">
<i class="fa fa-calendar"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 3">
<i class="fa fa-user"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 4">
<i class="fa fa-eye"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 5">
<i class="fa fa-flag"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link6">
<i class="fa fa-spinner fa-spin"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 7">
<i class="fa fa-cog fa-fw"></i></a>
  </li>
</ul>
</div>
</div>
</div>
</div>

CSS CODE
<style type="text/css">
.fab {
cursor: pointer;
}
.fab-backdrop {
color: rgba(255, 255, 255, 0);
}
.fab-primary, .fab-secondary {
transition: all 0.35s ease-in-out;
}
.fab.active .fab-primary {
opacity: 0;
transform: rotate(225deg);
}
.fab-secondary {
opacity: 0;
transform: rotate(-225deg);
}
.fab.active .fab-secondary {
opacity: 1;
transform: rotate(0);
margin-top: -2px;
}
#inboxstyle .show-on-hover:hover > ul.dropdown-menu {
display: block;    
}
#inboxstyle .show-on-hover {
position: absolute;
bottom: 20px;
right: 20px;
}
#inboxstyle .btn-io{
border-radius: 50%;
height: 54px;
width: 60px;
padding: 0 !important;
box-shadow: 0px 3px 7px 0px rgba(202, 124, 124, 0.72);
}
#inboxstyle .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
margin-bottom: -5px;
padding-bottom: 30px;
}
#inboxstyle .dropdown-menu-right {
right: 0 !important;
left: auto !important;
}
#inboxstyle .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 50px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: center;
list-style: none;
background-color: rgba(255, 255, 255, 0) !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: none;
border-radius: 0px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0) !important;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0) !important;
}
#inboxstyle .fa-iox{
font-size: 22px;
}
#inboxstyle .dropdown-menu > li > a {
display: block;
padding: 0;
padding-top: 4px;
margin-top: 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #fff;
background: #824076;
white-space: nowrap;
width: 40px;
height: 40px;
border: solid 1px #ccc;
border-radius: 50px;
font-size: 21px;
box-shadow: 0px 3px 7px 0px rgba(203, 203, 203, 0.72);
}
</style>

SCRIPT FOR TOOLTIP AND HOVER EFFECT
<script type="text/javascript">
  $('.fab').hover(function () {
    $(this).toggleClass('active');
  });
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  }) 
 </script>

That's it. I hope this is really cool one. Thanks for visiting,. Keep in touch with us for more tutorial.







RELATED POSTS

2 comments:

  1. Wow nice information and it is very informative.The author clearly describe the topic with good example and languages.Thank you so much for your great sharing.custom essay writing services

    ReplyDelete
  2. I was more than happy to find this web site. I need to thank you for your moment due to this unbelievable read!! I definitely savored every bit of it and I have you book-marked to see new things in your web site. best custom essay writing

    ReplyDelete

^