How can I create responsive forms using CSS frameworks?

How can I create responsive forms using CSS frameworks?

You can create responsive forms by using CSS frameworks like Bootstrap or Tailwind CSS. They provide built-in classes for form elements that adjust based on screen size.

Can you show me an example of a responsive form using Bootstrap?

Sure! Here's a simple example:

<form class="container">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

What about using Tailwind CSS for responsive forms?

With Tailwind CSS, you can use utility classes to create responsive forms. Here's an example:

<form class="max-w-md mx-auto">
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Enter your name">
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
  </div>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">Submit</button>
</form>