Gmail Style Inbox page using Html, Bootstrap, CSS and JQuery.

by Varun Singh
2022-02-01

16338

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.

Gmail style Inbox Page Output:

Download Script

Live Demo

Some Reasons for programmers preferred Bootstrap:

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

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.html:

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.

<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>
href="#">Unstarred</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" 
	 data-toggle="tooltip" title="Refresh">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default 
	   dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
u>l 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>
<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">
<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>
pan 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>
?>

style.css:

This file is used to set the every body part and other things on perfect postion.

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;}

Tags: Php Java Python React Html JavaScript Angular NodeJs JQuery

Varun Singh

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, Insta, LinkedIn and Twitter.
I need your support to continue.