Each text box should be in a new row in the panel - html

I have created a panel for my webpage. The panel contains two text boxes with labels. As of now the two text boxes are in the same row. I want each text box to be in a different row. How should I do it? I have tried including the <br> inside the panel.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
</style>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-3">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-3">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="save"></label>
<div class="col-md-8">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I can see two text boxes with name and email coming in one row.
What I have tried is
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
by referring to this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_stacked_form,
but its not working. What am I doing wrong?


You want something like this?
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-7">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-7">
<input id="candidate-email" name="candidate-email" type="email"
placeholder="johndoe#example.com" class="form-control input-md" required>
</div>
</div>
</div>
Or Like this:
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-3 col-sm-3 clo-xs-3">
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your name</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
<div class="col-lg-6 col-md-3 col-sm-4 clo-xs-3" >
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your email</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
</div>
</div>
</div>
</div>


Issue is using col remove that col form label and input will fix the issue
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group ">
<label class=" control-label"><span style="color:red">*</span>Enter your name</label>
<div class="">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label"><span style="color:red">*</span>Enter your email</label>
<div class="">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label" for="save"></label>
<div class="">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>

Related

How to "stretch" a form group in a container (Bootstrap 4)?

I've tried playing around with the paddings, but it didn't solve the issue.
The idea is to stretch these fields from where they are all the way to the right.
Here's the Fiddle and this is how it looks VS what it should look like.
input[type='text'],
.txtarea {
margin-bottom: 3px;
}
.form-group input, select{
height: 36px;
padding-left: 03px;
padding-right: 03px;
}
.form-group {
margin-bottom: 2px !important;
}
.padding-0 {
padding-right: 0;
padding-left: 0;
}
label {
color: #292727;
font-weight: bold;
font-size: 13px;
width: 140px;
text-align: right;
}
label[for='notes'] {
font-size: 13px;
font-weight: bold;
text-align: left;
display: block;
}
.container-fluid {
max-width: 99%;
}
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div class="container-fluid px-5" id="container1">
<div class="row d-flex flex-wrap align-items-center">
<div class="col">
<img src=class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
</div>
<div id="unitSpot" style="display: none;">Fabric</div>
<div class="col">
<form id="headerForm">
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="select" class="col-4 col-form-label">Order:</label>
<div class="col-4">
<select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
<option value="TTL-220218" selected="">TTL-2131231</option>
</select>
</div>
</div>
<div class="form-group row" style="display: flex;justify-content: flex-end;">
<label for="fabricPo" class="col-4 col-form-label">PO:</label>
<div class="col-4">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control" disabled="">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="poDate" class="col-4 col-form-label">PO Date:</label>
<div class="col-4">
<input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="MM/dd/yyyy" onchange="generateShipDate(getLeadTime())">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="leadTime" class="col-4 col-form-label">Lead Time:</label>
<div class="col-4">
<input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this)" min="0" max="180">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="text3" class="col-4 col-form-label">Ship Date:</label>
<div class="col-4">
<input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
</div>
</div>
</form>
</div>
</div>
</div>
</html>

You have px-5 on your container which is specifying 3rem of padding on the left and right. Step one would be to remove this because container-fluid already has a left and right padding of 15px.
Then, when you work your way down the elements you'll notice some more default padding on all your col-4's. You can use pr-0 to target only the padding-right to be 0.
input[type='text'],
.txtarea {
margin-bottom: 3px;
}
.form-group input,
select {
height: 36px;
padding-left: 03px;
padding-right: 03px;
}
.form-group {
margin-bottom: 2px !important;
}
.padding-0 {
padding-right: 0;
padding-left: 0;
}
label {
color: #292727;
font-weight: bold;
font-size: 13px;
width: 140px;
text-align: right;
}
label[for='notes'] {
font-size: 13px;
font-weight: bold;
text-align: left;
display: block;
}
.container-fluid {
max-width: 99%;
}
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div class="container-fluid" id="container1">
<div class="row d-flex flex-wrap align-items-center">
<div class="col">
<img src=class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
</div>
<div id="unitSpot" style="display: none;">Fabric</div>
<div class="col">
<form id="headerForm">
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="select" class="col-4 col-form-label">Order:</label>
<div class="col-4 pr-0">
<select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
<option value="TTL-220218" selected="">TTL-2131231</option>
</select>
</div>
</div>
<div class="form-group row" style="display: flex;justify-content: flex-end;">
<label for="fabricPo" class="col-4 col-form-label">PO:</label>
<div class="col-4 pr-0">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control" disabled="">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="poDate" class="col-4 col-form-label">PO Date:</label>
<div class="col-4 pr-0">
<input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="MM/dd/yyyy" onchange="generateShipDate(getLeadTime())">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="leadTime" class="col-4 col-form-label">Lead Time:</label>
<div class="col-4 pr-0">
<input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this)" min="0" max="180">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="text3" class="col-4 col-form-label">Ship Date:</label>
<div class="col-4 pr-0">
<input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
</div>
</div>
</form>
</div>
</div>
</div>
</html>

Inputs are not inside the fieldset

I have used field set that contains a set of input and labels. these inputs and label are outside the field set borders. How can I place label and inputs inside field set border.
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid #eee !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
As you can see the input is outside the field set border. How can I fix this purely with HTML. I tried to setting the padding for the field set and works fine but at certain screen size the end of the label will be slightly hidden. So I wan to see first if can be resolved using just HTML. I am using bootstrap 3.3.7

Just remove the div class="row"> inside the form group perhaps? I gave it a lime border just to make it obvious.
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid lime !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

create a parent div where you have to put a div with the form-group class than in the children you have to put form-control for example in your label and input
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="form-control">User:</legend>
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-control">Username:</label>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>

I'm not entirely sure what you're after, but part of your problem is that you're tangling rows and columns with form groups. The latter should really be inside the former. See getbootstrap.com/docs/3.3/css/#forms
Then, your layout seems overly complex. I've removed a few layers to simplify.
Also, you're applying too many column classes and in the wrong order. Bootstrap is mobile first and column classes cascade. Arrange them smallest to largest and don't duplicate any with the same numeric value.
.legend-custom {
font-size: 1.2em;
font-weight: bold;
}
.fieldset-custom {
border: 1px solid #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class=" col-xs-12 col-md-6">
<form class="form-horizontal">
<div class="row form-group">
<div class="col-xs-12 col-md-3">
<fieldset class="fieldset-custom">
<legend class="legend-custom">User:</legend>
<label class="control-label">Username:</label>
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>

.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: 15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid #eee !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

#row-1 {
margin-right: 5px;
margin-left: 5px;
}
Add the above code to your css file.
Second row class which is like that <div class="row" id="row-1"> before tag <div class="form-group">

Smooth Animation for Bootstrap 4 collapse

I got what I'm looking for but the animation effect isn't smooth as it should. I understand that the animation would be better if I don't have padding but I need padding to get the design. How do I solve this problem?
JSFiddle DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.block {
margin-top: 30px;
}
.collapse {
background-color: #eee;
padding: 30px 15px;
}
This is base on Bootstrap 4, the latest version.

When you set .collapse it first apply the bootstrap style of .collapse and after yours because that there is delay...
Use the id #collapseExample to style:
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT to your comment!
There's a "drag" when it closes.
Use jquery onclick the checkbox and apply padding as below:
fiddle here
$('.checkbox').on('click', function(){
if($('.collapse.show').length>0)
$('.collapse').css('padding','0');
else
$('.collapse').css('padding','30px 15px');
});
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I got it resolved. It's because I added the padding in parent div.
.block {
margin-top: 30px;
}
.block__collapse {
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="block__collapse">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

align label and textbox to the center in 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/

When trying to have a div overlay contents below it, it doesn't overlay, just pushes content down

I am having an issue of overlaying a hidden div, when I click a button. What I am trying to have happen is when the hidden div appears that it goes on top of everything else below it based on its height. All I can get it to do is push everything else downwards as you can see in my snippet.
Other solutions that I have looked at haven't taken in consideration of using bootstrap, and when I am testing out the solutions I have found, it puts everything out of whack, and that would be when I use absolute as position, like the solutions I have seen.
Any help would be appreciated.
$(document).ready(function () {
$("#myHiddenDiv").hide();
});
$("#myBtn").click(function () {
$("#myHiddenDiv").toggle();
});
$("#btn2").click(function () {
$("#myHiddenDiv").toggle();
});
#myHiddenDiv {
/*width: 325px;*/
height: 300px;
border: 1px solid green;
background-color: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10" style="z-index:2; position:relative">
<div id="MaterialGridList">
</div>
</div>
</div>
<div style="z-index:1; position:relative;">
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" style="width:100%" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div style="border:1px solid black; height:400px; border-radius:5px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>

Refactoring some stuf, this could work for you. You need to use the atribute "position" with "absolute" value for box and the form need to have "relative" value. Use the z-index attribute to set the position versus other tags.
$(function () {
$("#myBtn").click(function () {
$("#myHiddenDiv").toggle();
});
});
.form-container {
position: relative;
z-index: 8;
}
#myHiddenDiv {
display: none;
height: 100%;
width:100%;
border: 1px solid green;
background-color: cornflowerblue;
position: absolute;
z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
</div>
<div class="form-container">
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10">
<div id="MaterialGridList"></div>
</div>
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" style="width:100%" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div style="border:1px solid black; height:400px; border-radius:5px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>

You'll have to use position: absolute. To fix the whackiness, just add the line width: 100% to #myHiddenDiv.
I would also suggest taking a look at jQuery animation methods, like .fadeToggle() and .slideToggle().
Below's the working sample.
EDIT: Rewrote some code to address issues pointed on comments
$("#myBtn, #btn2").click(function () {
$("#myHiddenDiv").toggle();
});
#myHiddenDiv {
display: none;
position: absolute;
width: 100%;
z-index: 2;
height: 300px;
border: 1px solid green;
background-color: cornflowerblue;
}
#ddColor {
width: 100%;
}
.relative {
position: relative;
z-index: 1;
}
.black-border {
border: 1px solid black;
height: 400px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10">
<div id="MaterialGridList">
</div>
</div>
</div>
<div class="relative">
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div class="black-border"></div>
</div>
</div>
</div>
</div>
</div>
</body>