CODEWITHSUNDEEP
htmlbootstrap-4
samoon
samoon

Reputation: 1

Bootstrap4: Text and text area width not same

I want my text and textarea have same width. I have no idea what col, lg, md, MB, and sm does. I have tried it a lot. Here is the code. please help

<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>

also, where can I learn about it

Upvotes: 0

Views: 39

Answers (1)

Eric
Eric

Reputation: 1126

Your bug is in here. Close the label tag before adding the textarea. Check this link https://getbootstrap.com/docs/4.5/layout/overview/ for how bootstrap layout classes work.

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

Upvotes: 1

Related Questions