I have this code

.form-horizontal {
  display: block;
  width: 50%;
  margin: 0 auto;
}

%transition {
  transition: background .35s ease;
}


/*Base*/

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #eecda3 0%, #ef629f 100%);
}


/*Typography*/

html {
  font: 16px Verdana;
}

h1 {
  font-size: 1.2em;
}

li {
  font-size: 1em;
}


/*Layout*/


/*Dropdown*/

.dropdown {
  margin: 2em auto;
  width: 14.5em;
  border: .1em solid #c0cdd1;
}

a {
  display: block;
  padding: .5em;
  color: #000;
  text-decoration: none;
  @extend %transition;
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

.da {
  float: right
}


/*List*/

ul {
  display: none;
  border-top: .1em solid #c0cdd1;
}

li {
  padding: .5em;
  cursor: pointer;
  @extend %transition;
  &:not(:first-child) {
    border-top: .1em dashed #dde4e6;
  }
  &:last-child {
    color: #ad0000;
  }
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<form >

  <center>
    <h4>Start Tracking A Product </h4>
  </center>
  <center>
    <p>* = required</p>
  </center>
  <div >
    <label for="exampleInputEmail1">Email address</label>
    <input type="email"  id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" >We Will Notify This Email When The Target Price Is Reached.</small>
  </div>
  <div >
    <label for="exampleInputPassword1">Target Price</label>
    <input type="number"  id="exampleInputPassword1" placeholder="Ex: 250">
  </div>

  <center><button type="submit" >     Start Track    </button></center>
</form>

You can also run it on codepen

CodePudding user response：

make a div then put the form inside that div then give background color to the div (whatever you want)

CodePudding user response：

I am not sure if this is what you are looking for but you could simply enhance your .form-horizontal class to be like this:

.form-horizontal {
  display: block;
  width: 50%;
  margin: 0 auto;
  background-color: white; /* new */
  padding: 2em;            /* new */
  height: 100%;            /* new */
}

See demo code below

.form-horizontal {
  display: block;
  width: 50%;
  margin: 0 auto;
  background-color: white;
  padding: 2em;
  height: 100%;
}

%transition {
  transition: background .35s ease;
}


/*Base*/

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #eecda3 0%, #ef629f 100%);
}


/*Typography*/

html {
  font: 16px Verdana;
}

h1 {
  font-size: 1.2em;
}

li {
  font-size: 1em;
}


/*Layout*/


/*Dropdown*/

.dropdown {
  margin: 2em auto;
  width: 14.5em;
  border: .1em solid #c0cdd1;
}

a {
  display: block;
  padding: .5em;
  color: #000;
  text-decoration: none;
  @extend %transition;
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

.da {
  float: right
}


/*List*/

ul {
  display: none;
  border-top: .1em solid #c0cdd1;
}

li {
  padding: .5em;
  cursor: pointer;
  @extend %transition;
  &:not(:first-child) {
    border-top: .1em dashed #dde4e6;
  }
  &:last-child {
    color: #ad0000;
  }
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<form >

  <center>
    <h4>Start Tracking A Product </h4>
  </center>
  <center>
    <p>* = required</p>
  </center>
  <div >
    <label for="exampleInputEmail1">Email address</label>
    <input type="email"  id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" >We Will Notify This Email When The Target Price Is Reached.</small>
  </div>
  <div >
    <label for="exampleInputPassword1">Target Price</label>
    <input type="number"  id="exampleInputPassword1" placeholder="Ex: 250">
  </div>

  <center><button type="submit" >     Start Track    </button></center>
</form>