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/
Related
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
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>
I have a panle body that including an image and button under it.
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden">
</div>
<div class="col-md-6">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden">
</div>
</div>
</div>
I could not set alignment of button and image. Button should be under image and center. I could create a temporary solution with custom css but I want to learn is there a solution with bootstrap.
Since the labels are of inline display in nature, the class text-center does the trick for you!
<div class="panel-body">
<div class="row">
<div class="col-md-6 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden">
</div>
<div class="col-md-6 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden">
</div>
</div>
Preview
Fiddle: http://www.bootply.com/QwYES83I3B
Try this:
DEMO
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="col-md-12 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden" />
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden" />
</div>
</div>
</div>
</div>
I am creating a form using Bootstrap and the text input widths are too long. I tried to set the width = 35% of class form-control in bootstrap.css and it looks ok, but when I resized the screen it overlapped the other <div>. As of now I changed it back to 100%. And it is too long and it overlap the other <div>.
Here is my code:
<div class="col-sm-10">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>LOGIN</h4>
<div class="panel panel-default" style="border: solid 2px black">
<div class="panel-body" style="min-height: 456px">
<div class="row">
<div class="container">
<div class="col-sm-12">
<form role="form">
<div class="form-group">
<h4>REGISTER</h4>
<p>Please login to take advantage of promotions and benefits reserved to registered users.</p>
</div>
<div class="form-group" style="margin-top: 35px">
<h5>EMAIL ADDRESS* </h5>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<h5>PASSWORD* </h5>
<input type="password" class="form-control" />
</div>
<div class="form-group">
<span><input type="checkbox" style="margin-top: 20px" /></span><span> Remember me next time</span>
</div>
<div class="form-group">
<span>
<button type="button" class="btn btn-default" onclick="location.href='register.html'" >REGISTER NOW</button>
</span>
<span>
Forgot your password?
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<h5> </h5>
<div class="panel panel-default" style="border: solid 2px black">
<div class="panel-body" style="min-height: 456px">
<h5>NEW USER</h5>
<div class="register-notify">
<p>Register now and enjoy the benefits of My Account. Only registered users can:</p>
<p>- Access to your personal information through My Account</p>
<p>- Use the Wish List to save their favorite products</p>
<p>- Complete the checkout process more quickly</p>
</div>
<div style="margin-top: 150px">
<input type="button" value="REGISTER NOW" class="register-button" onclick="location.href='register.html'" />
</div>
</div>
</div>
</div>
</div>
Change the class of the div tag to col-sm-6. This should do the trick.
<div class="container">
<div class="col-sm-6"> <!--The div tag before the form-->
<form role="form">
Check out the demo here.
I am trying to center my form of class well in the middle of the screen , could someone tell me how to modify this code to do so ?
<body>
<div class="container">
<div class="container">
<img class="myimg" src="img/logo.png" alt="my logo"/>
</div>
<div class="container">
<form class="well span4">
<input type="text" class="span3" placeholder="Username"/><br/>
<input type="password" class="span3" placeholder="Password"/><br/>
<button class="btn btn-primary span3">Sign in</button>
</form>
</div>
</div>
Try using
<div class="container text-center">
on the second .container that you have right there (the parent of the .well).
This should do it. Just offset your form by 4. This works because the 3 cols are of equal width
<div class="container">
<div class="container">
<img class="myimg" src="img/logo.png" alt="my logo"/>
</div>
<div class="container">
<form class="well offset4 span4">
<input type="text" class="span3" placeholder="Username"/><br/>
<input type="password" class="span3" placeholder="Password"/><br/>
<button class="btn btn-primary span3">Sign in</button>
</form>
</div>