Gmail like layout Using HMTL and Twitter Bootstrap
In this tutorial we are going to design a Gmail like layout using html and twitter bootstrap. Most of time we like to design some of the most popular layout on the web/internet. Once we designed ourself, we may feel sense of prideness that we made it. So here we are going to make most popular design on the internet i.e. Gmail layout, just follow this tutorial using bootstrap at the end you will make it yourself.
Gmail like layout Using HMTL and Twitter Bootstrap
Add Twitter Bootstrap CSS and Js Libraries:
Create index.hmtl file and add the Bootstrap CSS, Js Libraries and jQuery libary in your file. For icons I am using fontawesome CSS libraries, so please add them.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
and add the following js libraries as well.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Gmail Layout HMTL:
I had coded this Gmail layout html using Bootsrap Grid System and using some of bootstrap componenents. Please refer bootstrap official documentation for more.
<div class="container"> <!-- Gmail Header Starts here --> <div class="row"> <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2"> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Gmail <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Mail</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Tasks</a></li> </ul> </div> </div> <div class="col-xs-12 col-sm-9 col-md-10 col-lg-10"> <div class="pull-left"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <input type="checkbox"/> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <button type="button" class="btn btn-default"> <i class="fa fa-refresh"></i> </button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> More <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Mark all as read</a></li> <li class="divider"></li> <li><a href="#">Select messages to see more actions</a></li> </ul> </div> </div> <div class="pull-right"> <span>1-13 of 13</span> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default"> <i class='fa fa-angle-left'></i> </button> <button type="button" class="btn btn-default"> <i class='fa fa-angle-right'></i> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-gear"></i> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Comfortable</a></li> <li><a href="#">Cozy</a></li> <li><a href="#">Compact</a></li> <li class="divider"></li> <li><a href="#">Configure Inbox</a></li> <li class="divider"></li> <li><a href="#">Settings</a></li> <li><a href="#">Themes</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> </div> </div> <!-- Gmail Header Starts here --> <hr> <div class="row"> <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2"> <p> <button class="btn btn-danger" type="button"> Compose </button> </p> <hr/> <p> <button class="btn btn-success" type="button"> Inbox <span class="badge">4</span> </button> </p><p> <button class="btn btn-info" type="button"> Starred </button> </p> <p> <button class="btn btn-warning" type="button"> Important </button> </p> <p> <button class="btn btn-danger" type="button"> Chats </button> </p> <p> <button class="btn btn-info" type="button"> Sent Mail </button> </p> <p> <button class="btn btn-primary" type="button"> Drafts <span class="badge">10</span> </button> </p> </div> <div class="col-xs-12 col-sm-9 col-md-10 col-lg-10"> <div role="tabpanel"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"> <i class="fa fa-hdd-o"></i> Primary</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"> <i class="fa fa-users"></i> Social</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"> <i class="fa fa-exclamation-circle"></i> Updates</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">+</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <table class="table table-hover"> <tbody> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>Smart Tutorials Download Link</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td>8:06am</td> </tr> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>Smart Tutorials Download Link</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td> 8:06am </td> </tr> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>Smart Tutorials Download Link</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td>Jan 1</td> </tr> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>Smart Tutorials Download Link</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td> Jan 2</td> </tr> </tbody> </table> </div> <div role="tabpanel" class="tab-pane" id="profile"> <table class="table table-hover"> <tbody> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>Muni tagged You in Facebook</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td>8:06am</td> </tr> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>Smart Tutorials Shared Link On Google Plus</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td>8:06am</td> </tr> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>Smart Tutorials New Post on Twitter</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td>Jan 1</td> </tr> </tbody> </table> </div> <div role="tabpanel" class="tab-pane" id="messages"> <table class="table table-hover"> <tbody> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>New Updates From SmartTutorils</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td>8:06am</td> </tr> <tr> <td scope="row"><input type="checkbox"/></td> <td><i class="fa fa-star"></i></td> <td>Smart Tutorials Shared Link On Google Plus</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <i class="fa fa-file-archive-o"> </i> </td> <td>8:06am</td> </tr> </tbody> </table> </div> <div role="tabpanel" class="tab-pane" id="settings"> </div> </div> </div> </div> </div> </div>
Gmail Layout CSS:
Most of the styles that we used are default Bootstrap CSS, So there is no much need to code css for this layout, if you know bootstrap very well.
html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{position:absolute;bottom:0;width:100%;height:60px;background-color:#f5f5f5}body>.container{padding:60px 15px 0}.container .text-muted{margin:20px 0}.footer>.container{padding-right:15px;padding-left:15px}.navbar-default{background-color:#f04949;border-color:#f04949;font-family:Droid Sans}.navbar-default .navbar-brand{color:#fff;font-family:Droid Sans}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover,.navbar-default .navbar-nav>li>a{color:#fff}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#fff}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#D5D5D5}.navbar-default .navbar-nav>.dropdown>a .caret,.navbar-default .navbar-nav>.dropdown>a:focus .caret,.navbar-default .navbar-nav>.dropdown>a:hover .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-default .navbar-nav>.open>a .caret,.navbar-default .navbar-nav>.open>a:focus .caret,.navbar-default .navbar-nav>.open>a:hover .caret{border-top-color:#555;border-bottom-color:#555}.navbar-default .navbar-toggle{border-color:#DDD}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#f04949}.navbar-default .navbar-toggle .icon-bar{background-color:#fff}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#fff}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333}}.chk-read{margin:0;padding:0!important}.btn-chk{padding-top:4px;padding-bottom:4px}.btn.btn-default.dropdown-toggle{padding-left:30%;padding-right:30%}
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
