I want to center a form containing two inputs(username and password):
<h2 align="center" >Authentication</h2>
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" align="center">
<label class="control-label col-sm-2" for="username">username<em>*</em></label>
<div class="col-sm-6">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">password<em>*</em></label>
<div class="col-sm-6">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
but when I run the page, the form isn't in the center of the page. I added in the style.css:
.form-horizontal{
display:block;
margin-left:auto;
margin-right:auto;
}
but that didn't work.
To center a div on the page, you need to set the width of your container, then apply margin:0 auto; to it and it will center left and right on the page.
.form-horizontal{
display:block;
width:50%;
margin:0 auto;
}
If you want to center text, just add text-center to the class of the div your text is in. Bootstrap will do the rest.
Edit 1
<div class="contact-form">
<h2 align="center" >Authentication</h2>
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" align="center">
<label class="control-label col-sm-2" for="username">username<em>*</em></label>
<div class="col-sm-6">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">password<em>*</em></label>
<div class="col-sm-6">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
</div>
Slim Hmidi Hi there, You were close with your class of .form-horizontal.
Using this will center the form in the middle of the page.
.center {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
You will just now need to adjust the col-sm-xx within the form to fill and work correctly at all screen sizes.
Here is a screenshot, the blue div that holds the form is centered horizontally.
Here is the form with the classes in the form changed to fill and work on all screen sizes.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>How to center a form using Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 300px;
padding-top: 15px;
background-color: darkorange;
}
.block2 {
min-height: 160px;
padding-top: 15px;
}
.center {
position: absolute;
/* top: 0;
bottom: 0; */
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12 block">
<div class="row col-xs-6 block2 bg-primary center">
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" >
<label class="control-label col-sm-3" for="username">username<em>*</em></label>
<div class="col-sm-8 col-xs-12">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="password">password<em>*</em></label>
<div class="col-sm-8 col-xs-12">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Wrap the whole form in <div class="container">your form HTML</div>.
Like this: http://codepen.io/anon/pen/pJLrOq. Code centers form container to the middle of a site. Edit a CSS and input text's classes to get the layout you want.
You can add text-align: center; in css .
Related
I am trying to create a login screen with 2 columns.
On large screens: Left column = login controls, right column = Image.
on small screens: Top column = image, bottom column = login controls.
It works as expected. like the screenshots below:
So far, it works well. However, I want the "Sign in" and the "Welcome" text to appear inside the image on the smaller screens.
To get an Idea on what I am trying to achieve, please look at this Website login page. They have done it:
https://demo.hasthemes.com/adomx-preview/light/login.html
Here is my code so far.
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
Forgot password
</div>
</div>
</div>
and this is my simple CSS.
<style>
.fullheight {
height: 100%;
min-height: 100%;
}
html,
body {
height: 100%;
}
.loginarea {
margin-top: 100px;
padding-right: 20px;
padding-left: 20px;
}
</style>
How can I make the Text lines flow into the image and the white area contain only the login boxes?
If you are using latest version of bootstrap i.e version 4 then you should use the d-* class as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
<div class="loginarea d-sm-none">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<div class="d-none d-sm-block">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
</div>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
Forgot password
</div>
</div>
</body>
</html>
this is as you expected
I am still new to web dev, and in the beginning stages of working on this project. My issue right now, is when resizing my display below 1200 pixels the content of my second form on the left side shifts. The content of the TEXT changes from 2 lines to 3 lines and makes the bottom section extend further that the right side. Trying to find a way to keep the content even across the bottom as the page resizes.
var toggle = function(){
var exists = document.querySelector("#existButton");
console.log(exists.innerHTML);
if(exists.classList.contains("btn-warning")){
exists.classList.remove("btn-warning");
exists.classList.add("btn-info");
exists.innerHTML = "copy";
//document.getElementById("#existButton").innerHTML = 'check'
} else {
exists.classList.remove("btn-info");
exists.classList.add("btn-warning");
exists.innerHTML="check";
//document.getElementById("#existButton").innerHTML = 'copy'
}
}
body{
background: repeating-linear-gradient(
to right,
#050210,
#050210 50px,
#271f41 50px,
#271f41 100px
)
}
.jumbotron {
margin-bottom: 0;
background-color: #cbd0d3;
}
.container .jumbotron{
border-radius: 0px;
}
.navbar{
margin-bottom: 0;
background-color: #44abe2;
margin-top: 30px;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar .navbar-default {
border-radius: 0px;
}
.navbar-default .navbar-brand{
color: white;
}
.automatic {
background-color: #6e8a99;
padding-bottom: 40px;
border-bottom-left-radius: 6px;
}
.manual {
background-color: #83929a;
padding-bottom: 40px;
border-bottom-right-radius: 6px;
}
<!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="bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Mailbox Creator</title>
</head>
<div class="container">
<nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Mailbox Management <span class="caret"></span>
<ul class="dropdown-menu">
<li>User Mailbox Management</li>
<li>Resource Mailbox Management</li>
<li>Mailbox Update Management</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Hello $username</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1 class="text-center">Mailbox Creator Pro</h1>
</div>
<!-- ***************************************** -->
<!-- ********** Automatic Forms ************* -->
<!-- ***************************************** -->
<div class="container">
<div class="row">
<div class="col-md-6 automatic">
<form>
<!-- <div class="form-group text-center">
<label><u>Automatic</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Automatic</u></h4>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="accountName">Account Name</label>
<div class="col-md-6">
<input class="form-control form-control-sm " type="text" name="accountNameAuto" value="" placeholder="Account number">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success btn-sm ">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="emailCheckAutomatic" style="min-width: 140px">Does account have email?</label>
<div class="col-md-6 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-info btn-sm mt-3">Check</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
<!-- ***************************************** -->
<!-- ********** Manual Form ***************** -->
<!-- ***************************************** -->
<div class="col-md-6 manual">
<form>
<!-- <div class="form-group text-center">
<label><u>Manual</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Manual</u></h4>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1 " for="accountName">Email</label>
<div class="col-md-5">
<input class="form-control form-control-sm " type="text" name="accountNameManual" value="" placeholder="Email">
</div>
<label class="col-md-2 col-form-label" for="accountName">Account</label>
<div class="col-md-2">
<input class="form-control form-control-sm" type="text" name="" value="" placeholder="S#">
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-success btn-sm">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1" for="emailCheckAutomatic">Email exist?</label>
<div class="col-md-5 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-4 mt-3">
<button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</button>
</div>
<div class="col-md-1 mt-3">
<button type="submit" class="btn btn-warning btn-sm" >Copy</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
</div><!-- End Row -->
</div>
</div><!-- End Container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>
</body>
</html>
Account Name is too long, so if you add a padding-right:0; to that element, it will have enough room.
Check my snippet in its full-page mode.
var toggle = function(){
var exists = document.querySelector("#existButton");
console.log(exists.innerHTML);
if(exists.classList.contains("btn-warning")){
exists.classList.remove("btn-warning");
exists.classList.add("btn-info");
exists.innerHTML = "copy";
//document.getElementById("#existButton").innerHTML = 'check'
} else {
exists.classList.remove("btn-info");
exists.classList.add("btn-warning");
exists.innerHTML="check";
//document.getElementById("#existButton").innerHTML = 'copy'
}
}
body{
background: repeating-linear-gradient(
to right,
#050210,
#050210 50px,
#271f41 50px,
#271f41 100px
);
}
.jumbotron {
margin-bottom: 0;
background-color: #cbd0d3;
}
.container .jumbotron{
border-radius: 0px;
}
.navbar{
margin-bottom: 0;
background-color: #44abe2;
margin-top: 30px;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar .navbar-default {
border-radius: 0px;
}
.navbar-default .navbar-brand{
color: white;
}
.automatic {
background-color: #6e8a99;
padding-bottom: 40px;
border-bottom-left-radius: 6px;
}
.manual {
background-color: #83929a;
padding-bottom: 40px;
border-bottom-right-radius: 6px;
}
#ml-2{
padding-right:0;
}
<!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="bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Mailbox Creator</title>
</head>
<div class="container">
<nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Mailbox Management <span class="caret"></span>
<ul class="dropdown-menu">
<li>User Mailbox Management</li>
<li>Resource Mailbox Management</li>
<li>Mailbox Update Management</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Hello $username</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1 class="text-center">Mailbox Creator Pro</h1>
</div>
<!-- ***************************************** -->
<!-- ********** Automatic Forms ************* -->
<!-- ***************************************** -->
<div class="container">
<div class="row">
<div class="col-md-6 automatic">
<form>
<!-- <div class="form-group text-center">
<label><u>Automatic</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Automatic</u></h4>
<div class="form-group row">
<label class="col-md-3 col-form-label" id="ml-2" for="accountName">Account Name</label>
<div class="col-md-6">
<input class="form-control form-control-sm " type="text" name="accountNameAuto" value="" placeholder="Account number">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success btn-sm ">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="emailCheckAutomatic" style="min-width: 140px">Does account have email?</label>
<div class="col-md-6 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-info btn-sm mt-3">Check</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
<!-- ***************************************** -->
<!-- ********** Manual Form ***************** -->
<!-- ***************************************** -->
<div class="col-md-6 manual">
<form>
<!-- <div class="form-group text-center">
<label><u>Manual</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Manual</u></h4>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1 " for="accountName">Email</label>
<div class="col-md-5">
<input class="form-control form-control-sm " type="text" name="accountNameManual" value="" placeholder="Email">
</div>
<label class="col-md-2 col-form-label" for="accountName">Account</label>
<div class="col-md-2">
<input class="form-control form-control-sm" type="text" name="" value="" placeholder="S#">
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-success btn-sm">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1" for="emailCheckAutomatic">Email exist?</label>
<div class="col-md-5 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-4 mt-3">
<button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</button>
</div>
<div class="col-md-1 mt-3">
<button type="submit" class="btn btn-warning btn-sm" >Copy</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
</div><!-- End Row -->
</div>
</div><!-- End Container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>
</body>
</html>
I have searched on the internet and even on this site for the answers but no luck. The problem I am having is the two dropdown button sign in and sign up are displaying both dropdown menu when there are clicked I used the btn-group class to fix this but then the problem arises it doesn't display properly on smaller mobile screens changing it to btn class fixes it just a bit then the issue is the options are displaying horizontally and not being stacked which looks awful. I also tried data-target but that isn't working either any help would be appreciated. Here is a sample of my html and css code.
Code
.navbar {
background-color: #00CED1;
border: none;
}
.navbar-default .navbar-brand {
color: white;
font-family: Tahoma;
font-size: 20px;
font-style: italic;
}
.navbar-left {
width: 70%;
margin-left: -15px;
}
#navForm {
border: none;
}
#loginbtn {
margin-right: 16px;
background: none;
color: white;
border: 2px solid white;
}
#searchbtn {
margin-left: -13px;
background-color: #00b3b3;
color: white;
border-color: #00b3b3;
}
#submitbtn {
width: 100%;
}
#burgerbtn:hover {
background-color: #1673b1;
}
#searchbtn:hover {
background-color: #1673b1;
border-color: #1673b1;
}
#search {
width: 100%;
background-color: #00b3b3;
border: none;
color: white;
}
#password,
#username {
margin-top: 15px;
}
b,
strong {
color: #1673b1;
}
#form {
border: none;
}
#navdiv {
border: none;
}
#form2 input::placeholder {
color: white;
}
#form input::placeholder {
color: white;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.dropdown-menu {
padding-left: 15px;
padding-right: 15px;
}
#media screen and (max-width: 720px) {
b,
strong {
position: absolute;
top: 0.5%;
left: 35%;
}
#navdiv {
width: 80%;
}
.navbar-toggle {
border: none;
}
#navdiv {
width: 165%;
}
.navbar-left {
width: 100%;
}
#loginbtn {
margin-left: 5%;
}
}
#navdiv1 {
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>LearnLyte Connect Share Learn</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">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app-bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><strong><font color="white">LearnLyte</font></strong></a>
<button id="burgerbtn" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navForm">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navdiv" class="navbar-left navbar-form">
<form id="form">
<div class="form-group col-xs-6">
<input id="search" type="text" class="form-control" placeholder="Search Here...">
</div>
<button type="submit" id="searchbtn" class="btn btn-default">Search</button>
</form>
</div>
<div class="navbar-right form-inline">
<div class=" collapse navbar-collapse navbar-form" id="navForm">
<!--<div>-->
<button id="signupbtn" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sign Up</button>
<div class="dropdown-menu">
<div class="text-center">
<h4><b> Sign Up</b></h4>
</div><br>
<form autocomplete="off">
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" id="firstname" tabindex="1" class="form-control" placeholder="Firstname">
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" id="lastname" tabindex="2" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" tabindex="3" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" tabindex="4" class="form-control" placeholder="Email">
</div>
</form>
</div>
<!--</div>-->
<!--<div>-->
<button id="loginbtn" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sign In</button>
<div class="dropdown-menu">
<div class="text-center">
<h4><b> Sign In</b></h4>
</div><br>
<form autocomplete="off">
<div class="form group">
<label for="username">Username</label>
<input type="text" id="username" tabindex="1" class="form-control" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<br>
<div class="form-group">
<div class="text-center">
Forgot password?
</div>
</div>
<br><br>
<div>
<button id="submitbtn" type="submit" class="btn btn-primary btn-block">Sign In</button>
</div>
</form>
</div>
<!--</div>-->
</div>
</div>
</div>
</nav>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<title>LearnLyte Connect Share Learn</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.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><strong><font color="white">LearnLyte</font></strong></a>
<button id="burgerbtn" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navForm">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navdiv" class="navbar-left navbar-form">
<form id="form">
<div class="input-group">
<input id="search" type="text" class="form-control" placeholder="Search Here...">
<span class="input-group-btn">
<button type ="submit" id="searchbtn"class="btn btn-default">Search</button>
</span>
</div>
</form>
</div>
<div class="navbar-right form-inline">
<div class=" collapse navbar-collapse navbar-form" id="navForm">
<!--<div>-->
<button id="signupbtn" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sign Up</button>
<div class="dropdown-menu">
<div class="text-center">
<h4><b> Sign Up</b></h4>
</div>
<br>
<form autocomplete="off">
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" id="firstname" tabindex="1" class="form-control" placeholder="Firstname">
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" id="lastname" tabindex="2" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" tabindex="3" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" tabindex="4" class="form-control" placeholder="Email">
</div>
</form>
</div>
<!--</div>-->
<!--<div>-->
<button id="loginbtn" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sign In</button>
<div class="dropdown-menu">
<div class="text-center">
<h4><b> Sign In</b></h4>
</div>
<br>
<form autocomplete="off">
<div class="form group">
<label for="username">Username</label>
<input type="text" id="username" tabindex="1" class="form-control" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<br>
<div class="form-group">
<div class="text-center">
Forgot password?
</div>
</div>
<br>
<br>
<div>
<button id="submitbtn" type="submit" class="btn btn-primary btn-block">Sign In</button>
</div>
</form>
</div>
<!--</div>-->
</div>
</div>
</div>
</nav>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I just need to align the textbox and label to the center of the page. I am unable to get this. Every time its left aligned. Please need suggestions
Html code:
<!DOCTYPE html>
<html>
<head>
<title>ProjectID Creation</title>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="background-color:dodgerblue">
<h2><b>ProjectID Creation</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12">
<div class="form-group">
<label id="label" class="control-label" >UserID:</label>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Enter UserID" autocomplete="off" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12">
<div class="form-group">
<label id="label" class="control-label">ProjectID:</label>
<input type="text" class="form-control" name="project" ng-model="project" placeholder="Enter ProjectID" autocomplete="off" required />
</div>
</div>
</div>
<div class="temp123" style="margin-bottom:60px">
<button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my code in jsfiddle
You can use text-align:center and col-lg-offset-4 and col-sm-offset-4 try the demo
<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div class="container" style="background-color:dodgerblue">
<h2><b>ProjectID Creation</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body text-center">
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12 col-lg-offset-4 col-sm-offset-4">
<div class="form-group">
<label id="label" class="control-label" >UserID:</label>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Enter UserID" autocomplete="off" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12 col-lg-offset-4 col-sm-offset-4">
<div class="form-group">
<label id="label" class="control-label">ProjectID:</label>
<input type="text" class="form-control" name="project" ng-model="project" placeholder="Enter ProjectID" autocomplete="off" required />
</div>
</div>
</div>
<div class="temp123" style="margin-bottom:60px">
<button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
Just this,
<style type="text/css">
.container{
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
I am trying to make a form with 2 columns using bootstrap. The fields name and street appear side by side (large screen) and no problem but on second rowzip code is not vertical aligned with City because zip code has 2 edit boxs. If i use just one edit box in zip code everything looks fine but if i use two edit boxes an extra pading top appears. Why?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<H1>Hello</H1>
<P>Sample text here.</P>
<section id="Delivery" class="Delivery-section">
<div class="container">
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-10" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<legend style='text-align:center'>Delivery Address</legend>
</div>
<div class="col-sm-1">
</div>
</div>
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<span style='font-weight: bold;font-size:13px;'>Name: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="name" id="name" value='' size="30" />
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<span style='font-weight: bold;font-size:13px;'>Street: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="street" id="street" value='' size="30" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'>
<span style='font-weight: bold;font-size:13px;'>City: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="city" id="city" value='' size="30" />
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'>
<span style='font-weight: bold;font-size:13px;'>Zip code: (*)</span><br>
<input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp1" id="cp1" value='' size="30" />
<input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp2" id="cp2" value='' size="30" />
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</section>
To fix this problem I just took out the font-size:20px out of problematic div element. As to why this seems to have fixed the issue I cannot say because you have that in the other div elements as well and it doesn't seem to be a problem. I will say however that the font-size attribute does not need to be specified in the div elements as you are giving font-size to each of the elements individually, unless of course you were going to add or do have other elements that it are being used that are not in the code above. I also checked taking out the font-size attribute out of the other div elements and it has no negative effect.
I could not get the code to show what you asked about re padding top etc. I removed one of the zip inputs... still no difference. (using chrome here).
Here is the Fiddle.
I removed all of the inline styles so the code is easier to read/follow.
I removed all of those blank divs you look to be using to offset/fill. That sort of blank divs like that all bar the most top can end up floating.
I replace this with col-sm-offset-1 as you will see in the row.
I reworked the zip and city cols here.
Is this what you were looking for when you asked about vertically align the zip and the city?
I wasn't to sure.
Image is of large screen view.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.space {
margin-top: 2%;
margin-bottom: 2%;
}
.address {
font-size: 20px;
text-align:center;
}
.inputs {
width:100%;
font-size:12px;
font-weight:300;
line-height:20px;
}
.zip {
width:14%;
font-size:12px;
font-weight:300;
line-height:20px;
}
.labels {
font-size: 20px;
padding:0px;
padding-left:0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 space"></div>
<div class="container col-lg-12">
<H1>Hello</H1>
<P>Sample text here.</P>
<section id="Delivery" class="Delivery-section">
<div class="container">
<div class="row">
<!--<div class="col-sm-1">
</div>-->
<div class="col-sm-10 address" >
<legend>Delivery Address</legend>
</div>
<!--<div class="col-sm-1">
</div> -->
</div>
<div class="row col-sm-10 col-sm-offset-1">
<!-- <div class="col-sm-1">
</div>-->
<div class="col-sm-5">
<span class='labels'>Name: (*)</span><br>
<input class='inputs' type="text" name="name" id="name" value='' />
</div>
<div class="col-sm-5">
<span class='labels'>Street: (*)</span><br>
<input class='inputs' type="text" name="street" id="street" value='' />
</div>
<!-- <div class="col-sm-1">
</div>-->
<!--</div>-->
<div class="row col-sm-5">
<!-- <div class="col-sm-1">
</div>-->
<div class="col-sm-12">
<span class='labels'>City: (*)</span><br>
<input class='inputs' type="text" name="city" id="city" value='' />
</div>
<div class="col-sm-12">
<span class='labels'>Zip code: (*)</span><br>
<input class="zip" type="text" name="cp1" id="cp1" value='' />
<input class="zip" type="text" name="cp2" id="cp2" value='' />
</div>
<!-- <div class="col-sm-1">
</div>-->
</div>
</div>
</div>
</section>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Added to this post
Using your original code as is this is what I see in a large view, both inputs are aligned.