Добавить кнопку в конец группы ввода

Question

Есть ли способ в начальной загрузке добавить кнопку в нижней части ввода / textarea
вместо добавления к правой / левой стороне?

Вот что я пробовал:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <textarea class="form-control" rows="10" placeholder="Type your notes here..." required></textarea>
  <div class="input-group-append">
    <button class="btn btn-primary">Button</button>
  </div>
</div>

И вот что я пытаюсь достичь:

Answer 1

Похоже, что у bootstrap нет такой функции (или, по крайней мере, недостаточно хорошо документировано, чтобы найти ее).
Таким образом, добавление 2 простых классов для решения округления границ работало хорошо.

.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  width: 100%;
}

.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
  <textarea class="form-control rounded-bottom-0"
            rows="10"
            placeholder="Type your notes here..."
            required></textarea>
  <button class="btn btn-primary rounded-top-0">Copy to clipboard</button>
<div>

Примечания:

1. Удаление !important -s из css будет работать для Chrome, но не для Firefox.
2. Классы Bootstrap округление границ там также не работали, так как границы уже округлены, и у Bootstrap нет класса для сброса раунда со сторон.

Answer 2

Использование w-100

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <textarea class="form-control w-100" rows="10" placeholder="Type your notes here..." required></textarea>
  <div class="input-group-append w-100">
    <button class="btn btn-primary w-100">Button</button>
  </div>
</div>