See screenshots for what I am trying to achieve.
https://imgur.com/jaOmFnz
https://imgur.com/aRxile9
The menu list items (My application, Register, Login) I want to move to the far right of the screen. I have tried messing with the margins, float:right, however still cannot get this to work.
The container div spans the full width. Would I need to amend this div?
I've created a codeped to illustrate this
https://codepen.io/jquerypain121/pen/OJNaWpa
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log in - PhotoUploaderForm</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-white border-bottom box-shadow mb-3">
<div class="container">
<img src="https://lh3.googleusercontent.com/proxy/HQAE10KQ0NmS9htB5BKSoN24jWvyaizAKwhGy8hNVVsCbFUubvDdLSsYB8xWbN3JUDzDuAzw0OxKO5QZyL_XPqitq1wcSYaMVJ35_oC48c4FKZYykJUoucS-LJT1" width="200" title="title" alt="additional title">
<a class="navbar-brand" href="/">My Application</a>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class=" moveright nav navbar-nav">
<a class="navbar-brand" href="/">My Application</a>
<li class="nav-item">
<a class="nav-link text-dark" id="register" href="/Identity/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" id="login" href="/Identity/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<main role="main" class="pb-3">
<h1>Log in</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post" action="/Identity/Account/Login" novalidate="novalidate">
<hr>
<div class="text-danger validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<div class="form-group">
<label for="Input_Email">Email</label>
<input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Input_Email" name="Input.Email" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label for="Input_Password">Password</label>
<input class="form-control" type="password" data-val="true" data-val-required="The Password field is required." id="Input_Password" name="Input.Password">
<span class="text-danger field-validation-valid" data-valmsg-for="Input.Password" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label for="Input_RememberMe">
<input type="checkbox" data-val="true" data-val-required="The Remember me? field is required." id="Input_RememberMe" name="Input.RememberMe" value="true">
Remember me?
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" formaction="/Identity/Account/Login?returnUrl=%2F">Log in</button>
<input type="hidden" id="ReturnUrl" name="ReturnUrl" value="/">
</div>
<div class="form-group">
<p>
Register as a new user
</p>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8PEcG7qoomVJk-wiZaqy0p6b5tfvXZTuVH-9YakoOKQQf8mWfBn4MYD7BCb3YKL_NmEz_Ru57zD8PV8Tq_6ea5WApccwrpwYrOkBdu7Qu9Z6NMycGCHqDTI35Ci1mPMVQSqyQ47sNdvfhZhfkMSx_DQ"><input name="Input.RememberMe" type="hidden" value="false"></form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
</div>
</div>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
<p style="float:left;color: white;">© 2020 - Leicestershire Health Informatics Service -</p>
<a style="float:right; margin-right: 10px;" href="/Home/Privacy">Privacy</a>
<a style="float:right;margin-right: 10px;" href="/Home/Information">Info</a>
<a style="float:right;margin-right: 10px;" href="/Home/TermsAndConditions">T&C</a>
</div>
</footer>
</body></html>
Any help would be appreciated, thanks
you don't need to customize the code. Bootstrap has it's own design which you want to achieve. For your reference https://getbootstrap.com/docs/4.5/components/navbar/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">
<img src="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
My Application
</a>
<div class="form-inline">
<a class="nav-link text-dark" href="">My Application</a>
<a class="nav-link text-dark" id="register" href="/Identity/Account/Register">Register</a>
<a class="nav-link text-dark" id="login" href="/Identity/Account/Login">Login</a>
</div>
</nav>
Instead of writing moveright in your ul class list, write ml-auto. This should move the list to the right.
Make the width of the nav 100%
and then make the ul float: right;
Hope it will work for you
Related
This question already has answers here:
Full width tabs using Bootstrap (Support IE)
(9 answers)
Closed 2 years ago.
How can I make those two tabs of login and create account equally spaced and centered as given in the picture? I am only able to get them in the left corner and the tabs take up only as long as the text inside (as given in 2nd image). I want to make the tabs look like this:.
Sample Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a href="#login" id="tab1" class='nav-link active' aria-controls="login" aria-selected='true' role="tab" tabindex=1 data-toggle='tab'>LOGIN</a>
</li>
<li class="nav-item">
<a href="#create-account" id="tab2" class='nav-link' aria-controls="create-account" aria-selected='false' role="tab" tabindex=0 data-toggle='tab'>CREATE ACCOUNT</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane active" id="login" role="tabpanel" aria-labelledby="tab1" aria-hidden='false'>
<!-- Addition of Form 1 -->
<form class="d-flex flex-column">
<div class="form-group">
<label for="exampleInputEmail1">Email address <span class='required'>*</span></label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password <span class='required'>*</span></label>
<div class="input-group d-flex flex-row">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<i href='#' class='bi bi-eye-fill ml-2'></i>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-hover btn-orange rounded-0">SIGN IN</button><br>
<button type="submit" class="btn btn-hover btn-default2 rounded-0">FORGOT YOUR PASSWORD?</button>
</form>
</div>
</body>
</html>
Per the docs, use the nav-fill class.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
<li class="nav-item">
<a href="#login" id="tab1" class='nav-link active' aria-controls="login" aria-selected='true' role="tab" tabindex=1 data-toggle='tab'>LOGIN</a>
</li>
<li class="nav-item">
<a href="#create-account" id="tab2" class='nav-link' aria-controls="create-account" aria-selected='false' role="tab" tabindex=0 data-toggle='tab'>CREATE ACCOUNT</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane active" id="login" role="tabpanel" aria-labelledby="tab1" aria-hidden='false'>
<!-- Addition of Form 1 -->
<form class="d-flex flex-column">
<div class="form-group">
<label for="exampleInputEmail1">Email address <span class='required'>*</span></label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password <span class='required'>*</span></label>
<div class="input-group d-flex flex-row">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<i href='#' class='bi bi-eye-fill ml-2'></i>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-hover btn-orange rounded-0">SIGN IN</button><br>
<button type="submit" class="btn btn-hover btn-default2 rounded-0">FORGOT YOUR PASSWORD?</button>
</form>
</div>
I have a box on the left and a big div i want to wrap them with a border with a light color. I want the borter to be of square shape. How can i do this. I have also added the style of the progress bar incase if it helps. I want a border box with shade around the progress bar circle. I am using bootstrap version 4
border pic
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
I just add few CSS, I hope it'll help you out. Thanks
.light-border {
border: 1px solid #ccc;
}
and add light-border in <div class="row light-border">.
.light-border {
border: 1px solid #ccc;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row light-border">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
I have the following login page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>
And my problem is that the login form is not too center as I want to as this image shows.
What I want to do is to display like that:
So do you know how to move the whole login form towards the center I tried the bootstrap's d-flex align-items-center justify-content-center class combination and somehow it does center but the flexbox is as height as my login form.
So my guess is on how I can make the flexbox take over the whole remaining height. DO you know how to do that?
You should give height to your container-fluid div in view-port
height: calc(100vh - 60px);
60px is your header height (View in full-screen mode of snippet)
.custom {
height: calc(100vh - 60px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="custom container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>
When I load my website homepage on a mobile device there is an ability to move the screen left and right, if I move it left it bounces back into place, but if I move it right it bounces back but will leave about 5px margin of white space throughout the entire webpage container except for the navbar. I have no content that is pushing the website width or margin-right. I am using bootstrap, i will upload a code snippet but the best way to see the issue is going to the website, it also only shows up on mobile devices, I don't have the problem when testing mobile view with google chrome mobile view. This problem only occurs on my homepage webpage, no other webpage has the problem.
Website link: http://buildingims.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#0054a5" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#333">
<title>Inspection Software for the Professional - Link Inspect Pro</title>
<link rel="shortcut icon" href="assets/img/favicon.ico?v=3">
</head>
<body>
<div id="ms-preload" class="ms-preload">
<div id="status">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
</div>
<div class="ms-site-container">
<div class="modal modal-primary" id="ms-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header d-block shadow-2dp no-pb">
<button type="button" class="close d-inline pull-right mt-2" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> <i class="zmdi zmdi-close"></i> </span>
</button>
<div class="modal-title text-center">
<a href="index.html">
<img alt="The Best Home Inspection Software" src="assets/img/logo.png" style="height: 50px; width:350px;" />
</a>
<!-- <span class="ms-logo ms-logo-white ms-logo-sm mr-1">LIP</span> <h3 class="no-m ms-site-title">Link Inspect <span>Pro</span> </h3> -->
</div>
<div class="modal-header-tabs">
<ul class="nav nav-tabs nav-tabs-full nav-tabs-2 nav-tabs-primary" role="tablist">
<li class="nav-item" role="presentation">
<i class="zmdi zmdi-account"></i> Login
</li>
<!-- <li class="nav-item" role="presentation"> <i class="zmdi zmdi-account-add"></i> Register </li>-->
<li class="nav-item" role="presentation">
<i class="zmdi zmdi-key"></i> Account Recovery
</li>
</ul>
</div>
</div>
<div class="modal-body">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active show" id="ms-login-tab">
<form autocomplete="off">
<fieldset>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-account"></i> </span>
<label class="control-label" for="ms-form-user">Email</label>
<input type="text" id="ms-form-user" class="form-control" required>
</div>
</div>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-lock"></i> </span>
<label class="control-label" for="ms-form-pass">Password</label>
<input type="password" id="ms-form-pass" class="form-control" required>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox">Remember Me</label>
</div>
</div>
<div class="col-md-6">
<button class="btn btn-raised btn-primary pull-right">Login</button>
</div>
</div>
</fieldset>
</form>
<div class="text-center">
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="ms-recovery-tab">
<form>
<fieldset>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-email"></i> </span>
<label class="control-label" for="ms-form-email-re">Email</label>
<input type="email" id="ms-form-email-re" class="form-control" required/>
</div>
</div>
<button class="btn btn-raised btn-block btn-primary">Send Password</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<header class="ms-header ms-header-primary">
<div class="container container-full">
<div class="ms-title">
<a href="index.html">
<img alt="Link Inspect Pro Best Inspection Software" src="assets/img/logo.png" style="height:45px; width:350px;" />
</a>
</div>
<div class="header-right">
</div>
</div>
</header>
<nav class="navbar navbar-expand-md navbar-static ms-navbar ms-navbar-primary">
<div class="container container-full">
<div class="navbar-header" style="max-width:280px;">
<a class="navbar-brand" href="index.html">
<img alt="The Best Inspection Software 2018" src="assets/img/logo.png" style="width:100%; height:70%; " />
</a>
</div>
<div class="collapse navbar-collapse" id="ms-navbar">
<ul class="navbar-nav">
<li class="nav-item"> About Us
</li>
<li class="nav-item"> Features
</li>
<li class="nav-item dropdown"> Industry <i class="zmdi zmdi-chevron-down"></i>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="inspection-home.html">Home Inspection</a>
</li>
<li>
<a class="dropdown-item" href="inspection-compliance.html">Compliance Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Commercial Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Environmental Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Insurance Inspection</a>
</li>
</ul>
</li>
<li class="nav-item"> Contact
</li>
<li class="nav-item"> Login
</li>
<li class="nav-item">
Free Trial
</li>
</ul>
</div>
<a href="javascript:void(0)" class="ms-toggle-left btn-navbar-menu"> <i class="zmdi zmdi-menu"></i>
</a>
</div>
</nav>
<header class="ms-hero-page ms-hero-img-keyboard ms-hero-bg-dark color-white">
<div class="container index-1">
<div class="row">
<div class="col-lg-12">
<h1 class="text-uppercase typed-title">Inspection Software for the Professional <br><span class="color-primary typed-class"></span> </h1>
<p class="lead lead-sm color-light">Link Inspect Pro is a cloud based, comprehensive software that allows you to perform inspections, create reports, and keep your company organized.</p>
<ul class="ms-list-arrow">
<li>High-Speed servers and performance.</li>
<li>Comprehensive Software.</li>
<li>Professional Reports.</li>
<li>Perform Inspections.</li>
</ul>
</div>
<div class="col-lg-12 text-center">
Sign Up for Free Trial
Become a Network Inspector
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-center ms-margin">
<a href="javascript:void(0)" class="btn btn-primary btn-raised btn-app" style="width:20%; min-width:200px">
<div class="btn-container"> <i class="fab fa-google-play"></i> <span style="text-transform:uppercase;">Get it on</span>
<br><strong>Google Play</strong>
</div>
</a>
<a href="javascript:void(0)" class="btn btn-primary btn-raised btn-app" style="width:20%; min-width:200px">
<div class="btn-container"> <i class="fa fa-apple"></i> <span>Download on the </span>
<br><strong>App Store</strong>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<section>
<h1 class="right-line">Features</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-cloud"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Cloud Hosting</h4>
<p>Hosted on AWS, data is synced and stored through the cloud so you can access all your data on any device with any network at any location.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-clipboard"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Professional Reports</h4>
<p>Sleek & Professional reports can be customized to ones own preference. As well as, delivere the report directly to the customer without ever leaving the site.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-tablet"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Mobile and Tablet Apps</h4>
<p>Link Inspect Pro apps for mobile devices allow seemless inspections to be done on site. Making inspections not only easy but quicker.</p>
</div>
</div>
</div>
</div>
<h1 class="right-line">Inspections</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-1">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-shield"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Request Inspection</h4>
<p>Never lose any information again with lead and quote tNever lose any information again with lead and quote tNever lose any information again with lead and quote t</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-1">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-bars"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Find an Inspector</h4>
<p>Never lose any information again with lead and quoteNever lose any information again with lead and quote tNever lose any information again with lead and quote t.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-cog"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Inspector Network</h4>
<p>Create and edit templates, contract language, contactNever lose any information again with lead and quote tNever lose any information again with lead and quote t</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="wrap wrap-mountain">
<div class="container">
<h2 class="text-center text-light mb-6">Inspection Software created with <strong>You</strong> in Mind</h2>
<div class="row">
<div class="col-lg-6 order-lg-2 mb-4 center-block">
<img src="assets/img/demo/mock.png" alt="Link Inspect Pro Best Inspection Software" class="img-fluid center-block" style="max-height:400px">
</div>
<div class="col-lg-6 order-lg-1 pr-6">
<div class="text-center"> Learn More about LIP <i class="zmdi zmdi-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-6 mb-1">
<h2 class="text-center text-dark mb-6">Inspector Network</h2>
<div class="row">
<div class="col-lg-6 order-lg-2 pr-6">
</div>
<div class="col-lg-6 order-lg-1 mb-4 center-block">
<img src="assets/img/demo/mock.png" alt="Link Inspect Pro Best Inspection Software" class="img-fluid center-block" style="max-height:400px">
</div>
</div>
</div>
<style>
.trial-block{background: url(assets/img/black_wall.png) no-repeat fixed; background-size: cover; background-position: center center !important; padding: 80px 0;}.trial-form-block{background: #fff; border-radius: 4px; margin: 0 auto; max-width: 600px; padding: 35px; width: 100%;}
</style>
<section id="free-trial">
<div class="trial-block">
<div class="trial-form-block">
<div class="text-center">
<h2>Link Inspect Pro Trial</h2>
<p>Use Link Inspect Pro Software for 30 days or complete 3 inspections before subscribing</p>
</div>
<form action="https://linkinspectpro.com/users/registration" method="post" accept-charset="utf-8" name="registration_form" id="registration_form">
<div class="row">
<div class="col-sm-6">
<div class="form-group row label-floating">
<label class="control-label" for="firstname">First Name</label>
<input type="text" name="firstname" value="" id="firstname" class="form-control" maxlength="50" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="lastname">Last Name</label>
<input type="text" name="lastname" value="" id="lastname" class="form-control" maxlength="50" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="email">Email</label>
<input type="text" name="email" value="" id="email" maxlegth="150" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="password">Password</label>
<input type="password" name="password" value="" id="password" maxlength="40" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="passconf">Confirm Password</label>
<input type="password" name="passconf" value="" id="passconf" maxlength="40" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="mobile_number">Phone Number</label>
<input type="number" (keypress)="checkIfNumber($event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="mobile_number" value="" id="mobile_number" class="form-control" maxlength="12" required/>
</div>
<div class="form-group row" style="margin-top:1px">
<select name="timezone" id="timezone" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group row" style="margin-top:6px">
<select id="country" name="country" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
<option value="" disabled selected>Please Select a Country</option>
<option value="227">United States</option>
<option value="39">Canada</option>
</select>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="address1">Address 1</label>
<input type="text" name="address1" value="" id="address1" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="address2">Address 2</label>
<input type="text" name="address2" value="" id="address2" class="form-control" />
</div>
<div class="form-group row label-floating">
<label class="control-label" for="city">City</label>
<input type="text" name="city" value="" id="city" class="form-control" required/>
</div>
<div class="form-group row" style="margin-top:4px">
<select name="state" id="state" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
<option value="" disabled selected>Please Select a State</option>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="zipcode">Zipcode</label>
<input type="text" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="zipcode" value="" id="zipcode" class="form-control" maxlength="10" required/>
</div>
</div>
</div>
<div class="checkbox text-center" style="margin-top:20px;">
</div>
<div class="text-center" style="margin-top:19px;">
<button name="mysubmit" type="submit" id="mysubmit" title="Start Trial" class="btn btn-warning btn-raised mr-1" value="submit">Start Trial</button>
</div>
</form>
</div>
</div>
</section>
<section class="pricing-table">
<div class="container">
<div class="block-heading">
<h1>Payment Plan</h1>
<p>Subscribe for unlimited benefits.</p>
</div>
<div class="row no-gutters">
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<div class="price-table price-table-info center prominent">
<div class="item"> <div class="ribbon">Subscribe</div>
<header class="price-table-header">
<h3> <sup>$</sup>30.00 <sub>/mo.</sub> </h3>
</header></div>
<div class="price-table-body">
<ul class="price-table-list">
<li> Cloud hosting and synchronization.<i class="fas fa-check" style="float: right;"></i></li>
<li> 3 free inspections included.<i class="fas fa-check" style="float: right;"></i></li>
<li> Create custom inspection workflows.<i class="fas fa-check" style="float: right;"></i></li>
<li> 2GB storage.<i class="fas fa-check" style="float: right;"></i></li>
<li> Additional inspections only $10 each.<i class="fas fa-check" style="float: right;"></i></li>
</ul>
<div class="text-center">
Buy now
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<aside class="ms-footbar">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 ms-footer-col">
<div class="ms-footbar-block text-center">
<div class="ms-footbar-block">
<div class="ms-footbar-title">
<ul class="list-inline">
<li class="list-inline-item">
Home
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
About
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Features
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Contact
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Login
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Register
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 text-center text-md-center">
<ul class="list-inline">
<li class="list-inline-item">
Terms of Use
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Privacy Policy
</li>
</ul>
</div>
</div>
</div>
</aside>
<footer class="ms-footer">
<div class="container">
<p>© Copyright 2018. <br>All Rights Reserved by BIMS Corp</p>
</div>
</footer>
<div class="btn-back-top">
<a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised "> <i class="zmdi zmdi-long-arrow-up"></i>
</a>
</div>
</div>
<div class="ms-slidebar sb-slidebar sb-left sb-style-overlay" id="ms-slidebar">
<div class="sb-slidebar-container">
<header class="ms-slidebar-header">
<div class="ms-slidebar-login">
<i class="zmdi zmdi-account"></i> Login
<i class="zmdi zmdi-account-add"></i> Register
</div>
<div class="ms-slidebar-title">
<div class="ms-slidebar-t">
<h3>Link Inspect <span>Pro</span> </h3>
</div>
</div>
</header>
<ul class="ms-slidebar-menu" id="slidebar-menu" role="tablist" aria-multiselectable="true">
<li>
<a class="link" href="index.html">Home</a>
</li>
<li>
<a class="link" href="page-about.html">About Us</a>
</li>
<li>
<a class="link" href="page-features.html">Features</a>
</li>
<li class="card" role="tab" id="sch6">
<a class="collapsed" role="button" data-toggle="collapse" href="#sc6" aria-expanded="false" aria-controls="sc6">Industry</a>
<ul id="sc6" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch6" data-parent="#slidebar-menu">
<li>
<a class="dropdown-item" href="inspection-home.html">Home Inspection</a>
</li>
<li>
<a class="dropdown-item" href="inspection-compliance.html">Compliance Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Commercial Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Environmental Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Insurance Inspection</a>
</li>
</ul>
</li>
<li>
<a class="link" href="page-contact.html">Contact Us</a>
</li>
</ul>
<div class="ms-slidebar-social ms-slidebar-block">
<h4 class="ms-slidebar-block-title">Social Links</h4>
<div class="ms-slidebar-social">
</div>
</div>
</div>
</div>
</body>
</html>
only because you have a padding of 35px on the class .trial-form-block, you have to take care of it on mobile screens with smaller values using media queries
<body>
<nav class="navbar navbar transparent">
<div class="container-fluid logo">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" />
</a>
</div>
<ul class="nav navbar-nav navbar-right right font-top">
<li class="Buybtn-topright">
<button type="button" class="btn-link"> Buy now</button>
</li>
</ul>
</div>
</nav>
<div class="form" >
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="signup.php" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
Full Name<span class="req">*</span>
</label>
<input type="text" name="FuName" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
user name<span class="req">*</span>
</label>
<input type="text" name="username"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" name="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" name="password" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
c A Password<span class="req">*</span>
</label>
<input type="password" name="CPass" required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="signin.php" method="post" >
<div class="field-wrap">
<label>
username <span class="req">*</span>
</label>
<input name="username" id="username" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" name="password" id="password" required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button type="submit" name="submit" value="Login "class="button button-block"/>Login</button>
</form>
</div>
</div> </div>
<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- tab-content -->
</div>
</body>
</html>
I have the above code in html and when I look at in mobile version it looks like the desktop so it is not responsive. BUT what is making me confused is that for the FOOTER and HEADER I have the same exact code in the other pages and they are responsive? any suggestion?
Any chance you forgot to load Bootstrap CSS?
To enable responsiveness using twitter bootstrap, the <head> section of your HTML page should contain <meta name="viewport" content="width=device-width, initial-scale=1">.
As such, for a basic start up responsive twitter Bootstrap template, head over to the getting started twitter Bootstrap page.