I've been trying to get a basic Bootstrap form layout to work but with no success for a while now.
Basically, all I want is for the avatar to be on the left and then the 4 inputs to the right side of it, grouped in 2 columns. This is what I have but there's spacing I can't get rid of: https://prnt.sc/u8xeft
My code:
<div class="card-body">
<div class="form-group row">
<div class="col-lg-2">
<div class="image-input image-input-outline" id="kt_image_1">
<div class="image-input-wrapper" style="background-image: url(/app/assets/img/users/<?php echo $userInfo[0]['avatar_path'];?>/avatar.jpg)"></div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/>
<input type="hidden" name="profile_avatar_remove"/>
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
<div class="col-lg-5">
<label>Nome próprio:</label>
<input type="text" name="firstName" class="form-control" value="<?php echo $userInfo[0]["first_name"];?>" autocomplete="off" required/>
<div class="invalid-feedback">
Por favor insira um nome válido
</div>
</div>
<div class="col-lg-5">
<label>Apelido:</label>
<input type="text" name="lastName" class="form-control" value="<?php echo $userInfo[0]["last_name"];?>" autocomplete="off" required/>
<div class="invalid-feedback">
Por favor insira um apelido válido
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-2"></div>
<div class="col-lg-5">
<label>Telefone:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="la la-phone"></i></span></div>
<input type="tel" name="telephone" minlength="9" maxlength="9" class="form-control" value="<?php echo $userInfo[0]["telephone"];?>" autocomplete="off" required/>
<div class="invalid-feedback">
Por favor insira um número de telefone válido
</div>
</div>
</div>
<div class="col-lg-5">
<label>Email:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="la la-at"></i></span></div>
<input type="email" type="email" name="email" class="form-control" value="<?php echo $userInfo[0]["email"];?>" autocomplete="off" required/>
<div class="invalid-feedback">
Por favor insira um email válido
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-lg-3">
<button id="btn_save" name="submit" type="submit" class="btn btn-primary mr-2" style="background: linear-gradient(45deg, rgba(3,130,138,1) 50%, rgba(176,209,51,1) 100%);color: white;border: white;" disabled><i class="far fa-save"></i> Guardar</button>
<button type="reset" class="btn btn-secondary mr-2">Cancelar</button>
</div>
</div>
Change Your HTML Like
<div class="card-body">
<div class="form-group row">
<div class="col-lg-2">
<div class="image-input image-input-outline" id="kt_image_1">
<div class="image-input-wrapper"
style="background-image: url(/app/assets/img/users/<?php echo $userInfo[0]['avatar_path'];?>/avatar.jpg)">
</div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg" />
<input type="hidden" name="profile_avatar_remove" />
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
<div class="col-lg-10">
<div class="row">
<div class="col-lg-6">
<label>Nome próprio:</label>
<input type="text" name="firstName" class="form-control" value="" autocomplete="off" required />
<div class="invalid-feedback">
Por favor insira um nome válido
</div>
</div>
<div class="col-lg-6">
<label>Apelido:</label>
<input type="text" name="lastName" class="form-control" value="" autocomplete="off" required />
<div class="invalid-feedback">
Por favor insira um apelido válido
</div>
</div>
<div class="col-lg-6">
<label>Telefone:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i
class="la la-phone"></i></span></div>
<input type="tel" name="telephone" minlength="9" maxlength="9" class="form-control" value=""
autocomplete="off" required />
<div class="invalid-feedback">
Por favor insira um número de telefone válido
</div>
</div>
</div>
<div class="col-lg-6">
<label>Email:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i
class="la la-at"></i></span></div>
<input type="email" type="email" name="email" class="form-control" value=""
autocomplete="off" required />
<div class="invalid-feedback">
Por favor insira um email válido
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-lg-3">
<button id="btn_save" name="submit" type="submit" class="btn btn-primary mr-2"
style="background: linear-gradient(45deg, rgba(3,130,138,1) 50%, rgba(176,209,51,1) 100%);color: white;border: white;"
disabled><i class="far fa-save"></i> Guardar</button>
<button type="reset" class="btn btn-secondary mr-2">Cancelar</button>
</div>
</div>
https://jsfiddle.net/lalji1051/k6wrhq0y/4/
You have one row for image, first name, last name and another row for Email and Telephone.
You should group Email with last name and telephone with first name.
your structure could be sth like this:
-Row
|
|-Col Image
|-Col
|- Row Name Propio
|- Row Telefone
|-Col
|- Row Apelido
|- Row Email
Related
error
<form [formGroup]="signUpForm">
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="firstName" type="text" placeholder="Ad">
</div>
</div>
<small
*ngIf="signUpForm.controls['fistName'].dirty && signUpForm.hasError('required', 'firstName')"
class="text-danger">*Ad gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="lastName" type="text" placeholder="Soyad">
</div>
</div>
<small
*ngIf="signUpForm.controls['lastName'].dirty && signUpForm.hasError('required', 'lastName')"
class="text-danger">*Soyad gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-envelope p-2"></span>
<input formControlName="email" type="text" placeholder="E-mail">
</div>
</div>
<small
*ngIf="signUpForm.controls['email'].dirty && signUpForm.hasError('required', 'email')"
class="text-danger">*E-mail gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="userName" type="text" placeholder="Kullanıcı Adı">
</div>
</div>
<small
*ngIf="signUpForm.controls['userName'].dirty && signUpForm.hasError('required', 'userName')"
class="text-danger">*Kullanıcı Adı gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-lock p-2"></span>
<input formControlName="password" [type]="type" placeholder="Şifre">
<span (click)="hideShowPass()" class="fa {{eyeIcon}}"></span>
</div>
</div>
<small
*ngIf="signUpForm.controls['password'].dirty && signUpForm.hasError('required', 'password')"
class="text-danger">*Şifre gerekli!</small>
<button type="submit" style="background-color: black; color:white;"
class="btn btn-black btn-block mt-4 w-100" (click)="onSignUp()">Kayıt Ol</button>
<div class=" text-center pt-4 text-muted">Zaten bir hesabın var mı? <a id="forget"
routerLink="/login">Oturum Aç</a>
</div>
</form>
`
This is my angular signup form but when I click the submit "(kayıt ol)" button, there is no interaction and a frame appears around the password section. How can I fix this? (When you click the Submit button, it should give a warning because there are spaces.)
Im having trouble with Angular 4 and html. I get unexpected closing tag first. When I remove the form closing tag, then I get the same error but with .
Im a rookie by the way, so it may be a very dumb mistake. Here is the code, thanks!
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mx-2">
<div class="card-block p-2">
<h1>Register</h1>
<p class="text-muted">Create your account</p>
<form *ngIf="creatingUser"
class="example-form"
(ngSubmit)="onSubmit(userForm)"
#userForm="ngForm"
fxFlexFill [fxLayout]="'row'"
fxLayoutAlign="center start">
<div class="input-group mb-1">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" fxFlex="100"
required
minlength="3"
placeholder="Username"
[(ngModel)]="user.profile.username"
name="username"
#username="ngModel">
</div>
<div class="input-group mb-1">
<span class="input-group-addon">#</span>
<input type="text" placeholder="Email" name="email" #email="ngModel" id="email"
required
pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$"
placeholder="Email"
[(ngModel)]="user.profile.email">
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="select">Select role</label>
<div class="col-md-9">
<select id="select" name="select" size="1" placeholder="Role" [(ngModel)]="user.role" name="role">
<option *ngFor="let role of roles" [value]="role">{{role.name}}</option>
</select>
</div>
</div>
<div class="input-group mb-1">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" placeholder="Password" name="password" #password="ngModel"
required
minlength="6"
[(ngModel)]="user.password">
</div>
<div class="input-group mb-2">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input class="form-control" name="repeatPassword" #repeatPassword="ngModel"
validateEqualTo="password"
type="password"
required
placeholder="Confirm Password"
[(ngModel)]="user.confirmPassword">
</div>
<button type="button" class="btn btn-block btn-success">Create Account</button>
<button type="button"
[color]="'warn'"
(click)="creatingNewUser(false)">
</button>
<button type="submit"
[color]="'primary'"
[disabled]="!userForm.form.valid">
</button>
</form>
<div *ngIf="!creatingUser">
<button [color]="'primary'" (click)="creatingNewUser(true)">
</button>
</div>
<div class="card-footer p-2">
<div class="row">
<div class="col-6">
<button class="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
</div>
<div class="col-6">
<button class="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have one extra </div> at bottom. You can check it here - html linter
I have a problem with layout bootstrap. I want the search button to remain at the end of the line.
Here is my code:
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset" >clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button> //this not part form input
output:
I want the layout like this:
How can this resolved?
1)Place search button into the form.
2) If you don't want to place the search button into the form, then try the below code.
Just, make the form inline.
form {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset">clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button>
Note: View the output in full page mode.
Ive got my login form too wide, it takes 80% of the pages width as you could see the picture below.
I'm using default bootstrap.min.css
Heres the html code i use
<div class="modal-body">
<h3>Login with your CZCNR account!</h3>
<form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf">
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" />
<label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label>
</div>
</div>
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" />
<label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button>
<button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button>
</div>
</form>
</div>
Any help would be appreciated
Thanks in advance.
Try this
HTML
<div class="row">
<div class="col-md-6 col-md-offset-2">
<div class="modal-body ">
<h3>Login with your CZCNR account!</h3>
<form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf">
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" />
<label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label>
</div>
</div>
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" />
<label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button>
<button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button>
</div>
</form>
</div> </div> </div>
Demo Here
You can add a width style attribute in your very first div tag.
<div class="modal-body" style="width:400px;">
<h3>Login with your CZCNR account!</h3>
<form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf">
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" />
<label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label>
</div>
</div>
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" />
<label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button>
<button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button>
</div>
</form>
</div>
I want to use bootstrap panel to create advance search design.
Like in this image:
My HTML is this:
<div class="panel panel-primary aplxpert-distanta-sus" id="Antet">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left aplxpert-distanta-sus">Test List</h3>
<div class="btn-group pull-right">
<div class="row form-inline">
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label aplxpert-distanta-sus" for="Nume">Search:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="name......" id="cauta">
<span class="input-group-btn">
<button title="Click for search" type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1">
<a title="Advance Search" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-body panel-collapse collapse">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume aa:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume aa:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume bb:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume bb:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume cc:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume cc:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="panel-footer">
<strong>Result return for this criterias:</strong> nume: Popescu Ion, data: 04.05.2014, CNP: 1361813282206
</div>
</div>
Something like this: http://jsfiddle.net/nkS2e/4/
How i can do this more better because on resize not work good and in not the best way.