Vertically align Label and Input in Bootstrap using CSS

Last Reply one month ago By dharmendr

Posted one month ago

Align left fields in bootstrap.

As I can do to Align to the left fields in bootstrap I attached an image and the source code of the page that I am designing. the fields did not stick as close to the labels as possible.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Búsqueda de Servicios</title>
<link rel="stylesheet" href="../css/3.3.2.bootstrap.min.css" />
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0" />
</head>
<body>
    <form id="form1" runat="server" class="container">
    <div class="row">
    <div class="col-md-6">
        <div class="form-group">
                    <asp:Label ID="Fecha" runat="server" CssClass="control-label col-md-4" Text="Fecha del:"></asp:Label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <asp:TextBox class="form-control" ID="date" name="date" runat="server" required=" "></asp:TextBox>

                        </div>
                    </div>       
               <div class="form-group">
                    <asp:Label ID="Apellido" runat="server" CssClass="control-label col-md-4" Text="Seguro:"></asp:Label>
                    <div class="col-md-6">
                        <asp:DropDownList ID="ddlSeguro" runat="server" class="form-control selectpicker validate[required]" data-show-subtext="true" data-live-search="true">
                        </asp:DropDownList>
                    </div>
                </div>                
    </div>
    <div class="col-md-6">
       <div class="form-group">
                    <asp:Label ID="Label1" runat="server" CssClass="control-label col-md-4" Text="Fecha al:"></asp:Label>

                    
                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <asp:TextBox class="form-control" ID="TextBox1" name="date" runat="server" required=" "></asp:TextBox>
                        </div>
                    </div>
                <div class="form-group">
                    <asp:Label ID="Label2" runat="server" CssClass="control-label col-md-4" Text="Marca:"></asp:Label>
                    <div class="col-md-6">
                        <asp:DropDownList ID="ddlMarca" runat="server" CssClass="form-control selectpicker validate[required]" data-show-subtext="true" data-live-search="true"  style="width: 300px">
                        </asp:DropDownList>

                    </div>
                </div>                
            </div>
        </div>    
    </form>
</body>
</html>

 

Posted one month ago

Hi jmontano,

For Label controls assign CssClass control-label col-md-2 instead of control-label col-md-4.

HTML

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <asp:Label ID="Fecha" runat="server" CssClass="control-label col-md-2" Text="Fecha del:"></asp:Label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <asp:TextBox class="form-control" ID="date" name="date" runat="server" required=" "></asp:TextBox>
            </div>
        </div>
        <div class="form-group">
            <asp:Label ID="Apellido" runat="server" CssClass="control-label col-md-2" Text="Seguro:"></asp:Label>
            <div class="col-md-6">
                <asp:DropDownList ID="ddlSeguro" runat="server" class="form-control selectpicker validate[required]"
                    data-show-subtext="true" data-live-search="true">
                </asp:DropDownList>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <asp:Label ID="Label1" runat="server" CssClass="control-label col-md-2" Text="Fecha al:"></asp:Label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <asp:TextBox class="form-control" ID="TextBox1" name="date" runat="server" required=" "></asp:TextBox>
            </div>
        </div>
        <div class="form-group">
            <asp:Label ID="Label2" runat="server" CssClass="control-label col-md-2" Text="Marca:"></asp:Label>
            <div class="col-md-6">
                <asp:DropDownList ID="ddlMarca" runat="server" CssClass="form-control selectpicker validate[required]"
                    data-show-subtext="true" data-live-search="true" Style="width: 300px">
                </asp:DropDownList>
            </div>
        </div>
    </div>
</div>

 


Posted one month ago Modified on one month ago

Hi jmontano,

Add the below css.

<style type="text/css">
    .col-md-2
    {
        width: auto;
    }
</style>

If it will not solve your issue you need to contact with a designer for changes in your design or need to read bootstrap to design your page.

 

 

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html