CODEWITHSUNDEEP
csstwitter-bootstrap
dinotom
dinotom

Reputation: 5162

cant display inline in web forms app with bootstrap

I am customizing the account registration section of a new VS 2013 web application which comes with bootstrap css format. I am trying to build a form on a page and cannot get one section to display inline instead of block. Latest try is below.

<div class="form-group">
        <asp:Label runat="server" AssociatedControlID="ddlCountry" CssClass="col-md-2 control-label">Country</asp:Label>
        <div class="col-md-10">
            <asp:DropDownList runat="server" ID="ddlCountry" CssClass="form-control" Width="200" />
            <div class="form-group">
                <asp:Label runat="server" AssociatedControlID="tbPostalCode" CssClass="col-md-2 control-label">Postal Code</asp:Label>
                <div class="col-md-10-inline">
                    <asp:TextBox runat="server" ID="tbPostalCode" CssClass="form-control" Width="200" MaxLength="10" Height=" " />
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="ddlCountry"
                        CssClass="text-danger" ErrorMessage="The country field is required." />
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="tbPostalCode"
                        CssClass="text-danger" ErrorMessage="The postal code field is required." />
                </div>
            </div>
        </div>
    </div>

This is how everything I try to get it to display inline ends up looking like

enter image description here

I want the Postal Code label and text box to display on same line as Country. Normally an easy task but bootstrap clearing getting in the way

Upvotes: 2

Views: 1001

Answers (1)

Girish Thimmegowda
Girish Thimmegowda

Reputation: 2169

what i did to achieve this is wrote each form controls in a separate row. ie,

<form role="form">

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
  </div>
</div>

<div class="row">

  <div class="col-lg-6">
    <div class="form-group">
      <label for="fname">First Name</label>
      <input type="text" class="form-control" id="fname" placeholder="Enter email">
    </div>
  </div>

  <div class="col-lg-6">
    <div class="form-group">
      <label for="lname">Last Name</label>
      <input type="text" class="form-control" id="lname" placeholder="Enter Last Name">
    </div>
  </div>

</div>
</form>

In the above code, First Name and Last Name elements will be shown in a same line,

I don't know whether its right way or not but it worked for me.

check it here http://ezmotionq.com/registration

Upvotes: 1

Related Questions