how do I adjust the size of a container in the following page? (bootstrap)

user_17833823 0
Viewed 95

I'm a beginner in web development and creating a simple website.

I'd like to adjust the red container behind the contact form so it's not visible all over the page.. in fact I'd like it to be just a bit bigger then the form so I can use it as a background.

enter image description here

Here is the codes that I've been working on. I'd appreciate it for any tips, advice and corrections. thank you.

  <div class="p-4 text-black rounded-3 bg-danger">
    <form>
      <div class="row d-flex justify-content-evenly">
        <div class="col-md-5">
          <label for="Email">Email address</label>
          <input type="email" class="form-control" id="Email" placeholder="name@example.com">
        </div>
  </div>
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-5">
      <label for="FirstName">first name</label>
      <input type="name" id="FirstName" class="form-control placeholder="first name">
    </div>
  </div>
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-5">
      <label for="Number">Number</label>
      <input type="number" class="form-control form-control-sm" id="Number" placeholder="01-2345-6789">
    </div>
  </div>
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-5">
      <label for="Select"> Select an inquiry</label>
      <select class="form-control" id="Select">
        <option> 1. Do you like Ullie? </option>
        <option> 2. Do you hate Ullie? </option>
        <option> 3. Do you think Ullie is cute? </option>
        <option> 4. Do you think Ullie is stupid? </option>
        <option> 5. Ullie is een stupid hond </option>
      </select>
    </div>
  </div>
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-5">
      <label for="TextArea">Text area</label>
      <textarea class="form-control" id="TextArea" rows="10"></textarea>
    </div>
  </div>
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-5">
      <label for="text">Text</label>
      <input type="text" class=form-control id="text" placeholder="text">
    </div>
  </div>
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-5">
      <label for="Address" class="col-sm-2 col-form-label">address</label>
      <div class="col-sm-10">
        <input type="text" readonly class="form-control-plaintext" id="Address" value="address">
      </div>
  </div>
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-5">
      <label for="File">Upload files</label>
      <input type="file" class="form-control-file" id="File">
    </div>
  </div>
</form>
bootstrap-4 css html
1 Answers
  • You can apply the background-color (.bg-danger) to the form.
  • You can then give the form a max-width and add margin: auto to left and right.

Try this

#form {
    max-width: 400px;
    margin: 0 auto;
}
<!-- just for the demo -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<form class="p-4 text-black rounded-3 bg-danger" id="form">
    <div class="form-group">
        <label for="Email">Email address</label>
        <input type="email" class="form-control" id="Email" placeholder="name@example.com">
    </div>
    <div class="form-group">
        <label for="FirstName">first name</label>
        <input type="name" id="FirstName" class="form-control" placeholder="first name">
    </div>
    <div class="form-group">
        <label for="Number">Number</label>
        <input type="number" class="form-control form-control-sm" id="Number" placeholder="01-2345-6789">
    </div>
    <div class="form-group">
        <label for="Select"> Select an inquiry</label>
        <select class="form-control" id="Select">
            <option> 1. Do you like Ullie? </option>
            <option> 2. Do you hate Ullie? </option>
            <option> 3. Do you think Ullie is cute? </option>
            <option> 4. Do you think Ullie is stupid? </option>
            <option> 5. Ullie is een stupid hond </option>
        </select>
    </div>
    <div class="form-group">
        <label for="TextArea">Text area</label>
        <textarea class="form-control" id="TextArea" rows="10"></textarea>
    </div>
    <div class="form-group">
        <label for="text">Text</label>
        <input type="text" class=form-control id="text" placeholder="text">
    </div>
    <div class="form-group">
        <label for="Address">address</label>
        <input type="text" readonly class="form-control-plaintext" id="Address" value="address">
    </div>
    <div class="form-group">
        <label for="File">Upload files</label>
        <input type="file" class="form-control-file" id="File">
    </div>
</form>

user_62142100
Related