'How do I resolve layout problem on FormSubmit?

I am new to HTML CSS but I know how to copy things. Here is the case, as I copy the HTML from https://formsubmit.co/live-demo to my Brackets, it will lose all layout features. I tried fixing it with:

h1 {
  text-align: center;
  margin: 35px 0 20px 0 !important;
}
<div class="container">
  <h1>FormSubmit Demo</h1>
  <form target="_blank" action="https://formsubmit.co/[email protected]" method="POST">
    <div class="form-group">
      <div class="form-row">
        <div class="col">
          <input type="text" name="name" class="form-control" placeholder="Full Name" required>
        </div>
        <div class="col">
          <input type="email" name="email" class="form-control" placeholder="Email Address" required>
        </div>
      </div>
    </div>
    <div class="form-group">
      <textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
    </div>
    <button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
  </form>
</div>

Thanks a lot for helping.

csslayoutform-submit


Solution 1:[1]

Next time, click Resources

<!DOCTYPE html>
   <html>
    <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
    </head>

    <body>
      <div class="container">
        <h1>FormSubmit Demo</h1>
        <form target="_blank" action="https://formsubmit.co/[email protected]" method="POST">
          <div class="form-group">
            <div class="form-row">
              <div class="col">
                <input type="text" name="name" class="form-control" placeholder="Full Name" required>
              </div>
              <div class="col">
                <input type="email" name="email" class="form-control" placeholder="Email Address" required>
              </div>
            </div>
          </div>
          <div class="form-group">
            <textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
          </div>
          <button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
        </form>
      </div>
    </body>
  </html>

main.css

h1 {
  text-align: center;
  margin: 35px 0 20px 0 !important;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 KruII

Related Questions