I am struggling to make my ASP.NET C# textbox responsive and span the entire width of the div. I am using Bootstrap 4 and have tried various methods without success.
- I attempted nesting divs with centering and expanding techniques.
- Setting margin-left & right to auto.
- Experimenting with display: block, flex, and inline-block.
- Hard coding size values.
- Utilizing CSS sizing properties.
- Exploring box sizing options.
- Testing out numerous Bootstrap classes.
- And more strategies.
Here is a screenshot of my current result: https://i.sstatic.net/USdMk.png
Below is the ASPX and HTML Code:
<div class="col-sm-6">
<asp:Label ID="lblContactHeader" runat="server" Text="Drop us a line" Font-Bold="True" CssClass="large-label"></asp:Label>
<br />
<div class="form-group">
<asp:Label ID="lblName" runat="server" Text="Name*"></asp:Label><br />
<asp:TextBox ID="txtName" runat="server" CssClass="inputSize"></asp:TextBox><br />
</div>
<div class="form-group">
<asp:Label ID="lblPhone" runat="server" Text="Phone*"></asp:Label><br />
<asp:TextBox ID="txtPhone" runat="server" CssClass="inputSize"></asp:TextBox><br />
</div>
<div class="form-group">
<asp:Label ID="lblEmail" runat="server" Text="Email*"></asp:Label><br />
<asp:TextBox ID="txtEmail" runat="server" CssClass="inputSize"></asp:TextBox><br />
</div>
<div class="form-group">
<asp:Label ID="lblComments" runat="server" Text="Comments*"></asp:Label><br />
<asp:TextBox ID="txtComments" runat="server" CssClass="inputSize" TextMode="MultiLine" Rows="3"></asp:TextBox>
</div>
<br />
<asp:Button ID="custContact" runat="server" Type="submit" Text="Submit" CssClass="btn btn-orange btn-right"/>
</div>
The following is my current CSS code where I have implemented multiple solutions proposed in different Stack Overflow posts:
.inputSize {
width: 100%;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;}
Lastly, here is the HTML version of the code:
<label>Name*</label>
<input type="text" name="custName" class="form-control" required />
<label>Phone*</label>
<input type="text" name="custPhone" class="form-control" placeholder="(###) ###-####" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" required />
<label>Email*</label>
<input type="text" name="custEmail" class="form-control" required />
<label>Comments*</label>
<textarea class="form-control" name="custComm" required ></textarea>
<br/>
<input type="submit" name="btn-submit" id="custContact" value="Submit" class="btn btn-orange btn-right"/>