Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

How to add an icon as a placeholder in the input email box in bootstrap?

Ashutosh Patel 638 14 Oct 2024

Ask by Ashutosh Patel

Updated 14 Oct 2024

1 Answers

Ashutosh Patel 14 Oct 2024

To set an icon as a placeholder in an input box using Bootstrap, you can use the following approach.

<!DOCTYPE html>
<html lang="en">
<head>
   <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">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <title>Email Input with Icon</title>
   <style>
       .input-icon {
           position: relative;
       }
       .input-icon input {
           padding-left: 30px; /* Space for the icon */
       }
       .input-icon i {
           position: absolute;
           left: 10px;
           top: 50%;
           transform: translateY(-50%);
           color: #6c757d; /* Bootstrap's secondary color */
       }
   </style>
</head>
<body>
<div class="container mt-5">
   <h2>Set icon in input field</h2>
   <div class="input-icon">
       <i class="fas fa-envelope"></i>
       <input type="email" class="form-control" placeholder="Email address" aria-label="Email address">
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

advertising

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.