Bootstrap4: ширина текста и текстовой области не совпадают

Question

Я хочу, чтобы мой текст и текстовое поле имели одинаковую ширину. Я понятия не имею, что делает col, lg, md, MB и sm. Я много пробовал. Вот код. помогите пожалуйста

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container-fluid">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading display-4" id="contact">Contact <span class="text-muted display-4">Us</span></h2>
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" src="undraw_contact_us_15o2.png" width="70%" height="70%" xmlns="http://www.w3.org/2000/svg" focusable="false" role="img"></img>
</div>
<div class="form">
<form action="https://formspree.io/mzbjjlyy" method="POST" class="was-validated">
<div class="form-group mb-3">
<label>
Your email:
<input type="text" name="_replyto" class="form-control" placeholder="Enter email" id="email" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</label>
</div>
<div class="form-group">
<label for="msg">
Your message:
<textarea name="message" class="form-control mb-3" placeholder="Enter your message" id="msg" rows="5" required></textarea>
</label>
<br>
<button type="submit" class="btn btn-primary btn-lg">Send</button>
</form>
</div>
</div>
</div>

также, где я могу об этом узнать

Answer 1

Ваша ошибка здесь. Закройте тег label перед добавлением textarea. Проверьте эту ссылку https://getbootstrap.com/docs/4.5/layout/overview/, чтобы узнать, как работают классы макета bootstrap.

<label for="msg">
    Your message:
</label>
    <textarea name="message"  class="form-control mb-3" placeholder="Enter your 
    message" id="msg" rows="5" required>
</textarea>