Bootstrap Forms Examples


Example 1: bootstrap forms

<form>   <div class="form-group">     <label for="exampleInputEmail1">Email address</label>     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>   </div>   <div class="form-group">     <label for="exampleInputPassword1">Password</label>     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">   </div>   <div class="form-check">     <input type="checkbox" class="form-check-input" id="exampleCheck1">     <label class="form-check-label" for="exampleCheck1">Check me out</label>   </div>   <button type="submit" class="btn btn-primary">Submit</button> </form>

Example 2: bootstrap form-control inline

<div class="form-group">     <label for="birthday" class="col-xs-2 control-label">Birthday</label>     <div class="col-xs-10">         <div class="form-inline">             <div class="form-group">                 <input type="text" class="form-control" placeholder="year"/>             </div>             <div class="form-group">                 <input type="text" class="form-control" placeholder="month"/>             </div>             <div class="form-group">                 <input type="text" class="form-control" placeholder="day"/>             </div>         </div>     </div> </div>

Example 3: bootstrap forms examples

<!-- Default form login --> <form class="text-center border border-light p-5" action="#!">      <p class="h4 mb-4">Sign in</p>      <!-- Email -->     <input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail">      <!-- Password -->     <input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password">      <div class="d-flex justify-content-around">         <div>             <!-- Remember me -->             <div class="custom-control custom-checkbox">                 <input type="checkbox" class="custom-control-input" id="defaultLoginFormRemember">                 <label class="custom-control-label" for="defaultLoginFormRemember">Remember me</label>             </div>         </div>         <div>             <!-- Forgot password -->             <a href="">Forgot password?</a>         </div>     </div>      <!-- Sign in button -->     <button class="btn btn-info btn-block my-4" type="submit">Sign in</button>      <!-- Register -->     <p>Not a member?         <a href="">Register</a>     </p>      <!-- Social login -->     <p>or sign in with:</p>      <a href="#" class="mx-2" role="button"><i class="fab fa-facebook-f light-blue-text"></i></a>     <a href="#" class="mx-2" role="button"><i class="fab fa-twitter light-blue-text"></i></a>     <a href="#" class="mx-2" role="button"><i class="fab fa-linkedin-in light-blue-text"></i></a>     <a href="#" class="mx-2" role="button"><i class="fab fa-github light-blue-text"></i></a>  </form> <!-- Default form login -->

Example 4: bootstrap form

<form>   <div class="form-group">     <label for="exampleInputEmail1">Email address</label>     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>   </div>   <div class="form-group">     <label for="exampleInputPassword1">Password</label>     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">   </div>   <div class="form-group form-check">     <input type="checkbox" class="form-check-input" id="exampleCheck1">     <label class="form-check-label" for="exampleCheck1">Check me out</label>   </div>   <button type="submit" class="btn btn-primary">Submit</button> </form>

Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?