I have two navbars in my application which seems to be off-sync. i.e, this:
I would like to have the navbar collapsed across the logo.
Like this:
Tried deploying this logo under navbar-header class too. But faces problems with alignment.
MY CODE:
admin.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>MDM - Admin Suite</title>
<div th:replace="fragments/header :: header-css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}" href="../../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body ng-app="uploadFileApp">
<div th:replace="fragments/header :: header"/>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Service</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container uploadposition">
<div ng-controller="uploadFileController">
<form class="form-horizontal" id="uploadForm" action="#">
<div class="form-group">
<label class="control-label col-sm-2" for="uploadfile">Upload File:</label>
<div class="col-sm-5">
<input id="upload" class="form-control" type="file" file-model = "uploadedFile" placeholder="Upload File"></input>
</div>
<button type="submit" class="uploadButton" ng-click = "doUploadFile()">Upload</button>
</div>
</form>
<div class="col-sm-offset-2">
<p ng-bind="uploadResult"></p>
</div>
<hr/>
</div>
<div id="pas-table-div" style="display:none;">
<h3>PAS MDM Reject Records</h3>
<div ng-show="loading" >
<h3>Loading...</h3>
</div>
<div class="col-sm-offset-2">
<p ng-bind="submitResult"></p>
</div>
<table st-table="display_records" st-safe-src="employees" ng-init="getData()" ng-show="employees.length"
class="table table-striped" ng-controller="uploadFileController">
<thead>
<tr>
<th>Policy Number</th>
<th width="100px">First Name</th>
<th st-sort="salary">Last Name</th>
<th>Error Description</th>
<th>Validated/Corrected in PAS</th>
<th>Note</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple"
ng-repeat="row in display_records">
<td>{{row.PolicyNumber}}</td>
<td>{{row.FirstName}}</td>
<td>{{row.LastName}}</td>
<td>{{row.ErrorDescription}}</td>
<td>{{row.PASValidated}}</td>
<td>{{row.Note}}</td>
<td><button type="button" class="btn btn-danger" ng-click="deletRecord(row.PolicyNumber)">
<i class="glyphicon glyphicon-trash"> </i>
</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="border-bottom: 1px solid #ddd;"></td>
<td style="border-bottom: 1px solid #ddd;">
<button type="button" class="submitButton" ng-click="submit(employees)">Submit</button>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage"></div>
</td>
</tr>
</tfoot>
</table>
</div>
<script src="/js/jsaApp.js"></script>
<script src="/js/uploadFileCtrl.js"></script>
</div>
</body>
</html>
header.html:
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:fragment="header-css">
<!-- this is header-css -->
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}" href="../../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</div>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
<div class="container">
<div class="navbar-header">
<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<a class="navbar-brand" href="#" th:href="#{/}"><img class="logoImg" height="25" width="55" src="http://static1.squarespace.com/static/56bcdc788259b5861e880ebe/t/5a96fae971c10bede98395de/1520548852981/?format=1500w"></img></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li th:classappend="${module == 'tasks' ? 'active' : ''}">
Tasks
</li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="#{/dashboard}"><span>Dashboard</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="#{/orders}"><span>Orders</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="#{/income}"><span>Income</span></a></li>
<li role="separator" ></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
<a href="/signin" th:href="#{/signin}">
<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Sign in
</a>
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
<a href="/logout" th:href="#{#}" onclick="$('#form').submit();">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Sign out
</a>
<form style="visibility: hidden" id="form" method="post" action="#" th:action="#{/logout}"></form>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
main.css:
h1 {
color: #0000FF;
display: inline;
}
h2 {
color: #FF0000;
}
footer {
margin-top: 60px;
}
.uploadposition {
position: absolute;
right: 0px;
top: 100px;
width: 85%;
}
.navbar-inverse {
margin-bottom: 0px !important;
position: relative !important;
}
.logoImg {
background-size: 70.7%;
background-repeat: no-repeat;
background-position: 50%;
}
.submitButton {
background-color: #24b54b;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 4px 31px;
text-decoration: none;
}
.submitButton:hover {
background-color: #15ad3b;
}
.submitButton:active {
position: relative;
top: 1px;
}
.uploadButton {
background-color: #16529c;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #2958b0;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 4px 31px;
text-decoration: none;
}
.uploadButton:hover {
background-color: #0c458a;
}
.uploadButton:active {
position: relative;
top: 1px;
}
.leftNavbar {
width: 10%;
float: left;
}
.navbar .navbar-brand {
padding-top: 5px;
}
.navbar .navbar-brand img {
height: 40px;
width: 70px;
}
body {
padding: 0;
margin: 0;
height: 90vh;
}
.buttons {
position: absolute;
right: 0;
top: 0;
text-decoration: none;
padding: 5px 10px;
margin: 5px;
background: #000;
color: #ccc;
}
.buttons a {
display: block;
}
.button:hover {
color: #ccc;
}
.sidebar {
background: #1a1c1d;
color: #787d80;
width: 125px;
height: 100%;
text-align: left;
transform-origin: left;
transform-style: preserve-3d;
transition: all 0.5s;
overflow: hidden;
}
.sidebar:hideDown {
transform: rotateY(90deg) skewY(10deg);
}
.sidebar:hideUp {
transform: rotateY(90deg) skewY(-10deg);
}
.sidebarHeader {
padding: 20px 10px;
font-weight: 700;
text-align: center;
}
.sidebar ul {
padding: 0;
margin: 0;
list-style-type: none;
display:inline-block;
}
.sidebar li {
padding: 15px 10px;
}
.sidebar a {
text-decoration: none;
color: inherit;
transition: color 0.5s;
}
Can someone help me with this?
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
I am making a small webpage which is shown below . There is a footer at the end over which "Made with love by Vipul Tyagi" is written. The problem is that it is coming over the previous division(feedback form). No matter how much top property I apply to the footer, it is not moving down even a bit.
Please have a look at my code and help me to find the problem. You will find it at the very end in html just above </body> tag.
Thanks in advance!
$(document).ready(function() {
$("#notif-list li").click(function(e) {
var num = parseInt($("#notif-number").text());
$(this).remove();
$("#notif-number").html("" + num - 1 + "");
});
});
.container1 {
position: relative;
color: white;
}
.centered {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.top-left {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
}
.heading {
font-family: 'Orbitron', serif;
}
#headmain {
font-size: 50px;
position: relative;
left: -55px;
color: white;
}
#headsecondary {
position: relative;
right: 5%;
color: white;
}
#top-content {
position: relative;
top: 40px;
width: 100%;
background-color: #bbb;
padding: 10px;
}
a {
color: white;
}
.number {
position: absolute;
top: -5px;
right: -2px;
padding: 5px 10px;
border-radius: 30%;
background: green;
color: white;
}
.borderimg {
border-radius: 30%;
}
.carosel {
width: 670px;
}
.service-list {
font-family: 'Lobster', cursive;
font-size: 50px;
}
.labels {
font-size: 15px;
}
.login-box {
width: 320px;
height: 520px;
top: 290px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #1c8adb;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: #39dc79;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 14px;
color: #fff;
}
.login-box a:hover {
color: #39dc79;
}
#media screen and (max-width: 450px) {
.carosel {
width: 300px;
}
.top-left {
position: absolute;
top: 35%;
left: 55%;
transform: translate(-50%, -50%);
}
#headmain {
font-size: 30px;
position: relative;
left: -20px;
color: white;
}
#headsecondary {
font-size: 20px;
position: relative;
right: 5%;
color: white;
}
#service-list {
font-family: 'Lobster', cursive;
font-size: 30px;
}
.login-box {
width: 300px;
height: 500px;
position: relative;
top: 50px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" style="opacity: 0.9;top: 10px;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="sankalpsoft.png" style="height: 30px; width: 30px;bottom : 10px;" /></a>
<a class="navbar-brand" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">SankalpSoft</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
About Us
</li>
<li>Why We?</li>
<li>Products</li>
<li>Services</li>
<li>Blogs</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Notification<span class="number" id="notif-number">4</span></a>
<ul class="dropdown-menu" id="notif-list">
<li style="padding: 10px 5px;">Notification 1</li>
<li style="padding: 10px 5px;">Notification 2</li>
<li style="padding: 10px 5px;">Notification 3</li>
<li style="padding: 10px 5px;">Notification 4</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="width: 100%;padding-left: 0;padding-right: 0;">
<img src="https://i.postimg.cc/PpNsdrDS/back-img.jpg" alt="Snow" style="width: 100%;height: 350px;filter: grayscale(10%) brightness(60%) contrast(1);box-shadow: 5px 15px 8px #888888;">
<div class="top-left">
<h1 class="heading" id="headmain">SankalpSoft Solutions</h1>
<h3 class="heading" id="headsecondary">We Provide intelligent business support</h3>
</div>
</div>
</div>
<div class="container carosel" style="height: 340px;top: 40px;">
<h2 style="text-align: center;" class="service-list">Services We provide</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="box-shadow: 20px 10px 8px #888888;border-radius: 10%;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active borderimg">
<img src="https://i.postimg.cc/kVQDWsY0/business.jpg" alt="business" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/XGnqL5Tp/outsourcing.jpg" alt="outsourcing" style="width:100%;">
</div>
<div class="item borderimg">
<img src="ttps://i.postimg.cc/dDLwYnmJ/webdevelopment.jpg" alt="webdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/K1T6YHRy/applicationdevelopment.png" alt="applicationdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/gn105QC9/customersupport.jpg" alt="customersupport" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container login-box" style="position: relative;border-radius: 10%;">
<h1 class="login service-list" style="text-align: center;">Feedback here</h1>
<p class="login service-list labels">Name</p>
<input type="text" name="Name" placeholder="" id="usernm" required>
<p class="login service-list labels">Contact No</p>
<input type="password" name="password" placeholder="" id="contact" required>
<p class="login service-list labels">Message</p>
<input type="text" name="message" placeholder="" id="msg" required>
<input class="service-list" type="submit" name="submit" value="Submit" id="signupbut" class="login"></input>
</div>
<div class="container footer" style="position: relative;background-color: black;width: 100%;margin: 0;padding: 10px;">
<p style="color: white; font-size: 20px;text-align: center;">Made with <span>❤</span> by Vipul Tyagi</p>
</div>
</body>
</html>
EDIT
Although I have found the solution, but I still don't understand what was the issue? I have never seen such behaviour with top prperty!
Wrap your footer around a footer tag and use that tag to adjust the position on your page. The inline css i used is
margin-top: 50%;
I've added a js fiddle for you as well. Take a look at this link:https://jsfiddle.net/zfhassaan/5syxnme1/1/
In the style of class="container footer" , you have used position as relative. So, you can add top: some pixels (for eg: top: 200px) to your style, to keep the footer where ever you want.
For reference: https://www.w3schools.com/css/css_positioning.asp
I am trying to make a full screen layout using bootstrap 4, like this:
100% height and width
My issue is that the left and right column (between nav and footer) are not taking up the remaining space. Secondly I would need to center that content within the column. I have played around with giving those sections fixed heights of (90vh) but then I am writing a lot of workaround code for mobile/tablet. Is there any solution for this that I am missing, probably something painstakingly obvious!
Any help is appreciated, thanks!
body {
font-family: 'Montserrat', sans-serif;
background-color: #fcfcfc;
}
.navbar-colored{
background-color: rgba(255,255,255,0.9) !important; /*#94a7b7*/
box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1.0s;
}
.nav-item {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1.1s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.nav-item a {
color: rgba(17,17,17,0.85);
}
.cart-icon {
padding-right: .75rem;
}
.cart-icon strong {
border-radius: 0;
font-weight: bold;
margin: .3em 0;
border: 2px solid #446084;
color: #0062A8;
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
font-size: 1em;
}
.navbar{
position:fixed;
width:100%;
background color: transparent;
z-index:10;
flex-wrap: nowrap;
padding: 0.8rem 1.0rem;
}
.navbar-light .navbar-toggler {
border:none;
}
.row .no-pad {
margin-left: 0px;
}
.color-img-col {
padding-left: 20px;
padding-right: 20px;
}
.col-right {
background-color: #e6e6e6;
padding-left: 4%;
padding-right: 4%;
}
.col-left {
background-color: #fcfcfc;
}
.col-lg-4 .steps-small li {
padding-top: 10px;
}
.builder-color-img {
max-width: 80%;
}
.left-content {
margin-left: 9vw;
width: 72%;
}
[data-attribute-link] {
cursor: pointer;
}
.builder-checkout {
background-color: #0062a86b /*#7e94a78c*/;
}
.product-gallery {
background-color: #e6e6e6;
}
/*Builder Main Header / Navigation*/
.builder-header h1 {
font-size: 30px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
color: #202020;
padding-bottom: 17px;
}
.builder-header hr {
color: #9b9b9b;
margin-top: 0px;
margin-bottom: 0px;
}
h2.builder-step-title {
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-style: italic;
color: #202020;
padding-top: 40px;
}
.steps-small {
padding-bottom: 25px;
}
.steps-small ul {
list-style-type: none;
overflow: hidden;
padding-left: 0px;
cursor: pointer;
}
.steps-small .active {
color: #0062A8;
font-weight: 500;
}
.steps-small :hover {
color: #0062A8;
}
.steps-small li {
float: left;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
color: #8a8a8a;
padding-right: 10px;
}
.steps-small img {
width: 20px;
height: 10px;
padding-left:5px;
padding-right:3px;
}
/*Builder Bar*/
.review-bar {
background-color: #0062a8d9 /*#94a7b7*/;
color: white;
text-transform: uppercase;
padding-left: 9vw;
}
.picker-header {
float:left;
font-weight: 200;
font-size: 15px;
padding-left: 7px;
}
span[data-product-attribute-variation-result] {
font-weight: 500;
font-size: 15px;
padding-left: 5px;
}
.pa_color, .pa_neck, .pa_hem, .pa_size, .pa_body, .builder-checkout {
padding-top: 3.5vh;
padding-bottom: 3.5vh;
cursor: pointer;
}
.review-bar .pa_color:hover, .review-bar .pa_neck:hover, .review-bar .pa_hem:hover, .review-bar .pa_size:hover, .review-bar .pa_body:hover {
/*box-shadow: inset 0 0 10px #0062A8;*/
box-shadow: 0 0 8px #0062A8;
}
.builder-checkout:hover {
box-shadow: inset 0 0 10px #0062A8;
}
/*color Screen*/
.white-color-btn, .black-color-btn, .navy-color-btn, .grey-color-btn {
height: 30px;
width: 30px;
border-radius: 30px;
border:1px solid black;
}
/*Next Button*/
.next-btn {
font-size: 14px;
border-radius: 30px;
padding: 15px 50px 15px 50px;
font-weight: 200;
color: #202020;
border: 1px solid #202020;
}
.next-btn:hover {
background-color: #202020;
color: white;
}
.next-btn img {
width: 26px;
height: 10px;
padding-left:10px;
}
.review-bar img {
width: 15px;
height: 15px;
float: left;
margin-top: 3px;
}
.next-btn:hover {
color: white;
}
.image-gallery {
display: flex;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
overflow-y: scroll;
}
.image-gallery img {
padding: 20px 0px;
}
.carousel-indicators li {
text-indent: 0px;
}
.selection-button-top {
padding-top: 50px;
padding-left: 0px;
}
.selection-button-bottom {
padding-bottom: 50px;
padding-top: 30px;
padding-left: 0px;
}
.selection-button {
padding-top: 30px;
padding-left: 15px;
padding-left: 0px;
}
.circle-btn {
border-radius: 30px;
height: 30px;
width: 30px;
text-indent: 40px;
cursor: pointer;
background-color: transparent;
color: #202020;
border: 1px solid #202020;
}
.circle-btn:hover {
border: 1px solid #3ca0e7;
font-weight: 500;
background-color: #202020;
}
.container-fluid .review-bar {
-webkit-overflow-scrolling: touch;
}
.nav-link {
padding: .5rem;
position: relative;
text-decoration: none;
cursor: pointer;
margin-left: 2rem;
margin-right: 2rem;
}
.nav-link:hover {
font-weight: 500;
}
.nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #0062A8;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.steps-small li {
padding-top: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="buildertwo.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,500i|Poppins:400,500" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<title>OneTee Builder 2.0</title>
</head>
<body>
<nav class="navbar navbar-light">
<button class="navbar-toggler x-button" type="button" data-toggle="collapse" data-target="#navbarsmall" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="x-icon"><span></span><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarsmall">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sizing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shipping</a>
</li>
</ul>
</div>
<div class="cart-item has-icon">
<a href="https://onetee.shop/cart/" title="Cart" class="header-cart-link is-small">
<span class="cart-icon image-icon">
<strong>0</strong>
</span>
</a>
</div>
</nav>
<div id="carouselBuilder" class="carousel slide carousel-fade" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" data-product-attribute="pa_color" data-slide-number="1">
<div class="container-fluid">
<div class="row main-row align-items-center">
<div class="col-sm-12 col-lg-6 col-left">
<div class="left-content">
<div class="builder-header no-sm-mobile">
<h1>Build your shirt</h1>
<div class="steps-small">
<ul>
<li data-target="#carouselBuilder" data-slide-to="0" class="active">Color<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="1">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
</ul>
</div>
<hr>
</div>
<h2 class="builder-step-title">Step 1. Select Your Colour</h2>
<div class="selection-button-top">
<button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="black">black</button>
</div>
<div class="selection-button-bottom">
<button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="white">white</button>
</div>
<button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="1">Next<img src="next.png" class="next-arrow" alt="next" /></button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
<div class="right-content">
<img class=" img-fluid" alt="Responsive image" src="black.png">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-product-attribute="pa_neck" data-slide-number="2">
<div class="container-fluid">
<div class="row main-row align-items-center">
<div class="col-sm-12 col-lg-6 col-left">
<div class="left-content">
<div class="builder-header no-sm-mobile">
<h1>Build your shirt</h1>
<div class="steps-small">
<ul>
<li data-target="#carouselBuilder" data-slide-to="0">Color<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="1" class="active">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
</ul>
</div>
<hr>
</div>
<h2 class="builder-step-title">Step 2. Select Your Neck Line</h2>
<div class="col-12 selection-button-top">
<button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="crew">crewneck</button>
</div>
<div class="col-12 selection-button-bottom">
<button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="v-neck">vneck</button>
</div>
<button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="2">Next<img src="next.png" class="next-arrow" alt="next" /></button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
<div class="right-content">
<img class=" img-fluid neck-img" alt="Responsive image" src="v-neck-black.png">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="container-fluid review-bar">
<div class="row flex-row flex-nowrap">
<div class="pa_color col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="0">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Colour:<span data-product-attribute-variation-result="">Black</span>
</div>
</div>
<div class="pa_neck col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="1">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Neck:<span data-product-attribute-variation-result="">Crew</span>
</div>
</div>
<div class="pa_hem col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="2">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Hem:<span data-product-attribute-variation-result="">Straight</span>
</div>
</div>
<div class="pa_size col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="3">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Size:<span data-product-attribute-variation-result="">L</span>
</div>
</div>
<div class="pa_body col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="4">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Body:<span data-product-attribute-variation-result="">Slim</span>
</div>
</div>
<div class="builder-checkout col-4 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="5">
<div class="picker-header">Checkout
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/boostrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="buildertwo.js"></script>
</body>
</html>
I hope this helps. This is a really simple explanation, but I trust that you can implement this into your code. The problem with your columns is that they are not the correct height. They are too short, so even after the review bar is added under the columns, there is still a bunch of space.
This is how I would solve it. you can use the calc() function built in css. You can see me using it in my solution below. If you know the height of the review-bar ahead of time, you can just subtract that from 100vh or 100% (I'm using 100vh).
I'm assuming that the review bar is 50px, but of course, it can be different. This implementation works with any screen size. If you run the snippet, go full screen, and adjust the screen size, you'll see the top-content will adjust itself and push the review bar to the bottom.
So try to implement this into your code and see if it works! If it doesn't I'll keep trying to help. And if this is not the solution you're looking for, I apologize.
Also, welcome to Stack Overflow! It says here that you're a new user.
* {
margin: 0;
padding: 0;
}
.top-content {
width: 100%;
height: calc(100vh - 50px);
background-color: blue;
}
.review-bar {
width: 100%;
height: 50px;
background-color: green;
}
<div class='top-content'>
This content here would be your two columns
</div>
<div class='review-bar'>
This, of course, would be your review bar
</div>
As per the below code, by default home tab is showing blank. Content will display below when we click on product ordering tab. I have written this code in Javascript. But when i tried to convert these into bootstrap im struggling more to create this.
Anybody can help to resolve this?
<!DOCTYPE>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<link type="text/css" rel="stylesheet" media="all" href="images/style.css" />-->
<style>
.wrapper {
margin: 0px auto 0px auto;
padding: 3px 0px 0px 0px;
width: 100%;
}
.container{
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 900px;
height: 500px;
background-color: white;
border: 1px solid green;
}
.clear{
clear: both;
}
.menu_container{
margin: 0px;
padding: 0px;
width: 900px;
}
.middle_container{
margin:0px;
padding:0px;
width: 900px;
}
.middle_container_left{
margin:0px;
padding:0px;
width: 300px;
height: 246px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
float:left;
}
.middle_container_right{
margin:0px 0px 0px 10px;
padding:0px;
width: 580px;
height: 300px;
/*border: 1px solid black;*/
float:left;
}
.menu_font{
margin: 0px 5px 0px 0px;
width: 100px;
height:30px;
float:left;cursor:hand;
text-align:center;
padding-top:5px;
font-weight:bold;
background-color: #8eaf64;
border-radius:5px 5px 0 0;
color: white;
}
.menu_font:hover{
margin: 0px 5px 0px 0px;
width: 100px;
height:30px;
float:left;cursor:hand;
text-align:center;
padding-top:5px;
font-weight:bold;
color: white;
background-color:#64A70B !important;
border-radius:5px 5px 0 0;
}
.onoffswitch {
position: relative; width: 63px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 6px;
background-color: #85a857; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 2px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 30px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: -4px;
bottom: 0;
right: 26px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: -5px;
}
.green{
color: green;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
function show_menu(elementId) {
document.getElementById("home").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById(elementId).style.display="block";
}
function show_left_menu(elementId) {
document.getElementById("quick_add").style.display="none";
document.getElementById("solution_builder").style.display="none";
document.getElementById("bulk_load").style.display="none";
document.getElementById("product_search").style.display="none";
document.getElementById("saved_cart").style.display="none";
document.getElementById("view_favorites").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
</head>
<body>
<div class="wrapper">
<div class="container">
<h2 align="center">Demo</h2>
<div class="menu_container">
<div class="menu_font" onclick="show_menu('home');">Home</div>
<div class="menu_font" onclick="show_menu('id2');">Product Ordering</div>
<div class="clear"></div>
</div>
<div class="middle_container">
<div id="home" style="height: 300px;"></div>
</div>
<div class="middle_container" id="id2" style="display:none">
<div class="middle_container_left">
<ul style="list-style-type: none;margin:0px;padding:0px;">
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('quick_add');">Quick Add</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('solution_builder');">Solution Builder</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('bulk_load');">Bulk Load</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('product_search');">Product Search</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('saved_cart');">Saved Cart</li>
<li style="padding:10px;height:20px;" onclick="show_left_menu('view_favorites');">View Favorites</li>
</ul>
</div>
<div class="middle_container_right" id="quick_add">
<h2>Quick Add:</h2>
<table cellpadding="0" cellspacing="0" style="width: 300px;">
<tr>
<td>Item Name:</td>
<td>
<input list="product_name" name="item_name">
<datalist id="product_name">
<option value="112-800-00000">
<option value="112-700-00000">
<option value="700-800-00000">
<option value="100-800-00000">
<option value="900-800-00000">
<option value="600-800-00000">
<option value="08000BK07045">
<option value="08000BK04045">
<option value="08000BK06045">
</datalist>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row col-xs-12 col-sm-12 ">
<div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div>
<div class="onoffswitch dispinline ">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td>Quantity:</td>
<td><input type="textbox" name="Quantity"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
</table>
</div>
<div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div>
<div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div>
<div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div>
<div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div>
<div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
MY Bootstrap code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs > li > a { border: none; color: #666; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
.nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }
body{ background: #EDECEC; padding:50px}
</style>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<!--<div class="container-fluid text-center"> -->
<div class="container">
<div class="row content">
<div class="col-sm-2 sidenav" style="border: 1px solid red;">
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-8 text-left">
<h1 style="text-align: center;">DEMO</h1>
<div class="row">
<div class="col-md-6" style="border: 1px solid red;width:100%;">
<!-- Nav tabs --><div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<!--<li role="presentation">Messages</li>
<li role="presentation">Settings</li>-->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"></div>
<div role="tabpanel" class="tab-pane" id="profile"><h2>Quick Add:</h2>
<table cellpadding="0" cellspacing="0" style="border: 1px solid red;">
<tr>
<td>Item Name:</td>
<td>
<!--<input list="product_name" name="item_name">
<datalist id="product_name">
<option value="112-800-00000">
<option value="112-700-00000">
<option value="700-800-00000">
<option value="100-800-00000">
<option value="900-800-00000">
<option value="600-800-00000">
<option value="08000BK07045">
<option value="08000BK04045">
<option value="08000BK06045">
</datalist>-->
<div class="col-sm-10">
<input class="form-control" type="text" id="sm">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row col-xs-12 col-sm-12 ">
<div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div>
<!--<div class="onoffswitch dispinline ">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>-->
<input type="checkbox" checked data-toggle="toggle">
</div>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td>Quantity:</td>
<td><input type="textbox" name="Quantity"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
</table>
</div>
<!--<div role="tabpanel" class="tab-pane" id="messages"></div>
<div role="tabpanel" class="tab-pane" id="settings"></div>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Not even sure where to start here. But one main cause for unexpected display results may be that bootstrap-toggle.min.css is after your embedded styling so the default bootstrap CSS will override your custom styling which I am assuming is the opposite to what you are trying to do.
i dont know exactly what your saying but you could just line for line convert it by hand to a seperate language thats compatable, im sure theres a better way to do this but this is how i personaly do it.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 6 years ago.
I am unable to vertically align my form, literally tried everything.
margin, vertical-align, height, position - tried applying everything but nothing seems to work.
Here is the html and css that i am using.
html{
position: relative;
background-color: #e1e8f0;
font-size:62.5%;
margin: 0px;
padding: 0px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
height: 500px;
}
.navbar{
border: none;
}
body{
background-color: #e1e8f0;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
position: relative;
height: 500px;
width: device-width;
}
.signup{
position: relative;
height: 100%;
width: 50%;
margin: auto auto;
margin-left: 50%;
font-size: 1.6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border: 1px solid black;
}
.signup input{
margin:20px;
text-decoration: none;
border: 1px solid #e4e6e8;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border-radius: 5px;
padding: 2px;
}
.message{
width: 50%;
float: left;
overflow: hidden;
}
.message pre{
overflow: hidden;
}
.center{
position: relative;
width: 80%;
height: 70%;
margin: auto auto;
border: 1px solid black;
}
table{
height: 100%;
margin: auto auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">
</head>
<body>
<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
</div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="color:#fff;" >WHO</a></li>
<li><a href="#" style="color:#fff;" >Sign up</a></li>
<li><a href="#" style="color:#fff;" >Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="signup">
<div class="center">
<form action="#" method="get">
<table border="black">
<tr>
<td><label for="emailId">Email id</label>
<td><input type="email" placeholder="you#example.com" id="emailId"></input><br>
</tr>
<tr>
<td><label for="password">Password</label>
<td><input type="password" placeholder="********" id="password"></input><br>
</tr>
<tr>
<td><label for="name">Name</label>
<td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
</tr>
<tr>
<td></td>
<td><button type="submit" class="btn btn-primary">Sign Up</button></td>
</tr>
</table>
</form>
</div>
Try below:
Vertical-align will works with display:table;
html{
position: relative;
background-color: #e1e8f0;
font-size:62.5%;
margin: 0px;
padding: 0px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
height: 500px;
}
.navbar{
border: none;
}
body{
background-color: #e1e8f0;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
position: relative;
height: 500px;
width: device-width;
}
.signup{
position: relative;
height: 100%;
width: 100%;
display:table;
margin: auto auto;
font-size: 1.6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border: 1px solid black;
}
.signup input{
margin:20px;
text-decoration: none;
border: 1px solid #e4e6e8;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border-radius: 5px;
padding: 2px;
}
.message{
width: 50%;
float: left;
overflow: hidden;
}
.message pre{
overflow: hidden;
}
table{
height: 100%;
margin: auto auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">
</head>
<body>
<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
</div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="color:#fff;" >WHO</a></li>
<li><a href="#" style="color:#fff;" >Sign up</a></li>
<li><a href="#" style="color:#fff;" >Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="signup">
<form action="#" class="center-block" method="get">
<table border="black">
<tr>
<td><label for="emailId">Email id</label>
<td><input type="email" placeholder="you#example.com" id="emailId"></input><br>
</tr>
<tr>
<td><label for="password">Password</label>
<td><input type="password" placeholder="********" id="password"></input><br>
</tr>
<tr>
<td><label for="name">Name</label>
<td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
</tr>
<tr>
<td></td>
<td><button type="submit" class="btn btn-primary">Sign Up</button></td>
</tr>
</table>
</form>
</div>
EDIT:
Yes. use center-block class of bootstrap.
you have to apply style to the form
<style>
form {
margin: 15% 40% 0;
}
</style>
Few Solutions:
You can use flex and it's properties (justify-content and align-items) like vertical-align and add these lines to every parent of a child that you want to align vertically (e.g.: .center)
.center {
display:-webkit-flex;
display:flex;
align-items:center;
justify-content:center;
}
If you don't like the flex solution, you can set the parent's position to "relative" (position:relative;), and insert this code to the child:
.center {
position:relative;
}
.center table {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
Hope it was helpful =]