Need horizontal space between following text input in bootstarp.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-12">
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<!-- <div class="col-md-8"> -->
<input class="col-xs-3-offset-4" id="inputdefault" type="text" placeholder="AWB ID" style="background-color:#DCDCDC; height:40px">
<!-- </div> -->
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<!-- <div class="col-md-8"> -->
<input class="col-xs-4-offset-6" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px;">
<!-- </div> -->
</div>
</div>
</div>
</div>
How can do this well. Html spaces are not working.
I think you want like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-group { margin-right:20px;}
</style>
<form class="form-inline" role="form">
<div class="form-group">
<label for="email2">Email:</label>
<input type="email" class="form-control" id="email2" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd2">Password:</label>
<input type="password" class="form-control" id="pwd2" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
If I'm not wrong this will work,
.container{
margin-left: 100px;
}
<div class="container">
<div class="col-md-12">
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<!-- <div class="col-md-8"> -->
<input class="col-xs-3-offset-4" id="inputdefault" type="text" placeholder="AWB ID" style="background-color:#DCDCDC; height:40px">
<!-- </div> -->
</div>
</div>
<br>
<br>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<!-- <div class="col-md-8"> -->
<input class="col-xs-4-offset-6" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px;">
<!-- </div> -->
</div>
</div>
</div>
</div>
Related
I have a form, I have in this two fields inline because they are in a form-inline div, I want to put the label of these above the fields and not next to them. How to remove form-inline from them without affecting the fields?
Here is a CodePen
<main id="contact_part">
<article class="mb-5 row">
<h1>Nous Contacter</h1>
<div class="col-md-12">
<form action="" method="post" id="contact_form">
<div class="form-inline">
<label class="" for="name_contact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name_contact" placeholder="Nom" required>
<label class="" for="lastNameContact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="lastName_contact" placeholder="Prénom" required>
</div>
<div class="form-group">
<label class="" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="E-Mail" required>
</div>
<div class="form-group">
<label class="" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" required></textarea>
</div>
</form>
</div>
</article>
</main>
#contact_part article {
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
#contact_part .row {
display: block;
}
#contact_part h1 {
font-size: 1.7rem;
text-transform: uppercase;
margin-bottom: 3rem;
text-decoration: underline;
text-align: center;
}
#contact_form {
width: 50%;
margin: 0 auto;
}
#contact_form .form-inline label {
}
#contact_form input, #contact_form textarea {
border: none;
border-bottom: 1px solid #C6C6C6;
background-color: #FFF989;
}
If I understand correctly you no need to use form-inline class instead use like below code. Your form will look good.
<main id="contact_part">
<div class="container">
<article class="mb-5 row">
<div class="col-12">
<h1>Nous Contacter</h1>
</div>
<div class="col-12">
<form action="" method="post" id="contact_form">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="name_contact">First Name</label>
<input type="text" class="form-control" id="name_contact" placeholder="First Name" required>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="lastNameContact">Last Name</label>
<input type="text" class="form-control" id="lastName_contact" placeholder="Last Name" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="example#example.com" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" rows="5" required></textarea>
</div>
</div>
</div>
</form>
</div>
</article>
</div>
</main>
Code Pen.
Use col-12 instead of col-md-12 class for better performance. Don't use row without container or container-fluid. If you use only row it give you horizontal scroll bar. Your code will look like this.
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
Or
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</div>
</div>
Fluid view or 100% Browser width
<div class="container-fluid">
<div class="row">
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
</div>
</div>
Hope this help!
Here you go, let me know if this works: https://codepen.io/luke-richter/pen/XWJVqWO
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#contact_part{
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->
<main id="contact_part">
<div class="container ">
<div class="row">
<h2>Inline form with heading above inputs</h2>
</div>
<form action="#">
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-sm">
<label for="firstname" class="control-label">Firstname1</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name2</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name3</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-3"><br>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
Try this,
.form-inline label
{
margin-bottom:3em;
}
Or You can move the label outside the<div class="form-inline">
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>
I want to vertically center a container div on the page. This works on JSfiddle, but when I preview the page on my computer the container stays stuck to the top of the page. The body also seems to only fill half the page.
Does anyone know the reason for this? I don't know if it's the code, seeing as it works on JSfiddle.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel login-tab">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
Login
</div>
<div class="col-xs-6">
Register
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" method="post" style="display:block;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember">Remember me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a href="#" tabindex="5" class="forgot-password">
Forgot password?</a>
</div>
</div>
</div>
</div>
</form>
<form id="register-form" method="post" style="display:none;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Conform Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Other stylesheets:
<!--in head-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!--before ending body-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>
I have a code like this-
html, body, .container-table {
height: calc(100% - 50px);
}
/*Making a div in center*/
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
<!-- Main div to hold all Data -->
<!-- Login Form -->
<div class="row vertical-center-row">
<h2 class="text-center">Login</h2>
<form class="form-horizontal" action="login.html">
<div class="form-group">
<label for="inputEmail" class="control-label col-md-2">Email</label>
<div class="col-md-4">
<input name="email" type="email" class="form-control" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="text-center control-label col-md-2">Password</label>
<div class="col-md-4">
<input name="password" type="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</form>
</div>
</div>
So, I am getting a output like this-
But I want to have it like this-
Can anyone please help?
Re-
This Question-
Centering Login Form Bootstrap
Is not a solution for my problem, because if u run the codes given and read the requirements, then u can easily find this.
More- My problem is not centering a div, My problem is centering a div inside of a div which is already centered horizontally and vertically.
Add col-md-offset-3 to the first element of a row in your form
All bootstrap tables have 12 columns -> your form's width is 6 cells -> so you have 6 cells left -> push your form 3 cells and you have 3 on each side
html,
body,
.container-table {
height: calc(100% - 50px);
}
/*Making a div in center*/
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
<!-- Main div to hold all Data -->
<!-- Login Form -->
<div class="row vertical-center-row">
<h2 class="text-center">Login</h2>
<form class="form-horizontal" action="login.html">
<div class="form-group">
<label for="inputEmail" class="control-label col-md-2 col-md-offset-3">Email</label>
<div class="col-md-4">
<input name="email" type="email" class="form-control" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="text-center control-label col-md-2 col-md-offset-3">Password</label>
<div class="col-md-4">
<input name="password" type="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-5 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</form>
</div>
</div>
try
.container-table
{
display: table;
margin: 0 auto;
}
Why don't you simply simply use bootstrap columns ?
With this way the alignment of text and button inside your login div won't be affected, and you don't need any extra CSS :
<div class="container row">
<div class="col-md-4"></div>
<div class="col-md-4">
Your login form HTML here ...
</div>
<div class="col-md-4"></div>
</div>
Please try this:
Put you button inside a div like:
<div class="row">
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</div>
and assign text-align:center to that div.
html,
body,
.container-table {
height: calc(100% - 50px);
}
body{top:50%;}
/*Making a div in center*/
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
<!-- Main div to hold all Data -->
<!-- Login Form -->
<div class="row vertical-center-row">
<div class="col-md-10 col-md-offset-1">
<h2 class="text-center">Login</h2>
</div>
<div class="col-md-10 col-md-offset-1">
<form action="login.html" class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-2" for="inputEmail">Email</label>
<div class="col-md-8">
<input type="email" required="" placeholder="Email" class="form-control" name="email">
</div>
</div>
<div class="form-group">
<label class="text-center control-label col-md-2" for="inputPassword">Password</label>
<div class="col-md-8">
<input type="password" required="" placeholder="Password" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div>
<div class="col-md-10 col-md-offset-1">
<button class="center-block btn btn-primary" type="submit" name="remember_me">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
I want to align 2 input groups, one with span 8 & other with 4 next to each other. I used form inline but it doesn't take the intended width.
<div class="form-inline">
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-8" placeholder="Username">
<!-- </div> -->
</div>
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-4" placeholder="Ref No.">
</div>
</div>
try the following css
.form-group{
float:left;
}
After playing around i found this solution:
HTML
<div class="row form-input">
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="ref no.">
</div>
</div>
<div class="row form-input">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Monthly Rent">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Deposit">
</div>
</div>
CSS
.form-input, .form-input input{
margin-top: 10px;
}