« Previous Next »

Bootstrap Forms


Form Code Examples


  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Jumbotron Example</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      </head>
      <body>

      <div class="container mt-5">
   
    <!-- Form Example Output -->
    <form>
    
        <!-- Text Input -->
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
        </div>

        <!-- Email Input -->
        <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
        </div>

        <!-- Password Input -->
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password">
        </div>

        <!-- Select Dropdown -->
        <div class="mb-3">
            <label for="country" class="form-label">Country</label>
            <select class="form-select" id="country">
                <option selected>Select your country</option>
                <option value="Ind">Indai</option>
                <option value="USA">United States</option>
                <option value="CAN">Canada</option>
                <option value="AUS">Australia</option>
                <option value="Iran">Iran</option>
            </select>
        </div>

        <!-- Radio Buttons -->
        <div class="mb-3">
            <label class="form-label">Gender</label>
            <div>
                <input type="radio" class="form-check-input" name="gender" id="male" value="male">
                <label class="form-check-label" for="male">Male</label>
            </div>
            <div>
                <input type="radio" class="form-check-input" name="gender" id="female" value="female">
                <label class="form-check-label" for="female">Female</label>
            </div>
        </div>

        <!-- Checkboxes -->
        <div class="mb-3">
            <label class="form-label">Interests</label>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="sports">
                <label class="form-check-label" for="sports">Sports</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="music">
                <label class="form-check-label" for="music">Music</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="reading">
                <label class="form-check-label" for="reading">Reading</label>
            </div>
        </div>

        <!-- Date Picker -->
        <div class="mb-3">
            <label for="dob" class="form-label">Date of Birth</label>
            <input type="date" class="form-control" id="dob">
        </div>

        <!-- File Upload -->
        <div class="mb-3">
            <label for="profilePic" class="form-label">Profile Picture</label>
            <input type="file" class="form-control" id="profilePic">
        </div>

        <!-- Submit Button -->
        <button type="submit" class="btn btn-primary">Submit</button>
        
      </form>

    </div>

</body>
</html>

Output Example

Form Input and Output Example

« Previous Next »