How to make login form responsiveness using Bootstrap grid system?

Admin 1
Viewed 251

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

bootstrap-vue bootstrap-4 css html
5 Answers

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/bootstrap@4.6.1/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/bootstrap@4.6.1/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>

user_45120050

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/bootstrap@4.6.1/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.

user_148099520 

html, body {
  height: 100%;
}

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



.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;
}
 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;
}
.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/bootstrap@4.6.1/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>

user_139479170

You can use this template example to build your form. In each col u should put tag input inside it

enter image description here

user_176287300

container is bootstrap specific class, you should not style it directly and create another class for your use instead. Also you are setting it to fixed width which will restrict responsiveness. If you want to restrict maximum width use max-width property instead.

user_23119090
Related