I am new to bootstrap with asp.net Mvc. How to create a responsive layout as the below image? My layout moves when I collapse the side menu. And the page is not responsive at all? Do I need to give mediaqueries for all partial views that I render in the _layout.cshtml?
Home
LayoutAlteredWhenMenuCollapsed
Page View Source
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>Index</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<!-- Tweaks for older IEs-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
<!-- Javascript files-->
<script src="http://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<!-----playlist------>
<style>
.sticky-footer {
position: fixed;
bottom: 0;
width: 100%;
}
/*original*/
.liked::before {
color: #600;
content: '\f004';
}
.not-liked::before {
color: #aaa;
content: '\f08a';
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#menu-toggle').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</head>
<body>
<div class="page home-page">
<!-- Main Navbar-->
<div class="page-content d-flex align-items-stretch">
<!-- Side Navbar -->
<nav id="sidebar" class="side-navbar">
<!-- Sidebar Header -->
<ul class="list-unstyled">
<li>
<a id="menu-toggle" class="btn">
<i class="fa fa-bars"></i>MusicCloud
</a>
</li>
<li> <a href="index.html"><i class="-home"></i>Home</a></li>
<li>
<a href="#daiconshvariants" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Dropdown </a>
</li>
<li> <a href="tables.html"> <i class="icon-grid"></i>Tables </a></li>
<li> <a href="charts.html"> <i class="fa fa-bar-chart"></i>Charts </a></li>
<li> <a href="forms.html"> <i class="icon-padnote"></i>Forms </a></li>
<li> <a href="login.html"> <i class="icon-interface-windows"></i>Login Page</a></li>
</ul>
</nav>
<div class="content-inner">
<!-- Page Header-->
<header class="page-header">
<nav class="navbar">
<!-- Ticker-->
<div>
<div class="headerTop">
<div id="breakingnews">
<span class="breakhead"><i class="fa fa-refresh fa-spin"></i></span>
<div id="adbreakingnews">Loading...</div>
</div>
</div>
<!-- Search Box-->
<div class="search-box">
<button class="dismiss"><i class="icon-close"></i></button>
<form id="searchForm" action="#" role="search">
<input type="search" placeholder="What are you looking for..." class="form-control">
</form>
</div>
<div class="d-flex align-items-center justify-content-between">
<!-- Navbar Header-->
<!-- Navbar Menu -->
<ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
<!-- Search-->
<li class="nav-item d-flex align-items-center"><a id="search" href="#"><i class="icon-search"></i></a></li>
<!-- Notifications-->
<li class="nav-item dropdown">
<a id="notifications" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-bell-o"></i><span class="badge bg-red">12</span></a>
<ul aria-labelledby="notifications" class="dropdown-menu">
<li>
<a rel="nofollow" href="#" class="dropdown-item">
<div class="notification">
<div class="notification-content"><i class="fa fa-envelope bg-green"></i>You have 6 new messages </div>
<div class="notification-time"><small>4 minutes ago</small></div>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item">
<div class="notification">
<div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have 2 followers</div>
<div class="notification-time"><small>4 minutes ago</small></div>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item">
<div class="notification">
<div class="notification-content"><i class="fa fa-upload bg-orange"></i>Server Rebooted</div>
<div class="notification-time"><small>4 minutes ago</small></div>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item">
<div class="notification">
<div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have 2 followers</div>
<div class="notification-time"><small>10 minutes ago</small></div>
</div>
</a>
</li>
<li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong>view all notifications </strong></a></li>
</ul>
</li>
<!-- Messages -->
<li class="nav-item dropdown">
<a id="messages" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-envelope-o"></i><span class="badge bg-orange">10</span></a>
<ul aria-labelledby="notifications" class="dropdown-menu">
<li>
<a rel="nofollow" href="#" class="dropdown-item d-flex">
<div class="msg-profile"> <img src="/Content/Template/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="msg-body">
<h3 class="h5">Jason Doe</h3><span>Sent You Message</span>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item d-flex">
<div class="msg-profile"> <img src="/Content/Template/img/avatar-2.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="msg-body">
<h3 class="h5">Frank Williams</h3><span>Sent You Message</span>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item d-flex">
<div class="msg-profile"> <img src="/Content/Template/img/avatar-3.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="msg-body">
<h3 class="h5">Ashley Wood</h3><span>Sent You Message</span>
</div>
</a>
</li>
<li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong>Read all messages </strong></a></li>
</ul>
</li>
<!-- Logout -->
<li class="nav-item"><a href="login.html" class="nav-link logout">Logout<i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Dashboard Counts Section-->
<section class="dashboard-counts no-padding-bottom">
<div>
<div class="row bg-white has-shadow">
<!-- Item -->
<div id="container-fluid">
<div class="row" id="contentPanel">
</div>
</div>
</div>
</div>
</section>
<!-- Page Footer-->
<footer id="sticky-footer" class="sticky-footer">
<style>
#mediawrapper {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 100%;
}
#mejsAudio {
width: 100%;
}
h1 {
text-align: center;
}
.tagline {
text-align: center;
}
.sm2-bar-ui {
position: relative;
display: inline-block;
width: 100%;
font-family: helvetica, arial, verdana, sans-serif;
font-weight: 400;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*-moz-osx-font-smoothing: grayscale;*/
-webkit-font-smoothing: antialiased;
/*font-smoothing: antialiased;*/
text-rendering: optimizeLegibility;
min-width: 20em;
max-width: 30em;
border-radius: 2px;
overflow: hidden;
transition: max-width .2s ease-in-out
}
.sm2-bar-ui.fixed {
left: 0;
top: auto;
bottom: 0;
overflow: visible
}
.sm2-bar-ui.full-width {
max-width: 100%;
z-index: 5
}
/*your desired height*/
footer1 {
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
left: 0;
}
.mej-playlist-collapse-button {
cursor: pointer;
display: block;
font-size: 0;
line-height: 0;
text-decoration: none;
margin: 7px 5px;
padding: 0;
position: absolute;
height: 16px;
width: 16px;
border: 0;
float: left;
}
</style>
<div id="audioDiv">
<audio id="mejsAudio" type="audio/mp3" controls="controls" autoplay="autoplay"
data-cast-title="Chromecast"
data-cast-description="Cast your playlist"
data-cast-poster="~/bower_components/mediaelement/build/chromecast.png">
Your browser does not support the audio element.
<button class="fa-archive"></button>
</audio>
</div>
<button class="mej-playlist-collapse-button"><i class="fas fa-bars"></i></button>
</footer>
</div>
<div id="right" class="chatBarNav">
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.js"></script>
<!--Reference the SignalR library. -->
<link href="/Content/css/ChatStyle.css" rel="stylesheet" />
<script src="/Scripts/jquery.signalR-2.1.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.signalR-2.1.2.js" type="text/javascript"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script type="text/javascript" src="/signalr/hubs"></script>
<script src="/Scripts/Modules/Home/ChatBar.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="/Scripts/jquery-ui/jquery.ui.core.js"></script>
<script src="/Scripts/jquery-ui/jquery.ui.widget.js"></script>
<script src="/Scripts/jquery-ui/jquery.ui.mouse.js"></script>
<script src="/Scripts/jquery-ui/jquery.ui.draggable.js"></script>
<script src="/Scripts/jquery-ui/jquery.ui.resizable.js"></script>
<style>
.input-group i.fa {
position: absolute;
top: 10px;
left: 22px;
color: #808080;
font-size: 22px;
z-index: 9999;
}
.fa-loggedInUser {
margin-left: 4px;
color: #009aff;
}
.fa-active {
color: #0cdb2a;
margin-left: 4px;
margin-right: 2px;
}
.form-control {
position: relative;
padding-left: 45px !important;
}
</style>
<div id="divContainer" class="aside-md bg-light dk">
<h4 class="font-thin m-l-md m-t fa fa-connectdevelop">You are Connected</h4>
<div id="divLogin" class="login">
<div class="input-group">
<i class="fa fa-user"></i>
<input id="txtNickName" type="text" class="form-control custom-input is-invalid" name="name" value="" placeholder="Enter name" required autofocus style="border-radius: 30px;">
</div>
<div id="divButton">
<input id="btnStartChat" style="color:black;" type="button" class="submitButton" value="Start Chat" />
</div>
</div>
<div id="divChat" class="chatRoom">
<div class="title">
Welcome to MChat [<span id='spanUser'></span>]
</div>
<div class="content">
<div id="divChatWindow" class="chatWindow">
</div>
<div id="divusers" class="users">
</div>
</div>
<div style="clear:both"></div>
<div class="input-group mb-3 messageBar">
<input type="text" id="txtMessage" class="form-control" placeholder="Type" aria-label="Text" aria-describedby="basic-addon">
<div class="input-group-append">
<button id="btnSendMsg" class="btn btn-secondary" type="button">Submit</button>
</div>
</div>
</div>
<input id="hdId" type="hidden" />
<input id="hdUserName" type="hidden" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="modPlayList" class="modcon" style="width: 20%;height:20%"></div>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/jquery-ui/jquery.ui.core.js"></script>
<script src="/Content/Template/vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="/Content/Template/vendor/popper.js/umd/popper.min.js"></script>
<script src="/Content/Template/vendor/jquery.cookie/jquery.cookie.js"></script>
<link href="/Content/Template/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<link href="/Content/Template/css/fontastic.css" rel="stylesheet" />
<link href="/Content/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="/Content/Poppins.css" rel="stylesheet" />
<link href="/Content/Template/css/style.default.css" rel="stylesheet" />
<link href="/Content/Template/css/custom.css" rel="stylesheet" />
<link href="/Content/Template/img/favicon.ico" rel="stylesheet" />
<link href="/Content/SideBar.css" rel="stylesheet" />
<link href="/Content/Album/css/albums.min.css" rel="stylesheet" />
<link href="/Scripts/MediaElementJS/js/mediaelement-and-player_2.13.1.min.css" rel="stylesheet" />
<link href="/Scripts/MediaElementJS/mep-feature-playlist-master/mep-feature-playlist.css" rel="stylesheet" />
<link href="/Content/Album/css/ticker.css" rel="stylesheet" />
<link href="/Content/css/WeatherCard.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Content/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/MediaElementJS/js/mediaelement-and-player_2.13.1.min.js"></script>
<script src="/Scripts/MediaElementJS/mep-feature-playlist-master/mep-feature-playlist.js"></script>
<script src="/Scripts/Modules/Albums/FullPlayer.js"></script>
<script src="/Scripts/Modules/Albums/Ticker.js"></script>
<script src="/Scripts/Modules/Albums/Song_Layout.js"></script>
<script src="/Scripts/Modules/Home/Weather.js"></script>
</body>
</html>
