Bootstrap 3 Fieldset Legend

by Dhanunjay

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
    <fieldset class="scheduler-border">
      <legend class="scheduler-border">my legend</legend>
      <form>
        <input
          name=""
          type="text"
          class="txtbox"
          placeholder="element"
          v-model="Username"
        />
        <input
          name=""
          type="text"
          class="txtbox"
          placeholder="element2"
          v-model="password"
        />
        <button
          name=""
          type="button"
          value="LOGIN"
          class="bt"
          v-on:click="login()"
        >
          register
        </button>
      </form>
    </fieldset>

CSS

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

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;
}

.txtbox {
  padding: 1%;
  border: none;
  outline: 0px;
  margin-top: 33px;
  border: solid 2px black;
}

.bt {
  height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black;
  margin-left: 37%;
  margin-top: 30%;
}