Getting Started
Introduction Source and CreditsFoundation
Components
Alerts
Badge
Breadcrumb
Buttons
Button group
Card
Carousel
Collapse
Dropdowns
Forms
Jumbotron
List group
Media object
Modal
Navigations
Pagination
PopoversProgress
Scrollspy
Spinners Tooltips
Section
Pages
Form With Image
<div class="card">
<img src="images/s-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<form>
<div class="form-group">
<h3 class="text-center">USER LOGIN</h3>
</div>
<div class="form-group">
<label>Email Address</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="far fa-envelope-open"></i></div>
</div>
<input type="email" class="form-control form-control-lg" placeholder="Type Email">
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-unlock-alt"></i></div>
</div>
<input type="password" class="form-control form-control-lg" placeholder="********">
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
</div>
</div>
Default Form
<div class="card">
<div class="card-body border-top-10">
<form>
<div class="form-group text-center d-block "> <img src="images/noavatar.png " class="rounded-circle mb-2" alt=""> </div>
<div class="form-group">
<h3 class="text-center">USER LOGIN</h3>
</div>
<div class="form-group">
<label>Email Address</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="far fa-envelope-open"></i></div>
</div>
<input type="email" class="form-control form-control-lg" placeholder="Type Email">
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-unlock-alt"></i></div>
</div>
<input type="password" class="form-control form-control-lg" placeholder="********">
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
</div>
</div>
Multi Color Border Form
<div class="multi-color"></div>
<div class="card">
<div class="card-body">
<form>
<div class="form-group text-center d-block "> <img src="images/noavatar.png " class="rounded-circle mb-2" alt=""> </div>
<div class="form-group">
<h3 class="text-center">USER LOGIN</h3>
</div>
<div class="form-group">
<label>Email Address</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="far fa-envelope-open"></i></div>
</div>
<input type="email" class="form-control form-control-lg" placeholder="Type Email">
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-unlock-alt"></i></div>
</div>
<input type="password" class="form-control form-control-lg" placeholder="********">
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
</div>
</div>
<div class="multi-color"></div>
Select Field
<select class="form-control form-control-lg mb-5">
<option>Large select</option>
</select>
<select class="form-control mb-5">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
Horizontal Form
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<small class="col-form-label col-sm-2 pt-0">Radios</small>
<div class="col-sm-10">
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1"> First radio </label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2"> Second radio </label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3"> Third disabled radio </label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1"> Example checkbox </label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Input Field
<input class="form-control form-control-lg mb-5" type="text" placeholder=".form-control-lg">
<input class="form-control mb-5" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Inline Form
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck"> Remember me </label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>