How to make login form responsiveness using Bootstrap grid system?

Question

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 5.4em 1.4em 6.4em !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

legend.scheduler-border {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-top: -15px;
  background-color: white;
  color: black;
}

<fieldset class="scheduler-border">
  <legend class="scheduler-border">my legend</legend>
  <form>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</fieldset>

Code:- http://jsfiddle.net/Dhanunjay/6r3wos04/10/

Can you please correct the above code. At present it is occupying entire screen. Where i need it to be middle of screen and all 4 sides spaces.

Even in css classes, i removed some css like padding, width, margin... but still same issue

Using col-sm...lg...xs..... i want to make responsiveness. Any idea and suggestions please

Answer 1

Is this result satisfactory? I use Bootstrap 4:

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

In case you want it vertically centered too:

.page-wrapper {
  min-height: 100vh;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="container page-wrapper d-flex flex-column">
  <div class="row my-auto">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

Answer 2

Can I make login form, center of the page . I mean login form in center of web page with all 4 four side equal spaces? And login button also to center

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">my legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
            register
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

Did my answer help? If you have any questions write in the comments.