I am making an app where there are lots of forms and i am fatigued at the thought of referring to the form reference for the tricky vertical aligned forms and horizontal aligned forms.
I want a final snippet that will be my point of reference when i want a vertical and a horizontal form.
For a vertical form(forms aligned vertically) i use this code
https://jsfiddle.net/bgebzwqd/11/
<form role="form">
<div class="form-group">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-default">Register</button>
</div>
</form>
For horizontal forms i have this
https://jsfiddle.net/0jwzxoe2/20/
<form role="form">
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">One</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Two</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Three</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Four</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Five</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
In the first form(vertical forms), how can i control the width of the form bootstrap way(trying and avoiding custom css)
In the second, i want to have the button at the bottom and also have some spacing vertically. In the current example, there seem to be no space.
To solve the problem, i want to avoid using custom css and try solving this using what's available in bootstrap only.
Use Below Code
<form role="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12">
<div class="form-group col-md-4">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</div>
</form>
I ended up doing this for vertical forms
https://jsfiddle.net/codebreaker87/zqjva21d/
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<style>.width500{width:500px;margin-left:30px;}</style>
<form role="form">
<div class="row">
<div class="form-group width500">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500 ">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
</div>
For horizontal forms https://jsfiddle.net/codebreaker87/zqjva21d/21/
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<form role="form">
<div class="form-group">
<style>.mb{margin-bottom:20px;}.ml{margin-left:15px;}</style>
<div class="col-xs-3 mb">
<label class="control-label">One</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Two</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Three</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Four</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Five</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Six</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="row">
<div class="col-md-12 ml ">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
</div>
Related
My Form elements are not fitting in correctly and the alignment is
distorted.
.h-100 has been used since the blue back ground is my navigation and I want it to fill the entire height available in the screen.
I would prefer to accept an answer which can explain why my snippet does not work.
Plunker here
HTML
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.blue {
background-color:blue;
}
html,body {
height: 100%;
}
Screen shot
remove .h-100 class from .container and from .row as its height should be auto instead of 100% , answer is as per what i understand , that your card is going out of your .col right?
if you want to give blue shape than here is the code :
<div class="row">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
.blue{
min-height: 100px //the height you want to give
}
In the following code, I have an image that I do not want shown on small screens (at the bottom). When the viewport is shrunk, the input fields are a left justified. I'd like them to be in the center of the viewport when the screen is XS. I've tried changing the Bootstrap 4 flex settings, but have yet to find a solution. Is there a way to do this in Bootstrap or SASS?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
<div class="row justify-content-center">
<div class="col-md-8 col-sm-8 col-xs-12">
<form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
<div class="form-group">
<label class="firstName" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
</div>
<div class="form-group">
<label class="lastName" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label class="eMail" for="eMail">Email Address</label>
<input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
</div>
<div class="form-group">
<label class="userName" for="userName">Preferred User Name</label>
<input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label class="passWord" for="passWord">Password</label>
<input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
</div>
<div class="form-group">
<label class="passWord_2" for="password_2">Confirm Password</label>
<input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary custom-btn">Register!</button>
</div>
</form>
</div>
<div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
<img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
</div>
</div>
</div>
<!-- End form container -->
{% endblock %}
You can use media queries to provide additional styles at specific breakpoints.
#media (max-width: 575px) {
.row.center-on-xs{ margin: 0 auto; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
<div class="row center-on-xs justify-content-center">
<div class="col-md-8 col-sm-8 col-xs-12">
<form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
<div class="form-group">
<label class="firstName" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
</div>
<div class="form-group">
<label class="lastName" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label class="eMail" for="eMail">Email Address</label>
<input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
</div>
<div class="form-group">
<label class="userName" for="userName">Preferred User Name</label>
<input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label class="passWord" for="passWord">Password</label>
<input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
</div>
<div class="form-group">
<label class="passWord_2" for="password_2">Confirm Password</label>
<input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary custom-btn">Register!</button>
</div>
</form>
</div>
<div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
<img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
</div>
</div>
</div>
<!-- End form container -->
{% endblock %}
I have this form group in Bootstrap 4 fiddle:
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<label class="col-lg-2 col-form-label">
Correo electrónico
</label>
<div class="col-lg-3">
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<label class="col-lg-2 col-form-label">
Nombre
</label>
<div class="col-lg-3">
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<label class="col-lg-2 col-form-label">
Apellido
</label>
<div class="col-lg-3">
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<label class="col-lg-2 col-form-label">
Perfil
</label>
<div class="col-lg-3">
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
</div>
</div>
I want something like this:
but for some reason it dont responsive at my row group as you can see in fiddle:
Anyone knows what am I doing wrong with it? Regards
This will do the job. You need to place label in the same div as input.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="col-lg-3">
<label>Correo electrónico</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="col-lg-3">
<label>Nombre</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="col-lg-3">
<label>Apellido</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="col-lg-3">
<label>Perfil</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
</div>
</div>
EDIT: you need to run the snippet in full screen to see the result. On smaller screen obviously you have everything in one column. It looks exactly as on your photo and this should be what you need.
Please take a look here
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label class="col-form-label">
Correo electrónico
</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label class="col-form-label">
Nombre
</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label class="col-form-label">
Apellido
</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label class="col-form-label">
Perfil
</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
</div>
</div>
I am using the following code to make a simple formular with bootstrap:
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
But the result is:
So, why is the search button above the other input fields ? Is there a way to recenter it without touching the responsiveness ?
Thank you
see snippet below .
first, your input fields were exceding the width of the col . so set max-width:100% to them
second, .btn has inline-block style , use display:block instead
let me know if it works for you
input {
max-width:100%
}
.form-group .btn {
display:block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
Add an empty label with on top of the button to align, like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"> </label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
Your button should not be in a form group, and additionally that's not the usual way to markup an inline form (using cols). See this example where I use some of your fields for brevity:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<form class="form-inline">
<div class="form-group">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<button type="submit" class="btn btn-default">recherche</button>
</form>
Add an <br/> after label , like this
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label><br />
<input type="email" value='' id="name1" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label><br />
<input type="email" value='' id="name2" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label><br />
<input type="email" value='' id="name3" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label><br />
<input type="email" value='' id="name4" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label><br />
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
I have the following markup
<form role="form">
<div class="input-group">
<label for="accountSpan">Account name</label>
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
</form>
which results in
How can I have it aligned like the password?
Try like this: Demo
If you use form-group along with input-group like you did for password, you can get your expected output.
<div class="form-group">
<label for="accountSpan">Account name</label>
<div class="input-group">
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput">
</div>
</div>
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<form role="form">
<div class="input-group">
<label for="accountSpan">Account name</label>
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name"
aria-describedby="basic-addon1" id="accountInput" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
Here your answer jsFiddle:
<form role="form">
<div class="form-group">
<label for="accountSpan">Account name</label>
<div class="input-group">
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
</form>