Bootstrap3 HTML set <label> length in a input-group - html

I would like to make all the label having the same size as the img below:
This is the HTML snippet:
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ form.area_construida.label }}</label></span>
<input class="form-control"
id="id_{{ form.area_construida.name }}"
name="{{ form.area_construida.name }}"
value="{{ form.area_construida.value }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ form.area_total.label }}</label></span>
<input class="form-control"
id="id_{{ form.area_total.name }}"
name="{{ form.area_total.name }}"
value="{{ form.area_total.value }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control" data-validation="date" data-validation-format="yyyy-mm-dd"
id="id_{{ form.data_construcao.name }}"
name="{{ form.data_construcao.name }}"
value="{{ form.data_construcao.value }}"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
I tried some stuff but no success. Thanks.


label { width: 70px;} u can set width to label like this.
fiddle : https://jsfiddle.net/rtdtsy17/1/


Is something like this sufficient?
span.input-group-addon{width:50%}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Area construida</label></span>
<input class="form-control"
id="id_{{ form.area_construida.name }}"
name="{{ form.area_construida.name }}"
value="222"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Area total</label></span>
<input class="form-control"
id="id_{{ form.area_total.name }}"
name="{{ form.area_total.name }}"
value="111"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control" data-validation="date" data-validation-format="yyyy-mm-dd"
id="id_{{ form.data_construcao.name }}"
name="{{ form.data_construcao.name }}"
value="11/12/2011"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>

Related

How to edit an object using a view function and its template in Django

I am having template that I got from one of mu front-end developers who is not familiar with python and Django. In order to keep the design as it is right now, I would liketo use only template and its view for objects modification, instead there is a way to use the same design by using forms.py.
For your information, I was able to use the same desing in the adding function but in the editing function it is not working.
How can I do it without having to change the front-design?
Temlapte.html
{% extends 'base.html' %}
{% load static %}
{% block title %}
<title>Liste des employés</title>
{% endblock title %}
{% block content %}
<!-- Main Wrapper -->
<div class="main-wrapper">
<div class="page-wrapper">
<!-- Page Content -->
<div class="content container-fluid">
<!-- Page Header -->
<div class="page-header">
<div class="row align-items-center">
<div class="col">
<h3 class="page-title">Employé</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item">Tableau de bord</li>
<li class="breadcrumb-item active">Employé</li>
</ul>
</div>
<div class="col-auto float-end ms-auto">
<i class="fa fa-plus"></i> Ajouter un employé
<div class="view-icons">
<i class="fa fa-th"></i>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
<!-- /Page Header -->
<!-- Search Filter -->
<div class="row filter-row">
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus">
<input type="text" class="form-control floating">
<label class="focus-label">ID employé</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus">
<input type="text" class="form-control floating">
<label class="focus-label">Nom employé</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus select-focus">
<select class="select" name="service">
<option value="">Selectionner une grade</option>
{% for grade in listeGrade %}
<option value="{{ grade.id }}">{{ grade.niveau_grade }}</option>
{% endfor %}
</select>
<label class="focus-label">Grade</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="d-grid">
Rechercher
</div>
</div>
</div>
<!-- Search Filter -->
<div class="row staff-grid-row">
{% for emp in listEmp %}
<div class="col-md-4 col-sm-6 col-12 col-lg-4 col-xl-3">
<div class="profile-widget">
{% if emp.photo %}
<div class="profile-img">
<img src="{{ emp.photo.url }}" alt="">
</div>
{% endif %}
<div class="dropdown profile-action">
<i class="material-icons">more_vert</i>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{% url 'hr:edit-employee' emp.id %}" data-bs-toggle="modal" data-bs-target="#edit_employee"><i class="fa fa-pencil m-r-5"></i> Modifier</a>
<a class="dropdown-item" href="{% url 'hr:remove-employee' emp.id %}" data-bs-toggle="modal" data-bs-target="#delete_employee"><i class="fa fa-trash-o m-r-5"></i> Supprimer</a>
</div>
</div>
<h4 class="user-name m-t-10 mb-0 text-ellipsis">{{ emp.nom}} {{ emp.prenom}}</h4>
<div class="small text-muted">{{ emp.qualification }}</div>
</div>
</div>
{% endfor %}
</div>
<!-- /Page Content -->
<!-- Add Employee Modal -->
<div id="add_employee" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Ajouter une employé</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post" enctype="multipart/form-data"> {% csrf_token %}
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">ID employé <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="id_Personnel">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Prénom <span class="text-danger">*</span></label>
<input class="form-control" type="text", name="prenom">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Nom</label>
<input class="form-control" type="text" name="nom">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Date de naissance<span class="text-danger">*</span></label>
<div class="cal-icon"><input class="form-control" type="text" name="date_de_naissance" placeholder="YYYY-MM-DD"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Sexe <span class="text-danger">*</span></label>
<select class="select" name="sexe">
<option>Selectionner le sexe</option>
<option value="M">Masculin</option>
<option value="F">Féminin</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">CIN <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="CIN">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Photo</label>
<input class="form-control" type="file" name="photo">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Téléphone <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="telephone">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Email</label>
<input class="form-control" type="email" name="email">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Adresse actuelle<span class="text-danger">*</span></label>
<input class="form-control" type="text" name="adresse_actuelle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Adresse permanente<span class="text-danger">*</span></label>
<input type="text" class="form-control" name="adresse_permanente">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Date d'embauche<span class="text-danger">*</span></label>
<div class="cal-icon"><input class="form-control" type="text" name="date_de_recrutement" placeholder="YYYY-MM-DD"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Service <span class="text-danger">*</span></label>
<select class="select" name="service">
<option value="">Selectionner un service</option>
{% for service in listeService %}
<option value="{{ service.id }}">{{ service.Service }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Diplôme obtenu <span class="text-danger">*</span></label>
<select class="select" name="diplome_obtenu">
<option>Selectionner un diplôme</option>
<option value="DEUG">DEUG</option>
<option value="LICENCE">LICENCE</option>
<option value="MAITRISE">MAITRISE</option>
<option value="MASTER">MASTER</option>
<option value="DOCTORAT">DOCTORAT</option>
<option value="AUTRE">AUTRE</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Qualification </label>
<input class="form-control" type="text" name="qualification">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Grade</label>
<select class="select" name="grade">
<option value="">Selectionner une grade</option>
{% for grade in listeGrade %}
<option value="{{ grade.id }}">{{ grade.niveau_grade }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="submit-section">
<button class="btn btn-primary submit-btn">Enrégistrer</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /Add Employee Modal -->
<!-- Edit Employee Modal -->
<div id="edit_employee" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier un employé</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">ID employé <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="id_Personnel" value="{{ emp_name.id_Personnel }}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Prénom <span class="text-danger">*</span></label>
<input class="form-control" type="text", name="prenom" value="{{ emp_name.prenom }}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Nom</label>
<input class="form-control" type="text" name="nom" value="{{ emp_name.nom }}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Date de naissance<span class="text-danger">*</span></label>
<div class="cal-icon"><input class="form-control datetimepicker" type="text" name="date_de_naissance" value="{{ emp_name.date_de_naissance }}"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Sexe <span class="text-danger">*</span></label>
<select class="select" name="sexe">
<option>Selectionner le sexe</option>
<option value="M" {% ifequal emp_name.sexe M %} selected="selected"{% endifequal %} >Masculin</option>
<option value="F" value="M" {% ifequal emp_name.sexe F %} selected="selected"{% endifequal %}>Féminin</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">CIN <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="CIN" value="{{ emp_name.CIN }}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Photo</label>
<input class="form-control" type="file" name="photo" value="{{ emp_name.photo }}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Téléphone <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="telephone">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Email</label>
<input class="form-control" type="email" name="email" value="{{emp_name.email}}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Adresse actuelle<span class="text-danger">*</span></label>
<input class="form-control" type="text" name="adresse_actuelle" value="{{emp_name.adresse_actuelle}}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Adresse permanente<span class="text-danger">*</span></label>
<input type="text" class="form-control" name="adresse_permanente" value="{{emp_name.adresse_permanente}}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Date d'embauche<span class="text-danger">*</span></label>
<div class="cal-icon"><input class="form-control datetimepicker" type="text" name="date_de_recrutement" value="date_de_recrutement"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Service <span class="text-danger">*</span></label>
<select class="select" name="service">
<option value="">Selectionner un service</option>
{% for service in listeService %}
<option value="{{ service.id }}" value="emp_name.service">{{ service.Service }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Diplôme obtenu <span class="text-danger">*</span></label>
<select class="select" name="diplome_obtenu">
<option>Selectionner un diplôme</option>
<option value="DEUG">DEUG</option>
<option value="LICENCE">LICENCE</option>
<option value="MAITRISE">MAITRISE</option>
<option value="MASTER">MASTER</option>
<option value="DOCTORAT">DOCTORAT</option>
<option value="AUTRE">AUTRE</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-form-label">Qualification </label>
<input class="form-control" type="text" name="qualification">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Grade</label>
<select class="select" name="grade">
<option value="">Selectionner une grade</option>
{% for grade in listeGrade %}
<option value="{{ grade.id }}">{{ grade.niveau_grade }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="submit-section">
<button class="btn btn-primary submit-btn">Enregistrer les modifications</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /Edit Employee Modal -->
</div>
<!-- /Page Wrapper -->
</div>
<!-- /Main Wrapper -->
{% endblock content %}
Adding views:
def ListEmployeeGrid(request):
template ='employees/employees.html'
listEmp=Personnel.objects.all()
listeGrade=Grades.objects.all()
listeService=Services.objects.all()
form = EmployeeAddForm(request.POST or None,request.FILES)
if request.method=='POST':
# if forms.is_valid():
Personnel.objects.create(
id_Personnel=request.POST["id_Personnel"],
photo = request.FILES["photo"],
prenom = request.POST["prenom"],
nom = request.POST["nom"],
sexe= request.POST["sexe"],
date_de_naissance= request.POST["date_de_naissance"],
CIN = request.POST['CIN'],
telephone =request.POST["telephone"],
email = request.POST["email"],
adresse_actuelle = request.POST["adresse_actuelle"],
adresse_permanente = request.POST["adresse_permanente"],
diplome_obtenu = request.POST["diplome_obtenu"],
qualification = request.POST["qualification"],
grade = Grades.objects.get(id=request.POST["grade"]),
date_de_recrutement = request.POST["date_de_recrutement"],
service = Services.objects.get(id=request.POST["service"]),
create_date = date.today(),
updateDate = date.today(),
)
# return redirect('hr:list_employee')
context={
'listEmp':listEmp,
'listeGrade':listeGrade,
'listeService':listeService
}
return render(request, template, context)
Employ edition view
def Edit_Employee(request, id):
emp_name=get_object_or_404(Personnel,id=id)
listEmp=Personnel.objects.all()
listeGrade=Grades.objects.all()
listeService=Services.objects.all()
Personnel.objects.update_or_create(
id_Personnel=request.POST["id_Personnel"],
photo = request.FILES["photo"],
prenom = request.POST["prenom"],
nom = request.POST["nom"],
sexe= request.POST["sexe"],
date_de_naissance= request.POST["date_de_naissance"],
CIN = request.POST['CIN'],
telephone =request.POST["telephone"],
email = request.POST["email"],
adresse_actuelle = request.POST["adresse_actuelle"],
adresse_permanente = request.POST["adresse_permanente"],
diplome_obtenu = request.POST["diplome_obtenu"],
qualification = request.POST["qualification"],
grade = Grades.objects.get(id=request.POST["grade"]),
date_de_recrutement = request.POST["date_de_recrutement"],
service = Services.objects.get(id=request.POST["service"]),
create_date = date.today(),
updateDate = date.today(),)
return render(request,'employees/employees.html',
{
"emp_name": emp_name,
"listEmp":listEmp,
"listeService":listeService,
"listeGrade":listeGrade,
}
)

How to make inputs of a row at the same line vertically with the inputs of the next row?

I am making a member registration form and I want to make or set inputs of a row at the same line vertically with the inputs of the next row. I made a display:flex div and put inside it the inputs that I want them inline, but I couldn't set them at the same line vertically with the inputs of the next row.
I am trying to get it like this
https://i.ibb.co/SscFZvw/reg.png
<link rel="stylesheet" href="https://dl.dropbox.com/s/67bh94g7thmfl8h/bootstrap.css" />
<link href="https://dl.dropbox.com/s/dfc2odz62i3h6zx/style.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropbox.com/s/8b5z3fkk887injx/megamenu.css" rel="stylesheet" type="text/css" media="all" />
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-1" style="margin: 0 auto;width:100%">
<div class="panel panel-default">
<div class="panel-heading">Member Registration</div>
<br>
<form class="form-horizontal" method="POST" action="/member_reg" enctype="multipart/form-data">
<div style="display:flex;">
<div class="form-group{{ $errors->has('membership_date') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Membership Date</label>
<div class="col-md-6">
<input type="text" class="form-control" name="membership_date" value="{{ old('membership_date') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('membership_no.') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Membership No.</label>
<div class="col-md-6">
<input type="text" class="form-control" name="membership_no." value="{{ old('membership_no.') }}" required="required">
</div>
</div>
</div>
<div style="display:flex;">
<div class="form-group{{ $errors->has('member_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Member Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="member_name" value="{{ old('member_name') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('father_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Father Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="father_name" value="{{ old('father_name') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('mother_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Mother Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="mother_name" value="{{ old('mother_name') }}" required="required">
</div>
</div>
</div>
<div style="display:flex;">
<div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Birth Date</label>
<div class="col-md-6">
<input type="text" class="form-control" name="birth_date" value="{{ old('birth_date') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('birth_place') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Birth Place</label>
<div class="col-md-6">
<input type="text" class="form-control" name="birth_place" value="{{ old('birth_place') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Gender</label>
<div class="col-md-6">
<input type="text" class="form-control" name="gender" value="{{ old('gender') }}" required="required">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

This is a great use case for CSS grid, if you don't need to support IE11 (you can still use grid with IE10+ but it's just more work). See below, if you remove your flex containers and then just turn your form into a 3 column grid container it will work as intended (see the style tag at the end of body). Note that I added an empty placeholder div to create that whitespace on the first row.
.form-horizontal {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px
}
<head>
<html>
<link rel="stylesheet" href="https://dl.dropbox.com/s/67bh94g7thmfl8h/bootstrap.css" />
<link href="https://dl.dropbox.com/s/dfc2odz62i3h6zx/style.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropbox.com/s/8b5z3fkk887injx/megamenu.css" rel="stylesheet" type="text/css" media="all" />
</head>
</html>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-1" style="margin: 0 auto;width:100%">
<div class="panel panel-default">
<div class="panel-heading">Member Registration</div>
<br>
<form class="form-horizontal" method="POST" action="/member_reg" enctype="multipart/form-data">
<!-- <div style="display:flex;"> -->
<div class="form-group{{ $errors->has('membership_date') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Membership Date</label>
<div class="col-md-6">
<input type="text" class="form-control" name="membership_date" value="{{ old('membership_date') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('membership_no.') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Membership No.</label>
<div class="col-md-6">
<input type="text" class="form-control" name="membership_no." value="{{ old('membership_no.') }}" required="required">
</div>
</div>
<!-- ADD EMPTY DIV PLACEHOLDER -->
<div class="placeholder_item"></div>
<!-- </div> -->
<!-- <div style="display:flex;"> -->
<div class="form-group{{ $errors->has('member_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Member Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="member_name" value="{{ old('member_name') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('father_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Father Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="father_name" value="{{ old('father_name') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('mother_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Mother Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="mother_name" value="{{ old('mother_name') }}" required="required">
</div>
</div>
<!-- </div> -->
<!-- <div style="display:flex;"> -->
<div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Birth Date</label>
<div class="col-md-6">
<input type="text" class="form-control" name="birth_date" value="{{ old('birth_date') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('birth_place') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Birth Place</label>
<div class="col-md-6">
<input type="text" class="form-control" name="birth_place" value="{{ old('birth_place') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Gender</label>
<div class="col-md-6">
<input type="text" class="form-control" name="gender" value="{{ old('gender') }}" required="required">
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</div>

How can I do this Input as a Dropdown button

How can I do this Input as a Dropdown button in bootstrap
<div class="form-group">
<label class="col-md-4 control-label" for="user_type">Tipi userit</label>
<div class="col-md-8">
<input id="user_type" name="user_type" type="text" placeholder="Tipi i Userit Admin/Editor/User" class="form-control input-md" value="{{ old('user_type') }}" required>
#if ($errors->has('user_type'))
<span class="help-block">
<strong>{{ $errors->first('user_type') }}</strong>
</span>
#endif
</div>
</div>

HTML, Bootstrap3 - Inline form, how to set the field length?

I have the following form but I am having some trouble to make all the fields of the same length. As a matter of fact, is the code too long? I am a begginer so I don't know if I am repeating a lot of code.
Here is the html piece:
<div class="panel panel-default">
<div class = "panel-heading">
Informações do Imóvei
</div>
<div class="panel-body">
<div class="form-inline">
<label class="control-label">{{anuncioForm.tipo_imovel.label}}</label>
<p>Selecione o tipo do seu imóvel</p>
<select class="form-control control-label"
id="id_{{ anuncioForm.tipo_imovel.name }}"
name="anuncioForm.tipo_imovel.name">
<option value="" selected="selected">---------</option>
<option value="Casa">Casa</option>
<option value="Apartamento">Apartamento</option>
<option value="Comercial">Comercial</option>
</select>
</div>
<br>
<div class="form-group">
<label for="exampleTextarea">Descrição do imóvel</label>
<p>Descreva com o máximo de detalhes o seu imóvel</p>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<br>
<p><b>Características do imóvel</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.quartos.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.quartos.name }}"
name="id_{{ anuncioForm.quartos.name }}"
type="text"/>
</div>
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.suites.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.suites.name }}"
name="id_{{ anuncioForm.suites.name }}"
type="text"/>
</div>
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.banheiros.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.banheiros.name }}"
name="id_{{ anuncioForm.banheiros.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_construida.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_construida.name }}"
name="id_{{ anuncioForm.area_construida.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_total.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_total.name }}"
name="id_{{ anuncioForm.area_total.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control"
id="id_{{ anuncioForm.data_construcao.name }}"
name="id_{{ anuncioForm.data_construcao.name }}"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
<br>
<p><b>Preço de Venda</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_venda.name }}"
name="id_{{ anuncioForm.preco_venda.name }}"
type="text"/>
</div>
</div>
<br>
<p><b>Preço do Aluguel</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_aluguel.name }}"
name="id_{{ anuncioForm.preco_aluguel.name }}"
type="text"/>
</div>
</div>
<br>
</div>
So, what do you suggest me?

You can take advantage of bootstrap grids col-xx-xx or adjust your input width externally.
Better read this: https://v4-alpha.getbootstrap.com/components/input-group/ and https://stackoverflow.com/a/25017998/6107715
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
<style>
/*.input-group{min-width: 200px; max-height: 500px;}*/
</style>
</head>
<div class="panel panel-default">
<div class="panel-body">
<br>
<p><b>Características do imóvel</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.quartos.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.quartos.name }}"
name="id_{{ anuncioForm.quartos.name }}"
type="text"/>
</div>
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.suites.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.suites.name }}"
name="id_{{ anuncioForm.suites.name }}"
type="text"/>
</div>
<div class="col-xs-3 col-sm-3 input-group ">
<span class="input-group-addon"><label>{{ anuncioForm.banheiros.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.banheiros.name }}"
name="id_{{ anuncioForm.banheiros.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_construida.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_construida.name }}"
name="id_{{ anuncioForm.area_construida.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_total.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_total.name }}"
name="id_{{ anuncioForm.area_total.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control"
id="id_{{ anuncioForm.data_construcao.name }}"
name="id_{{ anuncioForm.data_construcao.name }}"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
<form class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<label class="input-group-addon" for="exampleInput">Name</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
</div>
</form>
<br>
<p><b>Preço de Venda</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_venda.name }}"
name="id_{{ anuncioForm.preco_venda.name }}"
type="text"/>
</div>
</div>
<br>
<p><b>Preço do Aluguel</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_aluguel.name }}"
name="id_{{ anuncioForm.preco_aluguel.name }}"
type="text"/>
</div>
</div>
<br>
</div>

I think your issue is that you are putting on every input. it should be :
<form class="form-inline">
<div class="form-group">
<label for="exampleInput">Name</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
</div>
</form>
Then, apply your width settings to the class
.form-group
this will adjust the width of the label and input to match as they will auto adjust.
Hope this helps.

Bootstrap: How to avoid responsivity of the form inputs?

I have form like this:
And if i shrink display size to more than half of width i got this.
How can i disable this behavior in default please?
Thanks for any advice.
EDIT:
Code of the template with form:
<div class="container customContainer" id="workerDetail" data-ng-controller="LocationsCtrl"
ng-init="initEmptyLocation();"
xmlns="http://www.w3.org/1999/html">
<!-- DEBUG DIV -->
<div class="debugDiv" ng-show="$root.debugable == true">
{{locationDetail}}
</div>
<div class="page-header">
<ul class="pager">
<li class="previous">← </li>
<li class="previous"><a class="savecstbtn">
<button
type="button"
class="btn btn-xs savecstbtn btn-link"
ng-click="createLocation(locationDetail)"
ng-disabled="locationForm.$invalid"
>
{{ 'SAVE' | translate }}
</button>
</a>
</li>
</ul>
<h1 class="savecstbtnHeading">{{ 'NEW_LOCATION' | translate }} </h1>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-target="#home" data-toggle="tab">{{ 'INFO' | translate }}</a></li>
<!--<li><a data-target="#activities" data-toggle="tab">{{ 'PROJECTS' | translate }}</a></li>-->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- USER DETAIL -->
<div class="tab-pane active" id="home">
<div class="row detailPaddingTop">
<form role="form" name="locationForm" id="locationForm" class="detailForm">
<!-- USER EDIT FORM PART 0 -->
<div class="col-md-3 column">
<div class="form-group">
<label for="city">{{ 'ADDRESS_CITY' | translate }} </label>
<input type="text" ng-model="locationDetail.address.city" class="form-control" id="city"/>
</div>
<div class="form-group">
<label for="street">{{ 'ADDRESS_STREET' | translate }} </label>
<input type="text" ng-model="locationDetail.address.street" class="form-control" id="street"/>
</div>
<div class="form-group">
<label for="streetNumber">{{ 'ADDRESS_STREET_NO' | translate }}</label>
<input type="text" ng-model="locationDetail.address.streetNumber" class="form-control" id="streetNumber"/>
</div>
<div class="form-group">
<label for="district">{{ 'ADDRESS_DISTRICT' | translate }}</label>
<input type="text" ng-model="locationDetail.address.district" class="form-control" id="district"/>
</div>
<div class="form-group col-md-6">
<label for="latitude" class="">{{ 'ADDRESS_LAT' | translate }} {{ '*' | translate }}</label>
<input type="text" ng-model="locationDetail.address.latitude"
class="form-control gpsLat"
id="latitude" required/>
</div>
<div class="form-group col-md-6">
<label for="longitude">{{ 'ADDRESS_LON' | translate }} {{ '*' | translate }}</label>
<input type="text" ng-model="locationDetail.address.longitude"
class="form-control gpsLon"
id="longitude" required/>
</div>
</div>
<!-- USER EDIT FORM PART 2 -->
<div class="col-md-3 column">
<div class="form-group">
<label for="siteId">{{ 'SITEID' | translate }} {{ '*' | translate }}</label>
<input type="text" ng-model="locationDetail.siteId"
class="form-control" id="siteId" required/>
</div>
<div class="form-group">
<label for="shared">{{ 'SHARED' | translate }}</label>
<select id="shared" ng-model="locationDetail.shared" class="form-control">
<option value="true">{{ 'YES' | translate }}</option>
<option value="false">{{ 'NO' | translate }}</option>
</select>
</div>
<div class="form-group">
<label for="sapSacIrnCode">{{ 'SAPSACIRNCODE' | translate }}</label>
<input type="text" ng-model="locationDetail.sapSacIrnCode" class="form-control" id="sapSacIrnCode"/>
</div>
<div class="form-group">
<label for="stationType">{{ 'STATION_TYPE' | translate }} {{ '*' | translate }}</label>
<input kendo-auto-complete
required
ng-minlength=1
id="stationType"
class="form-control"
ng-model="locationDetail.stationType.name"
k-options="customOptionsStationType"/>
</div>
</div>
<!-- USER EDIT FORM PART 1 -->
<div class="col-md-3 column">
<div class="form-group">
<label for="abloyLocation">{{ 'ABBLOY_LOCATION' | translate }}</label>
<input type="text" ng-model="locationDetail.abloyLocation" class="form-control" id="abloyLocation"/>
</div>
<div class="form-group">
<label for="bsc">{{ 'BSC' | translate }} </label>
<input type="text" ng-model="locationDetail.bsc" class="form-control" id="bsc"/>
</div>
<div class="form-group">
<label for="indoorOutdoor">{{ 'INDOOR_OUTDOOR' | translate }} {{ '*' | translate }}</label>
<select id="indoorOutdoor" ng-model="locationDetail.indoorOutdoor" class="form-control" required>
<option value="Indoor">{{ 'INDOOR' | translate }}</option>
<option value="Outdoor">{{ 'OUTDOOR' | translate }}</option>
<option value="IndoorOutdoor">{{ 'INDOOR_OUTDOOR_TYPE' | translate }}</option>
</select>
</div>
<div class="form-group">
<label for="partner">{{ 'PARTNER' | translate }} {{ '*' | translate }}</label>
<input kendo-auto-complete
id="partner"
class="form-control"
ng-model="locationDetail.partner.name"
k-options="customOptionsPartner"
/>
</div>
</div>
<!-- USER EDIT FORM PART 3 -->
<div class="col-md-3 column">
<div class="form-group">
<label for="accessNote">{{ 'NOTE' | translate }}</label>
<textarea id="accessNote" ng-model="locationDetail.accessNote" rows="14" cols="34">
</textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Its not the fields you should look at, its the grid, you have columns set to col-md or col-sm, change them to col-xs, if you want to disable responsiveness on the entire website then read this: http://getbootstrap.com/examples/non-responsive
like paul mentioned