"Panel Form"
Bootstrap 3.3.0 Snippet by g0riloun

<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


Questions / Comments: