I have a simple form that i want it to be responsive even to the smallest screen like an Iphone 5. When it's on the large screen, it has no problem but when it decrease it destroys the form. What is the technique on how to make forms responsive. What is the quickest way to do it?
html, body{
font-family: Helvetica;
font-size: 12px;
}
.center_div{
margin: 0 auto;
width: 40%;
padding: 10px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chinese</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container center_div">
<div class="row">
<div class="panel panel-danger login">
<div class="panel-heading">
<h3 class="text-center title">China</h3>
</div>
<br>
<div class="container-fluid">
<div class="panel-body">
<div class = "form-group">
<label>Username</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" id="id" name="email" class = "form-control">
</div>
</div>
<div class = "form-group">
<label>Password</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
<input type="password" id="password" name="password" class = "form-control">
</div>
</div>
<div class = "form-group">
<label>No</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
<input type="password" id="password" name="password" class = "form-control">
</div>
</div>
<br>
Login
<br>
</div>
</div>
</div>
</div>
</div>
</body>
You must use col-lg/md/sm/xs-N , col-lg/md/sm/xs-offset-N classes in div instead of width: 40%;
See https://getbootstrap.com/examples/grid/ .
Use have a grid with 12 cells horisontally. You can define cell width and offset for each of screens: extrasmall, small, medium, large.
https://jsfiddle.net/ej59s3jt/
<style>
html, body{
font-family: Helvetica;
font-size: 12px;
}
.center_div{
margin: 0 auto;
padding: 10px;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chinese</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container center_div">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0 ">
<div class="panel panel-danger login">
<div class="panel-heading">
<h3 class="text-center title">China</h3>
</div>
<br>
<div class="container-fluid">
<div class="panel-body">
<div class = "form-group">
<label>Username</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" id="id" name="email" class = "form-control">
</div>
</div>
<div class = "form-group">
<label>Password</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
<input type="password" id="password" name="password" class = "form-control">
</div>
</div>
<div class = "form-group">
<label>No</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
<input type="password" id="password" name="password" class = "form-control">
</div>
</div>
<br>
Login
<br>
</div>
</div>
</div>
</div>
</div>
</div>
Related
Well this is my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="span4 offset4 centered">
<div class="container overflow-hidden">
<div class="col-6">
<div class="p-3 border bg-light">
<form>
<div class="container px-4">
<div className="container">
<h3>Login</h3>
</div>
<div className="container">
<div className="row align-items-center">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
</div>
<div className="container">
<div className="row align-items-center">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
</div>
<div className="container">
<div className="row align-items-center">
<div className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" id="customCheck1" />
</div>
</div>
</div>
<div className="container">
<div className="row align-items-center">
<button type="submit" class="btn btn-outline-warning">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
the problem is that I'd like to center it vertical and horizontal. I thoutght this is possible with the <div class="span4 offset4 centered"> but it wasn't. Anyone know an answer?
I also tried to use my own styling but it didn't work too
Why are you not using bootstraps classes? I made some changes in your code. check below code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div style="height: 100vh">
<div class="container h-100">
<div class="row justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="p-3 border bg-light">
<h3>Login</h3>
<form action="">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-outline-warning">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Just add mx-auto and my-auto to the element you want to center within it's parent.
Like this:
<div class="parent">
<div class="container mx-auto my-auto">
<!--Content-->
</div>
</div>
Now .container would be centered vertically and horizontally inside .parent
I want to design a page in which half-left portion of the viewport for Login & other half-right portion of the viewport for Signup i.e with split layout(side by side in tablet,desktop, and large screen & stacked(top for login & Bottom for Signup after reaching within a mobile width range) in mobile, and lower devices). I made this with two col-md-6 (one for Login & another for Signup) with 100vh for min-width:768px and above and with 50vh for max-width:768px devices(means in mobile devices it display as stacked) and below. I made this code but after size testing(by scaling browser window) I am facing problem(on scale down) like Login portion(i.e. Half-left) height take size as the login form. I have not given any specific width & height of any div(Because bootstrap handle it automatically using grid system). I am giving the code so that you can help me.
I Want this Output(Actually I get it with small flaw)
Sample-in-mobile
Sample-in-Computer
Problem:
Problem
/*index.css*/
body {
padding-top: 56px;
}
.tmbl-nav {
background-color: #001427;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
/*.left-side,.right-side{
height:50vh;
width:100%;
}
*/
.left-side {
background-color: #BF0603;
}
.right-side {
background-color: #8D0801;
}
.form-box {
background-color: white;
padding: 25px 25px 25px 25px;
}
/* Medium devices (landscape tablets, 768px and down) */
#media only screen and (max-width:768px) {
.nav-link {
text-align: center;
}
}
#media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--index.php-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<title>My Web Site</title>
</head>
<body>
<?php include_once("inc/header.php");?>
<!--navbar for navigation-->
<div class="container-fluid">
<div class="row no-gutters">
<div class="left-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Login Now</h2>
<p>Enter Username & Password to Log on.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputUName" class="sr-only">Username</label>
<input type="text" class="form-control" id="inputUName" aria-describedby="userName" placeholder="Username" />
</div>
<div class="form-group">
<label for="inputPsword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPsword" aria-describedby="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="right-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Register Now</h2>
<p>Fill in the below form to get instant access.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputFName" class="sr-only">Full Name</label>
<input type="text" class="form-control" id="inputFName" aria-describedby="fullName" placeholder="Full Name" />
</div>
<div class="form-group">
<label for="inputEmail" class="sr-only">Email</label>
<input type="email" class="form-control" id="inputEmail" aria-describedby="email" placeholder="Email" />
</div>
<div class="form-group">
<label for="inputMobile" class="sr-only">Mobile</label>
<input type="number" class="form-control" id="inputMobile" aria-describedby="mobile" placeholder="Mobile Number" />
</div>
<div class="form-group">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword" aria-describedby="password" placeholder="Password" />
</div>
<div class="form-group">
<label for="inputCPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputCPassword" aria-describedby="confirmPassword" placeholder="Confirm Password" />
</div>
<div class="form-group row text-dark">
<label for="checkYesNo" class="col-auto pt-0 col-form-label">You have Reference ID:</label>
<div class="col-auto">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
<label class="custom-control-label" for="inlineRadio1">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
<label class="custom-control-label" for="inlineRadio2">No</label>
</div>
</div>
</div>
<div class="form-group">
<label for="inputREmail" class="sr-only">Reference Email ID</label>
<input type="email" class="form-control" id="inputREmail" aria-describedby="referenceEmail" placeholder="Referral Email ID" />
</div>
<div class="form-group text-dark">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkTC" />
<label class="custom-control-label" for="checkTC">
I Agree all the Terms & Condition
</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JQuery,then Popper.js, then Bootstrap.min.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/indexnavigation.js"></script>
</body>
</html>
just remove the following code present in your CSS, That should fix it.
#media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}
My web page has two cards: one underneath the other. The top card has scrollable body that contains a large number of input groups. I want the bottom card to be inserted right underneath the top card.
The problem I am getting is that the bottom card is placed far at the bottom of the page as if the layout is taking into account the space occupied by the input groups of the top card, but these should be hidden inside the scrollable section.
The code below shows my setup.
Cheers.
<!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">
<title>Scrollable Cards</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card text-center col-xl-12 col-lg-12 col-md-12" style="height: 45%;">
<div class="card-header"> Card 1</div>
<div class="card-body">
<div class="scrollable" style="max-height: 35%; overflow-y: auto;">
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card text-center col-xl-12 col-lg-12 col-md-12" style="height: 45%;">
<div class="card-header"> Card 2 </div>
<div class="card-body">
<div class="scrollable" style="max-height: 35%; overflow-y: auto;">
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You have to make some height with fix size in px.
For example, remove style="height: 45%;", replace style="max-height: 35%; overflow-y: auto;" with style="max-height: 150px; overflow-y: auto;"
And in general your code is pretty messy.
<!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">
<title>Scrollable Cards</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card text-center col-xl-12 col-lg-12 col-md-12">
<div class="card-header"> Card 1</div>
<div class="card-body">
<div class="scrollable" style="max-height: 150px; overflow-y: auto;">
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card text-center col-xl-12 col-lg-12 col-md-12" style="height: 45%;">
<div class="card-header"> Card 2 </div>
<div class="card-body">
<div class="scrollable" style="max-height: 35%; overflow-y: auto;">
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">#</span> </div>
<input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I am having a slight issue with my textarea in html, when I add the Placeholder attribute it doesn't seem to be visible until I highlight and press backspace also the cursor appears further away from the initial leftmost position.
<html>
<head>
<title>
Post a Task
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="card" style="width: 50rem; margin-top: -40px; padding: 20px; margin: auto;">
<div class="card-body">
<h5 class="card-title text-center" id="Signup_Title">POST YOUR TASK </h5>
<!--<h6 class="card-title text-center" id="Signup_Sub_Title"></h6>-->
<form>
<div id="formpage_1">
<div class="form-row">
<div class="form-group col-md-12">
<label>Brief Title:</label>
<textarea class="form-control" cols="50" rows="2" placeholder="Brief Title">
</textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Detailed Description:</label>
<textarea class="form-control" cols="50" rows="8" placeholder="Detailed Description">
</textarea>
</div>
</div>
<div class="form-group">
<button type="menu" class="btn btn-primary form-control"
style="background-color:#f9d342 ; color:#252218 ; border: none; width: 30%;">Attach File
</button>
</div>
</div>
</body>
</html>
<html>
<head>
<title>
Post a Task
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="card" style="width: 50rem; margin-top: -40px; padding: 20px; margin: auto;">
<div class="card-body">
<h5 class="card-title text-center" id="Signup_Title">POST YOUR TASK </h5>
<!--<h6 class="card-title text-center" id="Signup_Sub_Title"></h6>-->
<form>
<div id="formpage_1">
<div class="form-row">
<div class="form-group col-md-12">
<label>Brief Title:</label>
<textarea class="form-control" cols="50" rows="2" placeholder="Brief Title"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Detailed Description:</label>
<textarea class="form-control" cols="50" rows="8" placeholder="Detailed Description"></textarea>
</div>
</div>
<div class="form-group">
<button type="menu" class="btn btn-primary form-control"
style="background-color:#f9d342 ; color:#252218 ; border: none; width: 30%;">Attach File
</button>
</div>
REMOVED WHITE SPACE
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/