Changing framework from pure.css to bootstrap, without changing markup - css

Question

Currently I have a site styled up in Pure. How could I change a pure form to a bootstrap form without changing markup? My pure form is this:
<form class="pure-form pure-form-stacked">
<div class="pure-control-group">
<label for="first-name">First name</label>
<input class="pure-input-1-2" type="text" id="first-name" placeholder="First name">
</div>
<div class="pure-control-group">
<label>Last name</label>
<input class="pure-input-1-2" type="text" placeholder="Last name">
</div>
<div class="pure-control-group">
<label>Middle names</label>
<input class="pure-input-1-2" type="text" placeholder="Middle names">
</div>
<div class="pure-control-group">
<label>Gender</label>
<select>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<button>Save</button>
</form>

Answer 1

You can use Bootstrap's predefined classes for labels and form controls.
Here's an example:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="first-name" class="form-control" id="first-name" placeholder="First Name">
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="last-name" class="form-control" id="last-name" placeholder="Last Name">
</div>
<div class="form-group">
<label for="middle-names">Middle Name</label>
<input type="middle-names" class="form-control" id="middle-name" placeholder="Middle names">
</div>
<div class="form-group">
<label for="sel1">Gender</label>
<select class="form-control" id="gender">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form
Standard rules for form layouts:
Always use <form role="form">
Wrap labels and form controls in <div class="form-group">
Add class .form-control to all textual <input>, <textarea>, and <select> elements