My code is as follows: I want to remove the spaces between the textboxes and button, so all 3 elements are stuck to one another. How can I get this done.
<div class="container">
<div class="row">
<div class="panel panel-default col-md-12 ">
<div class="panel-body">
<form action="#" role="form" class="form-inline">
<div class="form-group col-md-4 ">
<input type="email" class="form-control " placeholder="Email Address" required>
</div>
<div class=" form-group col-md-4 span7 ">
<input type="email" class="form-control " placeholder="Email Address" required>
</div>
<div class=" form-group col-md-4">
<button class="btn btn-primary btn-circle " type="submit">Sign up for free</button>
</div>
</form>
</div>
</div>
</div>
</div>
Output
Try this code it will stuck all the elements together.
I just removed the form-group class.
<div class="container">
<div class="row">
<div class="panel panel-default col-md-12 ">
<div class="panel-body">
<form action="#" role="form" class="form-inline">
<div class=" col-md-4 ">
<input type="email" class="form-control " placeholder="Email Address" required>
</div>
<div class=" col-md-4 span7 ">
<input type="email" class="form-control " placeholder="Email Address" required>
</div>
<div class=" col-md-4">
<button class="btn btn-primary btn-circle " type="submit">Sign up for free</button>
</div>
</form>
</div>
</div>
</div>
</div>
Related
Good day! In my log in form, I want my text fields to put it in to center using bootstrap. I already used class="form-inline justify-content-center" but it isn't working.
Code:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center">
<br/><br/><br/><br/><br/><br/>
<p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
password to login.</p><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
</div>
</div><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
</div>
</div>
<br/><br/>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
</div>
So far this is my output:
https://prnt.sc/h675qg / https://jsfiddle.net/kf2c8trp/
Thank you very much
Simply add this code to your CSS:
form {
text-align:center;
}
or as #Connum said, use text-center of bootstrap classes. Read more here
After adding the bootstrap css file to your fiddle and the class text-center to the form, your inputs are being displayed centered: https://jsfiddle.net/kf2c8trp/4/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center text-center">
<br/><br/><br/><br/><br/><br/>
<p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
password to login.</p><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
</div>
</div><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
</div>
</div>
<br/><br/>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
Firstly, you are doing a lot of things wrong. Trying to create space with <br/> when you should be using margin or padding is not really cool :). Also, Inline styling is highly discouraged and Justify-content-centre work with flexboxes. That being said check-out the working example below, I have changed some of your bootstrap class and add few scss link below:
<div class=" col-xs-12 container" >
<form class="col-xs-12" role="form" method="post" action="<?=base_url()?>login/login_submit" >
<p id="sign-lbl">Please enter your username and<br/>
password to login.</p>
<div class="col-xs-6 col-xs-offset-3 form-group">
<div>
<input type="text" name="username" id="email" class="form-control" placeholder="Username">
</div>
</div><br/><br/>
<div class="col-xs-6 col-xs-offset-3 form-group">
<div>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
</div>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-offset-3 col-xs-6 ">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
Check out the updated link
why my email input not occupying full width in bootstrap column
I am using bootstrap and opening this html page with visual studio project's default base layout
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form role="form">
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="UserFirstName" id="UserFirstName" class="form-control input-lg" placeholder="First Name" tabindex="1" required autocomplete="on">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="UserLastName" id="UserLastName" class="form-control input-lg" placeholder="Last Name" tabindex="2" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="MobileNumber" id="MobileNumber" class="form-control input-lg " placeholder="Mobile # (92)321-2255434" tabindex="3" required autocomplete="on" data-mask="(99)-999-9999999">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="BusinessName" id="BusinessName" class="form-control input-lg" placeholder="Business Name" tabindex="4" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group ">
<input type="email" name="Email" id="Email" class="form-control input-lg" placeholder="Valid Email Address (For Varification)" tabindex="5" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="Password" class="form-control input-lg" placeholder="Password" tabindex="6" required autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="ConfirmPassword" id="ConfirmPassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="7" required autocomplete="off">
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-md-6">
<input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7">
</div>
<div class="col-xs-12 col-md-6">Sign In</div>
</div>
<div class="row">
#Html.ValidationSummary("", new { #class = "text-danger" })
</div>
</form>
</div>
</div>
</div>
for your convenience I am attaching image file also, so kindly if some one can help me out
I am using a login page in my application. Each time when I am opening the login page through my main navigation page the login page is displayed on the left corner. I am using a bootstrap css. Here is the fiddle ["https://jsfiddle.net/vkcc1c20/"]
<div class="container">
<div class="row">
<div id="login-page-wrapper">
<form name="form" ng-submit="vm.login()" role="form">
<div class="row" ng-show="login_banner_msg">
<div class="col-md-4"> </div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1 col-xs-3">
</div>
<div class="col-md-10 col-xs-6">
<div class="frm-banner frm-banner-red">
{{login_banner_msg}}
</div>
</div>
<div class="col-md-1 col-xs-3">
</div>
</div>
</div>
<div class="col-md-4"> </div>
</div>
<div ng-controller="mainController">
<div class="col-md-4 login-div">
<div class="panel panel-default">
<div class="panel-heading">
<strong class="">Login</strong>
</div>
<div class="panel-body">
<form id="form-login_v2" ng-submit="vm.login()" class="form-horizontal">
<input type="hidden" name="login" value="yes">
<div class="row">
<div class="clearfix"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="email">User ID</label>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"> <i class="glyphicon glyphicon-envelope"></i> </div>
<input class="form-control" id="email"
name="email"
type="text"
data-validation="[EMAIL]" ng-model="userData.userid" tabindex="0">
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="password" style="display:block;">Password <strong class="pull-right">Forgot Password ? </strong></label>
<div class="form-group ">
<div class="input-group col-md-12 col-xs-12 col-sm-12">
<div class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></div>
<input class="form-control" id="password"
name="password"
type="password"
data-validation="[NOTEMPTY]" ng-model="userData.password" tabindex="0">
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group " style="margin-bottom:5px;padding-left:126px;">
<button type="submit" class="btn btn-primary custButton" ng-click="login_click()">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Hi I added a new id cont to center it so it could be :
#cont{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="cont" class="container">
<div class="row">
<div id="login-page-wrapper">
<div ng-controller="mainController">
<div class="col-md-4 login-div">
<div class="panel panel-default">
<div class="panel-heading">
<strong class="">Login</strong>
</div>
<div class="panel-body">
<form id="form-login_v2" ng-submit="vm.login()" class="form-horizontal">
<input type="hidden" name="login" value="yes">
<div class="row">
<div class="clearfix"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="email">User ID</label>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"> <i class="glyphicon glyphicon-envelope"></i> </div>
<input class="form-control" id="email"
name="email"
type="text"
data-validation="[EMAIL]" ng-model="userData.userid" tabindex="0">
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="password" style="display:block;">Password <strong class="pull-right">Forgot Password ? </strong></label>
<div class="form-group ">
<div class="input-group col-md-12 col-xs-12 col-sm-12">
<div class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></div>
<input class="form-control" id="password"
name="password"
type="password"
data-validation="[NOTEMPTY]" ng-model="userData.password" tabindex="0">
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group " style="margin-bottom:5px;padding-left:126px;">
<button type="submit" class="btn btn-primary custButton" ng-click="login_click()">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
class="col-xs-4 col-xs-offset-4"
will do the trick for you. Add this to your div like this:
<div class="col-xs-4 col-xs-offset-4 login-div">
//remaining structure
</div>
I have two forms that need to be side by side. I can get them to float left but the button gets disabled when I use float left. I have tried display-inline and that doesnt work. I have tried span and that doesnt work. No idea why the button stops woeking. Here is a sample form
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="display:incline;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Will this work as a start?
I changed this (which had a type, should be inline) style="display:incline;... to style="float:left;...
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
but may I suggest to use style="display: inline-block;... on both your form containers, here using CSS styles (preferable) instead of inline style.
.formwrapper {
display:inline-block;
border:1px solid blue;
width:200px;
}
<div class="formwrapper">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="formwrapper">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i have a form within a panel in my html using bootstrap and it seems like all my panels are well adjusted except for the one which has date and the one used to upload files in it.
they have more width than the other form groups because of the button next to them. so my question is how can i modify it to get the same width as the other form groups.
<div class=" col-md-6 col-sm-6 ">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class=" col-md-3 col-sm-3 col-xs-3 ">
<font size="4" ></font>
</div>
<div class=" col-md-8 col-sm-8 col-xs-8 ">
<font size="6" >إضافـــــة أرشيــــف </font>
</div>
</div>
</div>
<br>
<form class="form-horizontal" id="form" action="/insertArchive/" method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group">
<label class="col-sm-4 control-label">إســـم اﻷرشيف</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">الرقم اﻹشاري</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="ref_num" id="ref_num">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">المجلد</label>
<div class="col-sm-6">
<select class="form-control" name="section_id" id="section_id">
{% for sectidon in list %}
<option value="{{sectidon.id}}">{{sectidon.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">ملاحظات</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="text" id="text"></textarea>
</div>
</div>
<!-- test -->
<div class="form-group">
<label class="col-sm-4 control-label">الملحقات</label>
<div class="contacts col-sm-6">
<label>إصافة ملف :</label>
<div class="form-group multiple-form-group input-group file">
<input type="file" name="file[]" class="form-control" >
<input type="text" name= "file_name[]" class="form-control" >
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
</div>
</div>
</div>
<!-- test -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">حفـــظ</button>
</div>
</div>
</form>
</div>
</div>
Your problem is, that you have a .form-group class within a .form-group.
So change:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
to:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Working example