newbieprogrammer newbieprogrammer - 1 year ago 286
ASP.NET (C#) Question

How to wrap validation controls in Bootstrap classes?

I am using Bootstrap 3 with ASP.NET webforms and I am completely new to Bootstrap. The webform I am working on uses validation controls. My web form has a standard layout with two columns and I am using "form-group" class to group my labels and input fields.

Now the problem is that as I am placing the label, input field as well as its validator in the Bootstrap "form-group" class, the message in the text property of the validator is being displayed in the next line after validation. I want that to be displayed right next to the input field. Is there any alternative way I can do this?

<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtBox">Address <span class="required">*</span></asp:Label>
<asp:TextBox id="txtBox" runat="server" CssClass="form-control"/>
<asp:RequiredFieldValidator ID="rfvLine1" ValidationGroup="<%# ValidationGroup %>" ControlToValidate="txtBox" runat="server" Display="Dynamic" ErrorMessage="Line 1 is required." Text="*"/>

Win Win
Answer Source

Easiest way is to create validation in separate column.

enter image description here

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
        .required {
            color: #e31937;
            font-family: Verdana;
            margin: 0 5px;

        .field-validation-error {
            color: #e31937;
            font-weight: bold;
    <form id="form1" runat="server">
        <br />
        <div class="container form-horizontal">
            <div class="form-group">
                <asp:Label runat="server"
                    CssClass="col-xs-12 col-sm-4 control-label">
                    <span class="required">*</span>
                <div class="col-xs-12 col-sm-4 ">
                    <asp:TextBox ID="txtBox" runat="server"
                        CssClass="form-control" />
                <div class="col-xs-12 col-sm-4 form-control-static">
                    <asp:RequiredFieldValidator ID="rfvLine1"
                        ControlToValidate="txtBox" runat="server"
                        Text="Line 1 is required." />
            <div class="form-group">
                <div class="col-xs-12 col-sm-offset-4 col-sm-4 ">
                    <asp:Button runat="server" ID="SubmitButton"
                        Text="Submit" CssClass="btn btn-primary" />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download