Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Panel Form"
Bootstrap 3.3.0 Snippet by
g0riloun
3.3.0
panel
Preview
HTML
CSS
View Full Screen
Fork
Fork this
25.9K
 
7 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- beauty font ROBOTO --> <link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'> <div class="container"> <div class="row"> <div class="col-md-12"> <form id="candidatedata" class="form-horizontal" method="POST" role="form" action="/Candidate/editprofileex/"> <input type="hidden" name="idUser" value="2904"> <input type="hidden" name="userKey" value="d8babe719ffafafd59bc9d802fb3fdb1"> <div class="row"> <div class="col-md-offset-2 col-md-8"> <div class="panel"> <div class="panel-heading custom-header-panel"> <h3 class="panel-title roboto">Profile info</h3> </div> <div class="panel-body"> <div class="form-group"> <label class="col-sm-4 control-label" for="name">Full Name <span class="requerido"> *</span></label> <div class="col-sm-8"> <input type="text" class="form-control" name="name" id="name" value="" oninvalid="this.setCustomValidity('Campo requerido')" oninput="setCustomValidity('')" required="" maxlength="70"> </div> </div> <div class="form-group"> <label for="country" class="col-sm-4 control-label">Nationality<span class="requerido"> *</span></label> <div class="col-sm-8"> <select id="country" name="country" class="form-control" required=""> <option value="" disabled="" selected="">Select your nationality</option> <option value="1">Afganistán</option> <option value="2">Islas Gland</option> <option value="3">Albania</option> <option value="4">Alemania</option> <option value="5">Andorra</option> <option value="6">Angola</option> <option value="7">Anguilla</option> <option value="8">Antártida</option> <option value="9">Antigua y Barbuda</option> <option value="10">Antillas Holandesas</option> <option value="11">Arabia Saudí</option> <option value="12">Argelia</option> <option value="13">Argentina</option> <option value="14">Armenia</option> <option value="15">Aruba</option> <option value="16">Australia</option> <option value="17">Austria</option> <option value="18">Azerbaiyán</option> <option value="19">Bahamas</option> <option value="20">Bahréin</option> <option value="21">Bangladesh</option> <option value="22">Barbados</option> <option value="23">Bielorrusia</option> <option value="24">Bélgica</option> <option value="25">Belice</option> <option value="26">Benin</option> <option value="27">Bermudas</option> <option value="28">Bhután</option> <option value="29">Bolivia</option> <option value="30">Bosnia y Herzegovina</option> <option value="31">Botsuana</option> <option value="32">Isla Bouvet</option> <option value="33">Brasil</option> <option value="34">Brunéi</option> <option value="35">Bulgaria</option> <option value="36">Burkina Faso</option> <option value="37">Burundi</option> <option value="38">Cabo Verde</option> <option value="39">Islas Caimán</option> <option value="40">Camboya</option> <option value="41">Camerún</option> <option value="42">Canadá</option> <option value="43">República Centroafricana</option> <option value="44">Chad</option> <option value="45">República Checa</option> <option value="46">Chile</option> <option value="47">China</option> <option value="48">Chipre</option> <option value="49">Isla de Navidad</option> <option value="50">Ciudad del Vaticano</option> <option value="51">Islas Cocos</option> <option value="52">Colombia</option> <option value="53">Comoras</option> <option value="54">República Democrática del Congo</option> <option value="55">Congo</option> <option value="56">Islas Cook</option> <option value="57">Corea del Norte</option> <option value="58">Corea del Sur</option> <option value="59">Costa de Marfil</option> <option value="60">Costa Rica</option> <option value="61">Croacia</option> <option value="62">Cuba</option> <option value="63">Dinamarca</option> <option value="64">Dominica</option> <option value="65">República Dominicana</option> <option value="66">Ecuador</option> <option value="67">Egipto</option> <option value="68">El Salvador</option> <option value="69">Emiratos Árabes Unidos</option> <option value="70">Eritrea</option> <option value="71">Eslovaquia</option> <option value="72">Eslovenia</option> <option value="73">España</option> <option value="74">Islas ultramarinas de Estados Unidos</option> <option value="75">Estados Unidos</option> <option value="76">Estonia</option> <option value="77">Etiopía</option> <option value="78">Islas Feroe</option> <option value="79">Filipinas</option> <option value="80">Finlandia</option> <option value="81">Fiyi</option> <option value="82">Francia</option> <option value="83">Gabón</option> <option value="84">Gambia</option> <option value="85">Georgia</option> <option value="86">Islas Georgias del Sur y Sandwich del Sur</option> <option value="87">Ghana</option> <option value="88">Gibraltar</option> <option value="89">Granada</option> <option value="90">Grecia</option> <option value="91">Groenlandia</option> <option value="92">Guadalupe</option> <option value="93">Guam</option> <option value="94">Guatemala</option> <option value="95">Guayana Francesa</option> <option value="96">Guinea</option> <option value="97">Guinea Ecuatorial</option> <option value="98">Guinea-Bissau</option> <option value="99">Guyana</option> <option value="100">Haití</option> <option value="101">Islas Heard y McDonald</option> <option value="102">Honduras</option> <option value="103">Hong Kong</option> <option value="104">Hungría</option> <option value="105">India</option> <option value="106">Indonesia</option> <option value="107">Irán</option> <option value="108">Iraq</option> <option value="109">Irlanda</option> <option value="110">Islandia</option> <option value="111">Israel</option> <option value="112">Italia</option> <option value="113">Jamaica</option> <option value="114">Japón</option> <option value="115">Jordania</option> <option value="116">Kazajstán</option> <option value="117">Kenia</option> <option value="118">Kirguistán</option> <option value="119">Kiribati</option> <option value="120">Kuwait</option> <option value="121">Laos</option> <option value="122">Lesotho</option> <option value="123">Letonia</option> <option value="124">Líbano</option> <option value="125">Liberia</option> <option value="126">Libia</option> <option value="127">Liechtenstein</option> <option value="128">Lituania</option> <option value="129">Luxemburgo</option> <option value="130">Macao</option> <option value="131">ARY Macedonia</option> <option value="132">Madagascar</option> <option value="133">Malasia</option> <option value="134">Malawi</option> <option value="135">Maldivas</option> <option value="136">Malí</option> <option value="137">Malta</option> <option value="138">Islas Malvinas</option> <option value="139">Islas Marianas del Norte</option> <option value="140">Marruecos</option> <option value="141">Islas Marshall</option> <option value="142">Martinica</option> <option value="143">Mauricio</option> <option value="144">Mauritania</option> <option value="145">Mayotte</option> <option value="146">México</option> <option value="147">Micronesia</option> <option value="148">Moldavia</option> <option value="149">Mónaco</option> <option value="150">Mongolia</option> <option value="151">Montserrat</option> <option value="152">Mozambique</option> <option value="153">Myanmar</option> <option value="154">Namibia</option> <option value="155">Nauru</option> <option value="156">Nepal</option> <option value="157">Nicaragua</option> <option value="158">Níger</option> <option value="159">Nigeria</option> <option value="160">Niue</option> <option value="161">Isla Norfolk</option> <option value="162">Noruega</option> <option value="163">Nueva Caledonia</option> <option value="164">Nueva Zelanda</option> <option value="165">Omán</option> <option value="166">Países Bajos</option> <option value="167">Pakistán</option> <option value="168">Palau</option> <option value="169">Palestina</option> <option value="170">Panamá</option> <option value="171">Papúa Nueva Guinea</option> <option value="172">Paraguay</option> <option value="173">Perú</option> <option value="174">Islas Pitcairn</option> <option value="175">Polinesia Francesa</option> <option value="176">Polonia</option> <option value="177">Portugal</option> <option value="178">Puerto Rico</option> <option value="179">Qatar</option> <option value="180">Reino Unido</option> <option value="181">Reunión</option> <option value="182">Ruanda</option> <option value="183">Rumania</option> <option value="184">Rusia</option> <option value="185">Sahara Occidental</option> <option value="186">Islas Salomón</option> <option value="187">Samoa</option> <option value="188">Samoa Americana</option> <option value="189">San Cristóbal y Nevis</option> <option value="190">San Marino</option> <option value="191">San Pedro y Miquelón</option> <option value="192">San Vicente y las Granadinas</option> <option value="193">Santa Helena</option> <option value="194">Santa Lucía</option> <option value="195">Santo Tomé y Príncipe</option> <option value="196">Senegal</option> <option value="197">Serbia y Montenegro</option> <option value="198">Seychelles</option> <option value="199">Sierra Leona</option> <option value="200">Singapur</option> <option value="201">Siria</option> <option value="202">Somalia</option> <option value="203">Sri Lanka</option> <option value="204">Suazilandia</option> <option value="205">Sudáfrica</option> <option value="206">Sudán</option> <option value="207">Suecia</option> <option value="208">Suiza</option> <option value="209">Surinam</option> <option value="210">Svalbard y Jan Mayen</option> <option value="211">Tailandia</option> <option value="212">Taiwán</option> <option value="213">Tanzania</option> <option value="214">Tayikistán</option> <option value="215">Territorio Británico del Océano Índico</option> <option value="216">Territorios Australes Franceses</option> <option value="217">Timor Oriental</option> <option value="218">Togo</option> <option value="219">Tokelau</option> <option value="220">Tonga</option> <option value="221">Trinidad y Tobago</option> <option value="222">Túnez</option> <option value="223">Islas Turcas y Caicos</option> <option value="224">Turkmenistán</option> <option value="225">Turquía</option> <option value="226">Tuvalu</option> <option value="227">Ucrania</option> <option value="228">Uganda</option> <option value="229">Uruguay</option> <option value="230">Uzbekistán</option> <option value="231">Vanuatu</option> <option value="232">Venezuela</option> <option value="233">Vietnam</option> <option value="234">Islas Vírgenes Británicas</option> <option value="235">Islas Vírgenes de los Estados Unidos</option> <option value="236">Wallis y Futuna</option> <option value="237">Yemen</option> <option value="238">Yibuti</option> <option value="239">Zambia</option> <option value="240">Zimbabue</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="rut">DNI<span class="requerido"> *</span></label> <div class="col-sm-8"> <input type="text" oninvalid="this.setCustomValidity('Campo requerido')" oninput="setCustomValidity('')" class="form-control rut" id="rut" name="rut" value="" maxlength="12" placeholder="" required="required"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="birth_day">Date of Birth<span class="requerido"> *</span></label> <div class="col-sm-8"> <div class="form-inline"> <div class="row"> <div class="col-sm-12"> <div class="form-group no-margin-form-group"> <select name="birthDay" class="form-control" required=""> <option value="" disabled="" selected="">Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8" selected="selected">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div> <div class="form-group no-margin-form-group"> <select name="birthMonth" class="form-control" required=""> <option value="" disabled="" selected="">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">Apriñ</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9" selected="selected">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </div> <div class="form-group no-margin-form-group"> <select name="birthYear" class="form-control" required=""> <option value="" disabled="" selected="">Year</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989" selected="selected">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> </select> </div> </div> </div> </div> </div> </div> <!--Fin datos personales--> <div class="form-group text-center"> <button type="submit" id="submit_btn" class="btn btn-orange-md roboto">Update your data</button> </div> </div> </div> </div> </div> </form> <!-- Fint form --> </div> </div> <!-- Tab panes --> </div> </div>
/* Font ROBOTO */ .roboto{ font-family: 'Roboto', sans-serif !important; } /* custom background for panel */ .container{ padding-top: 50px !important; background-color: #f5f5f5 !important; } /* custom background header panel */ .custom-header-panel{ background-color: #004b8e !important; border-color: #004b8e !important; color: white; } .no-margin-form-group { margin: 0 !important; } .requerido { color: red; } .btn-orange-md { background: #FF791F !important; border-bottom: 3px solid #ae4d13 !important; color: white; } .btn-orange-md:hover { background: #d86016 !important; color: white !important; }
Related:
See More
Template
Paper Dashboard Pro
462.8K
45
login-form
170.6K
18
Login Form
142.0K
51
Contact Form
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76