Bootstrap 4：我如何创建这样的表单？

Question

I am using Bootstrap 4,and I wonder a form like this:

Screenshot：

It comes from Semantic-ui http://semantic-ui.com/collections/form.html

edit:
Bootstrap 4's select menu is like this,it has a default option,I don't want it.

<fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>

how can I create one?

Answer 1

You can use the dropdown class and make sure you include a menu header to avoid having a default element: <h6 class="dropdown-header">Dropdown header</h6>

For example:

<div class="dropdown-menu">
  <h6 class="dropdown-header">Gender</h6>
  <a class="dropdown-item" href="#">Male</a>
  <a class="dropdown-item" href="#">Female</a>
</div>

More info here : http://v4-alpha.getbootstrap.com/components/dropdowns/