Tutorialspoint

Bootstrap Programming Examples

Simple Bootstrap Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

6062160001

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>นส.นิตยา ทาชาติ</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-success navbar-dark justify-content-center " >
        <a class="navbar-brand" href="#">FROM AND MODEL</a>
    </nav>

<div class="container  mt-3">
    <div class="row">
                <div class="col-lg-4">
                <div class="card border-success">
                        <div class="card-body">
                          <h4 class="card-title">Sracked (full-width)from</h4>
                          <form action="/action_page.php" class="was-validated">
                            <div class="form-group">
                              <label for="email ">Username</label>
                              <input type="email" class="form-control" id="email" required >
                              <div class="valid-feedback">Valid.</div>
                              <div class="invalid-feedback">Please fill out this field.</div>
                            </div>
                            <div class="form-group">
                              <label for="pwd">Password:</label>
                              <input type="password" class="form-control" id="pwd" required >
                              <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
                            </div>
                            <div class="form-group form-check">
                              <label class="form-check-label">
                                <input class="form-check-input" type="checkbox"> Remember me
                              </label>
                            </div>
                            <button type="login" class="btn btn-success">login</button>
                          </form>
                        </div>
                      </div>

                      
                      <div class="card border-success mt-3">
                            <div class="card-body">
                              <h4 class="card-title">Example of model</h4>
                              <!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Open modal
      </button>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
            Member Login
          </button>
     
                          </div>
                        </div>         
           </div>
           <div class="col-lg-8">
                <div class="card border-success">
                        <div class="card-body ">
                          <h4 class="card-title">Inline from</h4>
                          <form class="form-inline" action="/action_page.php">
                            <label for="email" class="mr-sm-2">Firstname:</label>
                            <input type="email" class="form-control mb-2 mr-sm-2" id="email">
                            <label for="pwd" class="mr-sm-2">Lastname:</label>
                            <input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
                           
                            <button type="submit" class="btn btn-success mb-2">Submit</button>
                          </form>
                        </div>
                      </div>

                      <div class="card border-success mt-3">
                            <div class="card-body ">
                              <h4 class="card-title">Bootstrap Input from</h4>
                              <form action="/action_page.php">
                                <div class="form-group">
                                  <label for="email">ID Card:</label>
                                  <input type="email" class="form-control" id="email">
                                </div>
                                <div class="form-group">
                                  <label for="pwd">Name:</label>
                                  <input type="password" class="form-control" id="pwd">
                                </div>
                                <div class="form-group">
                                        <label for="comment">Address:</label>
                                        <textarea class="form-control" rows="5" id="comment"></textarea>
                                      </div>
                                    
                                      <div class="form-group">
                                            <label for="comment">Sex:</label>
                                      <div class="form-check-inline">
                                            <label class="form-check-label">
                                              <input type="radio" class="form-check-input" name="optradio">Male
                                            </label>
                                          </div>
                                          <div class="form-check-inline">
                                            <label class="form-check-label">
                                              <input type="radio" class="form-check-input" name="optradio">Female
                                            </label>
                                          </div>
                                        </div>
                                        <div class="form-group">
                                                <label for="comment">Programming ability:</label>
                                                <div class="form-check">
                                                        <label class="form-check-label">
                                                          <input type="checkbox" class="form-check-input" value="">Bootstrap
                                                        </label>
                                                      </div>
                                                      <div class="form-check">
                                                        <label class="form-check-label">
                                                          <input type="checkbox" class="form-check-input" value="">PHP
                                                        </label>
                                                      </div>
                                                      <div class="form-check disabled">
                                                        <label class="form-check-label">
                                                          <input type="checkbox" class="form-check-input" value="" disabled>ASP.net
                                                        </label>
                                                      </div>
                                        </div>
                                        <div class="form group">
                                                <div class="form-group">
                                                        <label for="sel1">Select list:</label>
                                                        <select class="form-control" id="sel1">
                                                          <option>10,000-20,000 Bath</option>
                                                          <option>20,000-30,000 Bath</option>
                                                          <option>30,000-40,000 Bath</option>
                                                          <option>40,000-50,000 Bath</option>
                                                        </select>
                                                      </div>
                                                       </div>
                                                       <div class="form group">
                                                            <label for="sel1">Programming Skill:</label>
                                                            <input type="range" class="form-control-range">
                                                           
                                                       </div>
                                                       <div class="form group">
                                                            <input type="file" class="form-control-file border">
                                                       </div>

                                                       <div class="form group mt-3 text-right">
                                                            <button type="submit" class="btn btn-success ">Submit</button>
                                                       </div>
                              </form>
                            </div>
                          </div>
           </div>
    </div>
</div>


 <!-- The Modal -->
 <div class="modal" id="myModal">
        <div class="modal-dialog  modal-lg">
          <div class="modal-content">
      
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Modal Heading</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
      
            <!-- Modal body -->
            <div class="modal-body">
              Modal body..
            </div>
      
            <!-- Modal footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
      
          </div>
        </div>
      </div>

      <!-- The Modal -->
 <div class="modal" id="myModal2">
        <div class="modal-dialog ">
          <div class="modal-content">
      
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Email address</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
      
            <!-- Modal body -->
            <div class="modal-body">
                    <form action="/action_page.php">
                        <div class="form-group">
                          <label for="email">Email address:</label>
                          <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                  <span class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></span>
                                </div>
                                <input type="text" class="form-control" placeholder="Username">
                              </div>
                        </div>
                        <div class="form-group">
                          <label for="pwd">Password:</label>
                          <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                  <span class="input-group-text"><i class="fa fa-key" aria-hidden="true"></i></span>
                                </div>
                                <input type="text" class="form-control" placeholder="Username">
                              </div>
                        </div>
                        <div class="form-group form-check">
                          <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                          </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                      </form>
            </div>
      
           
      
          </div>
        </div>
      </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Online Bootstrap Editor

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test\</title>
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="node_modules/sweetalert2/dist/sweetalert2.min.css">
     <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body>
<!-- เนื่องจาก Codingground ไม่สนับสนุน Plug-In ของ Bootstrap4 โปรดก็อปโค๊ดนี้ใส่ Visual Studio Code แล้วรันผ่าน Browser ของอาจารย์เถิดครับ -->
<!---- source content -->
           <script src="node_modules/jquery/dist/jquery.min.js">\</script>
          <script src="node_modules/popper.js/dist/umd/popper.min.js">\</script>
         <script src="node_modules/bootstrap/dist/js/bootstrap.min.js">\</script>
         <script src="node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script>

         <!-- navbar -->
      <nav class="navbar navbar-expand-sm navbar-dark bg-success justify-content-center">
        <a class="navbar-brand text-center" href="#">
          Form And Model
        </a>
      </nav>

      <div class="container mt-3">
          <div class="row">
              <div class="col-lg-4">
                <div class="card border-success">
                    <div class="card-body">
                      <h4 class="card-title">Stacked (full-width) form</h4>
                      <form action="/action_page.php" class="was-validated">
                        <div class="form-group">
                          <label for="uname">Username:</label>
                          <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
                          <div class="valid-feedback">Valid.</div>
                          <div class="invalid-feedback">Please fill out this field.</div>
                        </div>
                        <div class="form-group">
                          <label for="pwd">Password:</label>
                          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
                          <div class="valid-feedback">Valid.</div>
                          <div class="invalid-feedback">Please fill out this field.</div>
                        </div>
                        <div class="form-group form-check">
                          <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" name="remember" required> Remember me
                            <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">Check this checkbox to continue.</div>
                          </label>
                        </div>
                        <button type="submit" class="btn btn-success">Login</button>
                      </form>
                    </div>
                  </div>
                  <div class="card border-success mt-3">
                    <div class="card-body">
                      <h4 class="card-title">Example modal</h4>
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                            Basic Modal
                          </button>
                          
                          <!-- The Modal -->
                          <div class="modal" id="myModal">
                            <div class="modal-dialog">
                              <div class="modal-content">
                          
                                <!-- Modal Header -->
                                <div class="modal-header">
                                  <h4 class="modal-title">Modal Heading</h4>
                                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                          
                                <!-- Modal body -->
                                <div class="modal-body">
                                  Modal body..
                                </div>
                          
                                <!-- Modal footer -->
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                </div>
                          
                              </div>
                            </div>
                          </div>

                          <!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
        Modal with form
      </button>
      
      <!-- The Modal -->
      <div class="modal" id="myModal2">
        <div class="modal-dialog">
          <div class="modal-content">
      
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Member Login</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
      
            <!-- Modal body -->
            <div class="modal-body">
              <a>Email</a>
              <form>
                    <div class="input-group mb-3">
                      <div class="input-group-prepend">
                        <span class="input-group-text"><i class="far fa-envelope"></i></span>
                      </div>
                      <input type="text" class="form-control" placeholder="Email">
                    </div>
                    <a>Password</a>
                    <form>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-key"></i></span>
                              </div>
                              <input type="text" class="form-control" placeholder="Password">
                            </div>
            </div>
            <div class="form-group form-check">
                    <label class="form-check-label mr-sm-2">
                      <input class="form-check-input" type="checkbox"> Remember me
                    </label>
                  </div>
      
            <!-- Modal footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-success" data-dismiss="modal">Summit</button>
            </div>
      
          </div>
        </div>
      </div>
                    </div>
                  </div>

              </div>
              <div class="col-8">
                <div class="card border-success">
                    <div class="card-body">
                      <h4 class="card-title">Inline form</h4>
                      <form class="form-inline" action="/action_page.php">
                        <label for="email" class="mr-sm-2">Firstname:</label>
                        <input type="email" class="form-control mb-2 mr-sm-2" id="email">
                        <label for="pwd" class="mr-sm-2">Lastname:</label>
                        <input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
                        <button type="submit" class="btn btn-success mb-2">Submit</button>
                      </form>
                    </div>
                  </div>
                  <div class="card border-success mt-3">
                    <div class="card-body">
                      <h4 class="card-title">bootstrap Input Form</h4>
                        <div class="form-group">
                          <label for="uname">ID Card:</label>
                          <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
                        </div>
                        <div class="form-group">
                          <label for="Name">Name:</label>
                          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
                        </div>
                        <div class="form-group">
                            <label for="comment">Address:</label>
                            <textarea class="form-control" rows="5" id="comment"></textarea>
                          </div>
                          <label for="Sex" class="mr-sm-2">Sex:</label>
                          <div class="form-check-inline">
                            <label class="form-check-label">
                              <input type="radio" class="form-check-input" name="optradio">Male
                            </label>
                          </div>
                          <div class="form-check-inline">
                            <label class="form-check-label">
                              <input type="radio" class="form-check-input" name="optradio">Female
                            </label>
                          </div>
                          <div class="mt-3">
                          <label for="pwd" class="mr-sm-2">Programing Ability:</label>
                          </div>
                          <div class="form-check">
                                <label class="form-check-label">
                                  <input type="checkbox" class="form-check-input" value="">Bootstrap
                                </label>
                              </div>
                              <div class="form-check">
                                <label class="form-check-label">
                                  <input type="checkbox" class="form-check-input" value="">PHP
                                </label>
                              </div>
                              <div class="form-check disabled">
                                <label class="form-check-label">
                                  <input type="checkbox" class="form-check-input" value="" disabled>ASP.net
                                </label>
                              </div>
                              <div class="form-group mt-3">
                                    <label for="sel1">Saraly:</label>
                                    <select class="form-control" id="sel1">
                                      <option>10000-20000 Bath</option>
                                      <option>20001-30000 Bath</option>
                                      <option>30001-40000 Bath</option>
                                      <option>40001-50000 Bath</option>
                                    </select>
                                  </div>
                                  <input type="range" class="form-control-range mt-3">
                                <input type="file" class="form-control-file border mt-3">
                                <div class="text-right mt-3">
                                        <button type="button" class="btn btn-success">Summit</button>
                                  </div>
                      </form>
                    </div>
                  </div>
              </div>
          </div>
      </div>

</body>
</html>

6062210005

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sirichanya Prakotasung</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-success navbar-dark justify-content-center">
        <a class="navbar-brand" href="#">From and Model</a>
    </nav>

    <div class="container mt-3">
        <div class="row">
            <div class="col-lg-4">
                <div class="card border-success">
                    <div class="card-body">
                      <h4 class="card-title">Stacked (full-width) form</h4>
                      <form action="#" class="was-validated">
                        <div class="form-group">
                          <label for="email">Username:</label>
                          <input type="email" class="form-control" id="Username" placeholder="username" required>
                          <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">กรุณากรอก Username.</div>
                        </div>
                        <div class="form-group">
                          <label for="pwd">Password:</label>
                          <input type="password" class="form-control" id="pwd" placeholder="password" required>
                          <div class="valid-feedback">Valid.</div>
                            <div class="invalid-feedback">กรุณากรอก Password.</div>
                        </div>
                        <div class="form-group form-check">
                          <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                          </label>
                        </div>
                        <button type="submit" class="btn btn-success">Login</button>
                      </form>
                      
                    </div>
                  </div>
<br>
                  <div class="card border-success">
                    <div class="card-body">
                    <h4 class="card-title">Example of model</h4>
                <div class="form">
                <!-- Button to Open the Modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mo1">
                        Open modal
                    </button>
      
                <!-- The Modal -->
                <div class="modal" id="mo1">
                    <div class="modal-dialog modal-lg">
                    <div class="modal-content">
      
                <!-- Modal Header -->
                <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
        
                <!-- Modal body -->
                <div class="modal-body">
                Modal body..
                </div>
        
                <!-- Modal footer -->
                <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
        
                    </div>
                    </div>
                </div>
           

                 <!-- Button to Open the Modal -->
                 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mo2">
                        Model with  Form
                    </button>
      
                <!-- The Modal -->
                <div class="modal" id="mo2">
                    <div class="modal-dialog">
                    <div class="modal-content">
      
                <!-- Modal Header -->
                <div class="modal-header">
                <h4 class="modal-title">Member Login</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
        
                <!-- Modal body -->
                <div class="modal-body">
                        <label for="name">Email address:</label>
                        <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                  <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                                </div>
                                <input type="text" class="form-control" placeholder="Username">
                        </div>
                        <label for="name">Email address:</label>
                        <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                  <span class="input-group-text"><i class="fa fa-key"></i></span>
                                </div>
                                <input type="text" class="form-control" placeholder="Username">
                        </div>
                        <div class="form-group form-check">
                                <label class="form-check-label">
                                  <input class="form-check-input" type="checkbox"> Remember me
                                </label>
                              </div>
                              <button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
                </div>
        
        
                    </div>
                    </div>
                </div>
            </div>
            </div>
        </div>


            </div>
            <div class="col-lg-8">
                    <div class="card border-success">
                            <div class="card-body">
                              <h4 class="card-title">Inline form</h4>
                              <!-- ต่อเป็นแถวยาว -->
                              <form class="form-inline" action="#">
                                <label for="email" class="mr-sm-2">Firstname:</label>
                                <input type="email" class="form-control mb-2 mr-sm-2" id="Firstname">
                                <label for="pwd" class="mr-sm-2">Lastname:</label>
                                <input type="password" class="form-control mb-2 mr-sm-2" id="Lastname">
                                <div class="form-check mb-2 mr-sm-2">
                                </div>
                                <button type="submit" class="btn btn-success mb-2">Submit</button>
                              </form>
                              
                            </div>
                          </div>
                    <br>
                    <div class="card border-success">
                            <div class="card-body">
                              <h4 class="card-title">Bootstrap Inline form</h4>
                              <form action="#">
                              <div class="form-group">
                                    <label for="id">ID Card:</label>
                                    <input type="text" class="form-control" id="id">
                                  </div>
                                  <div class="form-group">
                                    <label for="name">Name:</label>
                                    <input type="password" class="form-control" id="name">
                                  </div>
                                  <div class="form-group">
                                        <label for="comment">Address:</label>
                                        <textarea class="form-control" rows="5" id="Address"></textarea>
                                      </div>

                                      <div class="form-group">
                                            <label class="mr-sm-2">Sex:</label>
                                      <div class="form-check-inline">
                                            <label class="form-check-label">
                                              <input type="radio" class="form-check-input" name="optradio">Male
                                            </label>
                                          </div>
                                          <div class="form-check-inline">
                                            <label class="form-check-label">
                                              <input type="radio" class="form-check-input" name="optradio">Female
                                            </label>
                                          </div>
                                    </div>

                                    <div class="form-group">
                                            <label class="mr-sm-2">Programming ability:</label>
                                            <div class="form-check">
                                                    <label class="form-check-label">
                                                      <input type="checkbox" class="form-check-input" value="">Bootstrap
                                                    </label>
                                                  </div>
                                                  <div class="form-check">
                                                    <label class="form-check-label">
                                                      <input type="checkbox" class="form-check-input" value="">PHP
                                                    </label>
                                                  </div>
                                                  <div class="form-check disabled">
                                                    <label class="form-check-label">
                                                      <input type="checkbox" class="form-check-input" value="">ASP.net
                                                    </label>
                                                  </div>
                                    </div>
                                     
                                    <div class="form-group">
                                            <label for="sel1">Salary:</label>
                                            <select class="form-control" id="sel1" name="sellist1">
                                              <option>10,000-20,000 Baht</option>
                                              <option>20,000-30,000 Baht</option>
                                              <option>30,000-40,000 Baht</option>
                                              <option>40,000-50,000 Baht</option>
                                            </select>
                                    </div>

                                    <div class="form-group">
                                            <label for="sel1">Programming skill:</label>
                                            <input type="range" class="form-control-range" name="range">
                                          </div>
                                          <div class="form-group">
                                            <input type="file" class="form-control-file border" name="file">
                                          </div>
                                          <div class="form-group text-right">
                                                <button type="submit" class="btn btn-success">Submit</button>
                                          </div>
                                    </div>




                                </form>
                            </div>
                          </div>

            </div>


<br>



        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

https://gyanians.com/festival-wish/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

mintt

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <form class="col-12">
      <div class="container">
        <div class="row justify-content-md-center" style="background-color:LightGray;">
          <div class="col-md-auto">
            <h6 style="text-align: center;">วันนี้ รสชาติอาหารเป็นไงบ้างคะ</h6>
          </div>
        </div>
        <!-- <div class="w-100"></div> -->
        <div class="row justify-content-center" style="font-size: 11px;">
          <div class="col">
            ไม่โอเค
            <br>
              <input class="form-check-input" type="radio" >
         
          </div>
          <div class="col">
            ไม่ค่อยโอเค
            <div style="text-align:center;">
              <input class="form-check-input" type="radio">
            </div>
          </div>
          <div class="col">
            เฉยๆ
            <div class="col">
              <input class="form-check-input" type="radio">ff
            </div>
          </div>
          <div class="col">
            โอเคเลย
            <div>
              <input class="form-check-input" type="radio">d
            </div>
          </div>
          <div class="col">
            โอเคมาก
            <div>
              <input class="form-check-input" type="radio">s
            </div>
          </div>
          <div class="w-100"></div>

        </div>
      </div>
    </form>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Online Bootstrap Editor

<!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.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body> 

<div class="container">
  <h2>Well</h2>
  <div class="well well-lg">Basic Well</div>
</div>

</body>
</html>

Accordion

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .title-head{
        text-transform:uppercase;
        text-shadow:-1px -2px 0px rgba(0,0,0,0.3);
        }
        .accordion{
            width:100%;
            text-align:left;
            padding:15px 10px;
            font-size:18px;
            text-transform:uppercase;
            border:none;
            outline:none;
            margin:5px 0px;
            cursor:pointer;
            background:#c0c0c0;
            box-shadow:0 0 5px rgba(0,0,0,0.2);
            transition: all 0.3s ease-in;
            
        }
        .accordion:hover {
            background-color:red;
        }
        .mainpanel{
            font-size:14px;
            background:#ededed;
            border-radius:0;
            max-height:0;
            overflow:hidden;
        }
        
    </style>
  </head>
  <body>
   <div class="text-center title-head"> <h1>accordion</h1></div>
    <button class="accordion">caption this</button>
    <div class="mainpanel">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>
    <button class="accordion">caption this</button>
    <div class="mainpanel">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>
   

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
     <script>
        $(document).ready(function(){
            $(".title-head").css({"color":"goldenrod"});
            console.log("ready");
            $("accordion").click(function(){
            $(this).toggleClass('hover');
            });
        });
    </script>
  </body>
</html>

Sample Questionnaire

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
$('.carousel').carousel({
  interval: false
})        
    });
  
    </script>
  </head>
  <body>
<div id="carouselExampleControls" class="carousel slide bg-secondary pt-2" data-ride="carousel">
            <div class="container p-5">

  <div class="carousel-inner">
    <div class="carousel-item active ">
             <div class="card text-white bg-dark mb-3">
  <div class="card-header">
    Excessive Fear and Worry
  </div>
        <img class="card-img" src="https://cdn.mindful.org/fear_Large-HP.jpg?q=80&fm=jpg&fit=crop&w=1400&h=300" alt="Card image cap">

  <div class="card-body">
    <h5 class="card-title">Do Worry and Stress affect your daily activity?</h5>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
Almost Never
</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
Often
</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
Almost always
</label>
</div>
    </div>    

</div>
    </div>    

    <div class="carousel-item">
<div class="card text-white bg-dark mb-3">
  <div class="card-header">
Hopelessness and Despair
</div>
  <div class="card-body">
    <h5 class="card-title">Do you feel that your situation will never improve?</h5>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
Almost Never
</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
Often
</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
Almost always
</label>
</div>

  </div>
</div>
</div>
     <div class="carousel-item">
         <div class="card text-white bg-dark mb-3">
              <div class="card-header">
Anxiety
</div>
    <div class="card-body">
           <h5 class="card-title">Can you name a few situations where your anxiety kicks in most often?</h5>
            <div class="form-group">
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
    </div>

</div>
</div>
 
 
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Proof of concept

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
                  <div class="card bg-dark text-white">
                  <img src="https://cdn.mindful.org/fear_Large-HP.jpg?q=80&fm=jpg&fit=crop&w=1400&h=875" class="card-img" alt="...">
                  <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                  </div>
                </div>
    </div>
    <div class="carousel-item">
  <div class="card bg-dark text-white">
                  <img src="https://cdn.mindful.org/fear_Large-HP.jpg?q=80&fm=jpg&fit=crop&w=1400&h=875" class="card-img" alt="...">
                  <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                  </div>
                </div>
                
    </div>
    <div class="carousel-item">
          <div class="card bg-dark text-white">
                  <img src="https://cdn.mindful.org/fear_Large-HP.jpg?q=80&fm=jpg&fit=crop&w=1400&h=875" class="card-img" alt="...">
                  <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                  </div>
                </div>
                
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
  </body>
</html>

1 2 3 4 5 6 7 ... 114 Next
Advertisements
Loading...

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.