How to create Gmail style Inbox page in Html using help of bootstrap css and Jquery.

POSTED

AUTHOR: VARUN SINGH

In this tutorials, I am going to explore how to create Gmail style Inbox page in Html using help of Bootstrap css and Bootstrap Jquery. Many Beginners and Advance learner always search this types of tutorials on google. Here I am using Bootstrap, as I know, it is a well defined CSS. Although using Bootstrap you could also use Bootstrap JavaScript and Boots CSS. But the main difference is that, using Bootstrap you can just call the class name and then you get the output on the HTML page. For example. making tab, Making dropdown, coloring of buttons shaping of text, using layouts for your web page. For all this feature you do not have to write a CSS file rather you just have to use the correct class name for shaping your HTML page.

Some Reasons for programmers preferred Bootstrap Framework:

• Easy to get started
• Great grid system
• Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
• Extensive list of components
• Bundled Javascript plugins


Here is the output of the page:

gmail-style-inbox-page


download view


Structure Of File:

• File -> index.html
• Folder -> css -> File -> (bootstrap.min.css) , (tab.css)
• Folder -> js -> File -> (bootstrap.min.js) , (jquery-1.10.2.min.js)


• index.php: In this file I have used Bootstrap CSS and Bootstrap JavaScript to map shape our html file. I just used pre-defined class written in Bootstrap CSS file to shape our button, tab, dropdown toggle option.


<?php
<html lang="en">
<head>
   
   <title>Gmail Style Inbox page  - coderglass</title>
   <link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
   <link href="css/tab.css" rel="stylesheet" id="bootstrap-css">
    
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        window.alert = function(){};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css){
            if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
            else $('head > link').filter(':first').replaceWith(defaultCSS); 
        }
        $( document ).ready(function() {
          var iframe_height = parseInt($('html').height()); 
          window.parent.postMessage( iframe_height, 'https://coderglass.com');
        });
    </script>
</head>
<body>

	<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-2">
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Gmail <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li ><a  style='color:red;' href="#">Mail</a></li>
                    <li><a href="#">Contacts</a></li>
                    <li><a href="#">Tasks</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 col-md-10">
            <!-- Split button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default">
                    <div class="checkbox" style="margin: 0;">
                        <label>
                            <input type="checkbox">
                        </label>
                    </div>
                </button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">All</a></li>
                    <li><a href="#">None</a></li>
                    <li><a href="#">Read</a></li>
                    <li><a href="#">Unread</a></li>
                    <li><a href="#">Starred</a></li>
                    <li><a href="#">Unstarred</a></li>
                </ul>
            </div>
            <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
                &nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;&nbsp;</button>
            <!-- Single button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    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 class="text-center">
					<small class="text-muted">Select messages to see more actions</small>
					</li>
                </ul>
            </div>
            <div class="pull-right">
                <span class="text-muted"><b>1</b><b>50</b> of <b>277</b></span>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-sm-3 col-md-2">
            <a href="#" class="btn btn-danger btn-sm btn-block" role="button">COMPOSE</a>
            <hr />
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#"><span class="badge pull-right">1546</span> Inbox </a>
                </li>
                <li><a style='color:black;' href="https://www.coderglass.com">Starred</a></li>
                <li><a style='color:black;' href="https://www.coderglass.com">Important</a></li>
                <li><a style='color:black;' href="https://www.coderglass.com">Sent Mail</a></li>
                <li><a style='color:black;' href="https://www.coderglass.com">
				<span class="badge pull-right">445</span>Drafts</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-md-10">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">
				<span class="glyphicon glyphicon-inbox">
                </span>Primary</a></li>
                <li><a style="color:black;" href="#profile" data-toggle="tab">
				<span class="glyphicon glyphicon-user">
				</span>Social</a></li>
                <li><a style="color:black;" href="#messages" data-toggle="tab">
				<span class="glyphicon glyphicon-tags">
				</span>Promotions</a></li>
                <li><a style="color:black;" href="#settings" data-toggle="tab">
				<span class="glyphicon glyphicon-plus no-margin">
                </span></a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <div class="list-group">
                        
                    <a href="#" class="list-group-item">
                    <div class="checkbox">
                       <label>
                        <input type="checkbox">
                       </label>
                    </div>
                    <span class="glyphicon glyphicon-star-empty"></span>
					<span class="name" style="min-width: 120px; display: inline-block;">Varun Singh</span>
					<span class="">You have uploaded 2 files</span>
                    <span class="text-muted" style="font-size: 11px;">
					- The files will be available for a limited time only unless 
					you are a sendspace Premium member.
					</span> 
					<span class="badge">12:10 AM</span> 
					<span class="pull-right">
					<span class="glyphicon glyphicon-paperclip">
                    </span></span>
					</a>
                    
					<a href="#" class="list-group-item">
                    <div class="checkbox">
                       <label>
                        <input type="checkbox">
                       </label>
                    </div>
                    <span class="glyphicon glyphicon-star"></span>
					<span class="name" style="min-width: 120px; display: inline-block;">Varun Singh</span>
					<span class="">You have uploaded 2 files</span>
                    <span class="text-muted" style="font-size: 11px;">
					- The files will be available for a limited time only unless 
					you are a sendspace Premium member.
					</span> 
					<span class="badge">12:10 AM</span> 
					<span class="pull-right">
					<span class="glyphicon glyphicon-paperclip">
                    </span></span>
					</a>
					
					<a href="#" class="list-group-item">
                    <div class="checkbox">
                       <label>
                        <input type="checkbox">
                       </label>
                    </div>
                    <span class="glyphicon glyphicon-star-empty"></span>
					<span class="name" style="min-width: 120px; display: inline-block;">Varun Singh</span>
					<span class="">You have uploaded 2 files</span>
                    <span class="text-muted" style="font-size: 11px;">
					- The files will be available for a limited time only unless 
					you are a sendspace Premium member.
					</span> 
					<span class="badge">12:10 AM</span> 
					<span class="pull-right">
					<span class="glyphicon glyphicon-paperclip">
                    </span></span>
					</a>
					
					<a href="#" class="list-group-item">
                    <div class="checkbox">
                       <label>
                        <input type="checkbox">
                       </label>
                    </div>
                    <span class="glyphicon glyphicon-star"></span>
					<span class="name" style="min-width: 120px; display: inline-block;">Varun Singh</span>
					<span class="">You have uploaded 2 files</span>
                    <span class="text-muted" style="font-size: 11px;">
					- The files will be available for a limited time only unless 
					you are a sendspace Premium member.
					</span> 
					<span class="badge">12:10 AM</span> 
					<span class="pull-right">
					<span class="glyphicon glyphicon-paperclip">
                    </span></span>
					</a>
                     
					 <a href="#" class="list-group-item">
                    <div class="checkbox">
                       <label>
                        <input type="checkbox">
                       </label>
                    </div>
                    <span class="glyphicon glyphicon-star"></span>
					<span class="name" style="min-width: 120px; display: inline-block;">Varun Singh</span>
					<span class="">You have uploaded 2 files</span>
                    <span class="text-muted" style="font-size: 11px;">
					- The files will be available for a limited time only unless 
					you are a sendspace Premium member.
					</span> 
					<span class="badge">12:10 AM</span> 
					<span class="pull-right">
					<span class="glyphicon glyphicon-paperclip">
                    </span></span>
					</a>
                        
                    </div>
                </div>
                
            </div>
           
        </div>
    </div>
</div>

</body>
</html>
?>


• tab.css:


body{ margin-top:50px;}
.nav-tabs .glyphicon:not(.no-margin) { margin-right:10px; }
.tab-pane .list-group-item:first-child {
border-top-right-radius: 0px;border-top-left-radius: 0px;}
.tab-pane .list-group-item:last-child {
border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
.tab-pane .list-group .checkbox { display: inline-block;margin: 0px; }
.tab-pane .list-group input[type="checkbox"]{ margin-top: 2px; }
.tab-pane .list-group .glyphicon { margin-right:5px; }
.tab-pane .list-group .glyphicon:hover { color:#FFBC00; }
a.list-group-item.read { color: #222;background-color: #F3F3F3; }
hr { margin-top: 5px;margin-bottom: 10px; }
.nav-pills>li>a {padding: 5px 10px;}

.ad { padding: 5px;background: #F5F5F5;color: #222;font-size: 80%;
border: 1px solid #E5E5E5; }
.ad a.title {color: #15C;text-decoration: none;
font-weight: bold;font-size: 110%;}
.ad a.url {color: #093;text-decoration: none;}


The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.


Comments: