'button is not aligned with other component in bootstrap

How to align the button along with other component. means button should be on same line. it is above other components.

enter image description here

<div className="row mb-12">
  <div className="col-md-3">
    <label htmlFor="noOfSubjects">No Of Subjects</label>
    <Field className="form-control" name="noOfSubjects" type="number" placeholder="Enter the number of subjects" />
    <p className="text-danger">
      <ErrorMessage name="noOfSubjects" />
    </p>
  </div>

  <div className="col-md-3">
    <label htmlFor="startDate">Start Date</label>
    <Field id="startDate" type="date" name="startDate" className="form-control" placeholder="Enter the Start Date" />
    <p className="text-danger">
      <ErrorMessage name="startDate" />
    </p>
  </div>

  <div className="col-md-3">
    <label htmlFor="endDate">End Date</label>
    <Field id="endDate" type="date" name="endDate" className="form-control" placeholder="Enter the End Date" />
    <p className="text-danger">
      <ErrorMessage name="endDate" />
    </p>
  </div>

  <div className="col-md-3">
    <button className="btn btn-primary btn-block offset-md-3" type="submit">Search Certificate</button>
  </div>
</div>

which class property I need to set to make it in same line?

htmlcsstwitter-bootstrapbootstrap-4styles


Solution 1:[1]

Simple just add class to row "align-items-center"

  <div class="row align-items-center mb-12">

  ....

 </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Patel Harsh

Related Questions