Dropdown

Text box

                    
<div class="row mt-2">
  <label for="objName" class="col-sm-4 col-form-label">Label Name</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="objName" value="">
  </div>
</div>
Text box with search button

                    
<div class="row mt-2">
  <label for="objId" class="col-sm-4 col-form-label">Label Name</label>
  <div class="col-sm-5">
    <input type="text" class="form-control" id="objId" value="">
  </div>
  <div class="col-sm-3">
    <button class="btn btn-info" type="button">Seach and Link button</button>
  </div>
</div>
Textarea

                    
<div class="row mt-2">
  <label for="textareaId" class="col-sm-4 col-form-label">Label Name</label>
  <div class="col-sm-8">
    <textarea class="form-control" rows="3" id="textareaId"></textarea>
    </textarea>
  </div>
</div>
Select Box

                    
<div class="row mt-2">
<label for="selectId" class="col-sm-4 col-form-label">Label Name</label>
<div class="col-sm-8">
  <select class="form-select mb-2" id="selectId">
    <option>-- Please Select ---</option>
    <option>A option</option>
    <option>B option</option>
    <option>C option</option>
  </select>
</div>
</div>
Date Box

                  
<div class="row mt-2">
<label for="docDate" class="col-sm-4  form-label">Date</label>
<div class="col-sm-8">
  <div class="input-group">
    <i class="fa-solid fa-calendar-days input-group-text"></i>
    <input type="text" class="datepicker_input form-control" id="docDate" placeholder="Request Date" required
      aria-label="Request Date">
  </div>
</div>
</div>
                  
                  

                
<script>
$(document).ready(function () {
  const getDatePickerTitle = elem => {
    // From the label or the aria-label
    const label = elem.nextElementSibling;
    let titleText = '';
    if (label && label.tagName === 'LABEL') {
      titleText = label.textContent;
    } else {
      titleText = elem.getAttribute('aria-label') || '';
    }
    return titleText;
  }
  const elems = document.querySelectorAll('.datepicker_input');
  for (const elem of elems) {
    const datepicker = new Datepicker(elem, {
      'format': 'dd/mm/yyyy', // UK format
      title: getDatePickerTitle(elem)
    });
  }
});
</script>
Check Box basic style

                    
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>
Check Box inline style

                    
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
Radio button basic style

                    
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
Radio button inline style

                    
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>