Just diving into the world of bootstrap and jquery while working on a school project. Bootstrap is being used to ensure responsiveness in my application. Facing an issue where the buttons are aligning at the top of their respective columns instead of in the middle as seen in the linked image. Here's a snippet of my code:
<div class="container">
<div class="row">
<section class="col-sm-5">
<div class="form-group">
<label for="project-name">Enter Data:</label>
<textarea class="form-control" rows="3" id="textarea1"
name="input1"></textarea>
<div class="error" id="javaerror"></div>
</div>
</section>
<section class="col-sm-2 text-center">
<div class="vcenter">
<button type="button" class="btn btn-default" id="data1">Process1</button>
</div>
</section>
<section class="col-sm-5">
<div>
<label for="project-name">Result</label>
<textarea class="form-control" rows="3" id="result1"
name="resultdata"></textarea>
</div>
</section>
</div>;
<div class="row">
<section class="col-sm-5">
<div class="form-group">
<label for="project-name">Enter Data:</label>
<textarea class="form-control" rows="3" id="textarea2"
name="input2"></textarea>
<div class="error" id="openerror"></div>
</div>
</section>
<section class="col-sm-2 text-center">
<div class="vcenter">
<button type="button" class="btn btn-default" id="data2">Process2
</button>
</div>
</section>
<section class="col-sm-5">
<div>
<label for="project-name">Result</label>
<textarea class="form-control" rows="3" id="result2"
name="resultDataNew"></textarea>
</div>
</section>
</div>
</div>Requirement: Both buttons (Process1, Process2) should be vertically aligned in the center within their individual columns like in this example.