I am new to webforms and am trying to create a login page with 2 buttons and 2 textboxes. I have placed them between divs however I am getting no spces between them.
Here is what I am getting:
As you can see there is no vertical space between the buttons and textboxes and labels
Here is the code I am using:
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="imgs/generaluser.png" />
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col">
<label>Member ID</label>
<div class="form-group">
<asp:TextBox CssClass= "form-control" ID="Textbox1" runat="server"
placeholder="Member ID"></asp:TextBox>
</div>
<label>Password</label>
<div class="form-group">
<asp:TextBox CssClass= "form-control" ID="Textbox2" runat="server"
placeholder="Password" TextMode="Password"></asp:TextBox>
</div>
<div class="form-group">
<asp:Button class="btn btn-primary btn-lg col-12" ID="Button1"
runat="server" Text="Login" />
</div>
<div class="form-group">
<input class="btn btn-info btn-lg col-12" id="Button2"
type="button" value="Sign Up" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using bootstrap. Should not it give vertical space automatically?
How do I fix this?
You can add margin with bootstrap by adding it to the class
<label class="mt-3">Password</label>
You should be using inputs instead of textboxes
and you should look into wrapping it all in a form
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="imgs/generaluser.png" />
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col">
<label>Member ID</label>
<div class="form-group">
<input class= "form-control" ID="Textbox1" runat="server"
placeholder="Member ID"></T>
</div>
<label class="mt-3">Password</label>
<div class="form-group">
<input class= "form-control" ID="Textbox2" runat="server"
placeholder="Password" TextMode="Password"></Textarea>
</div>
<div class="form-group mt-2">
<input class="btn btn-primary btn-lg col-12" ID="Button1"
runat="server" Text="Login" value="Login" />
</div>
<div class="form-group mt-2">
<input class="btn btn-info btn-lg col-12" id="Button2"
type="button" value="Sign Up" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
You can either use a margin-top for the button class of use a <br> after the first button container
Related
I am having issue with my bootstrap page. I am trying to create a login form with header logo but when I am viewing it in my mobile it is not correctly displayed.
I am using bootstrap 4.5.2
Here's my HTML:
<div class="container">
<div class="row">
<div class="col-md-6 text-center justify-content-center align-items-center">
<img src="Images/logo-lg.png" alt="logo" class="img-fluid"/>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="Images/profile.svg"/>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<hr>
</div>
</div>
<div class="row">
<div class="col">
<label>Username</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="txtUsername" runat="server" placeholder="Username" required></asp:TextBox>
</div>
<label>Password</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="txtPassword" runat="server" placeholder="Password" TextMode="Password" required></asp:TextBox>
</div>
<div class="form-group">
<asp:Button class="btn btn-success btn-block btn-lg" ID="btnLogin" OnClick="ValidateUser" runat="server" Text="Login" />
</div>
<div class="form-group">
<a href="Registration.aspx">
<input class="btn btn-info btn-block btn-lg" id="btnRegistration" type="button" value="Sign Up" /></a>
</div>
<div class="form-group">
<div id="dvMessage" runat="server" visible="false" class="alert alert-danger">
<strong>Error!</strong>
<asp:Label ID="lblMessage" runat="server" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's what it looks like when I am viewing it on my mobile.
I want it to be the logo at the top of the login details when it is resize to mobile.
Add
<div class="col-md-6 col-sm-12">
Instead of
<div class="col-md-6">
For both the columns
You can use the Grid System here is the link:
https://getbootstrap.com/docs/4.0/layout/grid/
I currently have this as part of my script, the header and 2 paragraphs are being centered properly, but container and button are off to the left side. I have tried using <center> </center> but I don't know where to properly apply them for the form and button to be centered.
Screenshot of what needs to be centered:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-4">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Add 'text-center' class to the row and edit the 'col' classes to have 12 as a sum
<div class="container" >
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-3">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
<div class="col-md-3"></div>
</div>
</form>
</div>
Check out this code:
<div class="text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-4">
<div class="custom-file" id="customFile" lang="es">
<input type="file" class="custom-file-input">
<label class="custom-file-label" for="exampleInputFile">
Choose file...
</label>
</div>
</div>
<div class="col-12 col-md-1">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Hope this helps.
Here is my existing view.
I do not understand why the textbox for "bbbbbbb" does not take the same width as column "aaaaa".
I set the border on the div and it clearly illustrates the width.
Why does the input element not fill the contents of the div?
<div class="container">
<div class="row" style="padding-top:10px;">
<div class="col-sm-2">
<label for="mtc">aaaaaa</label>
</div>
<div class="col-sm-10">
#(Html.Kendo().MultiSelect()
.Name("mtc")
.DataValueField("aaa")
.DataTextField("bbb")
.Placeholder("Select Map Type Codes...")
.AutoBind(false)
.DataSource(src =>
{
src.Read("Action", "Controller");
})
)
</div>
</div>
<div class="row" style="padding-top:10px;">
<div class="col-sm-2">
<label for="bb">bbbbbbb</label>
</div>
<div class="col-sm-10" style="border:solid">
<input type="text" style="width:100%;" class="k-textbox" id="bb" />
</div>
</div>
<div class="row" style="padding-top:10px;">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<input type="submit" value="Submit" id="btnSubmit" class="btn btn-primary" />
</div>
</div>
</div>
I'm trying to arrange inputs and labels horizontally.
I tried:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="span2">
<h2>Label1:</h2>
</div>
<div class="span2">
<input id="Filter_1" />
</div>
<div class="span1">
<h2>Label2:</h2>
</div>
<div class="span1">
<input id="Filter_2" />
</div>
<div class="span2">
<h2>Label3:</h2>
</div>
<div class="span2">
<input id="Filter_3" />
</div>
<div class="span1">
<input id="Button1" type="button" class="btn btn-large" value="Button 1" />
</div>
</div>
But the result was terrible with all this in the left side of the screen while the right side completely blank:
If you use bootstrap you can use this layout.
Run code and open it in full page mode.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-xs-6 col-md-4 col-lg-3">
<label>Label1:</label>
<input id="Filter_1" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<label>Label2:</label>
<input id="Filter_2" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<label>Label3:</label>
<input id="Filter_3" />
</div>
<div class="form-btn">
<input id="Button1" type="button" class="btn btn-primary btn-large" value="Button 1" />
</div>
</div>
</div>
Also you can find more guidance and example in forms-horizontal in bootstrap
I think the attribute you are searching for is float. Add to your CSS:
.span1, .span2 {
float: left;
[...]
}
How can I have all align horizontal the below code renders as shown in the screen 1 and but I'm trying to have as shown in screen 2
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Number</label>
</div>
<div class="col-xs-3">
<input type="text" id="number"></input>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Tag</label>
</div>
<div class="col-xs-3">
<input type="text" id="Name"></input>
</div>
<div class="col-xs-3">
<button class="btn btn-default" type="button">Go!</button>
</div>
</div>
</div>
Screen shot 1:
Screen shot 2:
Your HTML structure is incorrect; you're nesting columns and rows and then columns inside columns for no reason. Docs
See example.
(*The columns are XS as in your example which in this case will not render very well from a mobile screen, consider using SM)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form class="myForm">
<div class="form-group">
<label for="Number" class="col-xs-2 control-label">Number</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="Number" />
</div>
</div>
<div class="form-group">
<label for="tag" class="col-xs-2 control-label">Tag</label>
<div class="col-xs-4">
<div class="input-group">
<input type="email" class="form-control" id="tag" /> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>