I'm using visual studio 2019 and bootstrap4 (which I'm new to) to develop a web page for account registration. The render does not seem right. I remove ASP tags from the code below. I use a combination of codes from www.w3schools.com/bootstrap4. Below is the code I tried.
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Country</span>
</div>
<select class="form-control"><option>1</option></select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Business Name</span>
</div>
<input type="text" class="form-control" placeholder="Business Name">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Street</span>
</div>
<input type="text" class="form-control" placeholder="Street, including Building number and Suite">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
City</span>
</div>
<input type="text" class="form-control" placeholder="City">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
State</span>
</div>
<select class="form-control"><option>1</option></select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Zip code</span>
</div>
<input type="text" class="form-control" placeholder="Zip code"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Telephone</span>
</div>
<input type="text" class="form-control" placeholder="Telephone">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Email Address</span>
</div>
<input type="text" class="form-control" placeholder="Email address">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Website</span>
</div>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</div>
</div>
The input fields do not properly align. Can anyone help why the render does not properly align?
After reading the question and the comments it seems you are having trouble with form-control as it is not going up to its full width. That is because you have a custom css file in Content folder of your project structure that overrides the behavior of few tags. See:
Here you can see input,select,textarea tags have been overridden and you can just remove it or comment it out to make it go full width:
UPDATE:
I also noticed that your html for input controls is also incorrect and not well formatted. Here is the correct version of it:
<style>
.input-group {
width: 100% !important;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Country</span>
</div>
<select class="form-control">
<option>1</option>
</select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Business Name</span>
</div>
<input type="text" class="form-control" placeholder="Business Name">
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Street</span>
</div>
<input type="text" class="form-control" placeholder="Street, including Building number and Suite">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">City</span>
</div>
<input type="text" class="form-control" placeholder="City">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">State</span>
</div>
<select class="form-control">
<option>1</option>
</select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Zip code</span>
</div>
<input type="text" class="form-control" placeholder="Zip code">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Telephone</span>
</div>
<input type="text" class="form-control" placeholder="Telephone">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Email Address</span>
</div>
<input type="text" class="form-control" placeholder="Email address">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Website</span>
</div>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</div>
</div>
</div>
See the output here.
Related
<div formArrayName="partners" style="margin-top:15px;" *ngIf="partner">
<div *ngFor="let partner of partners().controls; let i = index" [formGroupName]="i">
<div class="partner-background">
<div class="row">
<div class="col col-12">
<h6 style="padding:5px;">Manage Partner <button id="remove" class="btn" style="float:right;" *ngIf="partners().length > 1 && i>0" (click)="removePartner(i)"><i class="fas fa-minus-circle"></i></button></h6>
</div>
<div class="col col-6">
<div class="input-group mb-3 mt-1">
<div class="input-group-prepend">
<span class="input-group-text">Full Name</span>
</div>
<input type="text" class="form-control" formControlName="p_first_name">
</div>
</div>
<div class="col col-6">
<div *ngFor="let type of types().controls; let j = index" [formGroupName]="j">
<div class="row" style="margin-top:5px;">
<div class="col col-3">
<label for="type" style="font-size:18px;">Type</label>
</div>
<div class="col col-4">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="urban">
<label class="form-check-label">Urban</label>
</div>
</div>
<div class="col col-4">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="rural">
<label class="form-check-label">Rural</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">DOB</span>
</div>
<input type="text" class="form-control" formControlName="p_dob">
</div>
</div>
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Sex</span>
</div>
<!-- <input type="text" class="form-control" formControlName="p_sex"> -->
<select class="form-control" formControlName="p_sex">
<option value="" selected>Select sex</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Email</span>
</div>
<input type="text" class="form-control" formControlName="p_email">
</div>
</div>
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Phone No</span>
</div>
<input type="text" class="form-control" formControlName="p_phone">
</div>
</div>
</div>
</div>
</div>
In most cases, you need to add multiple form controls inside one form group or multiple form controls inside the form array.
For checkbox, you need to add multiple form controls inside one formArray like this.
const arr = [this.fb.control(false), this.fb.control(false)];
fbArray = this.fb.array(arr);
const form = this.fb.group({
checkbox: fbArray,
});
This is my first post on stackoverflow, so forgive me if I make mistakes.
Would like to reverse these 2 columns in bootstrap and it doesn't work. Tried with order-2 but no luck.
<div class="flexbox">
<div class="container list">
<div class="row">
<h1>Customers</h1>
</div>
<div class="row">
<div class="col-sm-3 order-2">
<div class="list-group" id="supplier-list">
</div>
</div>
<div class="col-sm-6 order-">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">Name</div>
</div>
<input type="text" id="supplier-name" class="form-control" aria-label="Input group example">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">CUI</div>
</div>
<input type="text" id="supplier-cui" class="form-control" aria-label="Input group example">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">ID</div>
</div>
<input type="text" id="supplier-id" class="form-control" aria-label="Input group example">
</div>
<br>
<button type="button" id="suppliers-update" class="btn btn-success">Update</button>
<button type="button" id="suppliers-delete" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
I have a form with 3 fields, two of them are for entering dates. I was requested to add an icon to the very end of the field.
This is the result:
If you see the field that has the icon expands beyonds the other fields to the left and right so it looks pretty ugly.
This is the code:
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Any clue on how to do it right?
Here is your fixed code please copy it and paste it
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group ">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div></div>
</div><div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>
I have tested it works fine. Cheers!
Some CSS is messing with you.
Your line with input-group col-md-8 is apparently malfunctioning.
I made an example:
https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR
Check if you have some custom CSS that is overriding bootstraps'.
Use my code this is working fine.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
This is my code :
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
The only thing that I changed is <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
And here is before/after :
Before I inserted col-md-6 col-md-offset-3, the blue-shaded box looks balanced.
After I inserted col-md-6 col-md-offset-3, it looks unbalanced.
Why does it happen? I think that grid should work well(login box should be located at center" because it means `3(offset) - 6 - 3(offset)'.
Need your help.
Its because your loginbox does not have 12 columns in total as you specified 6+3(offset) =9
I would suggest this way as I dont like using offset
<div class="col-md-3 "></div>
<div id="loginbox" class="mainbox col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
<div class="col-md-3 "></div>
Here's my take: giving it a fluid container and a couple extra rows to center things up:
<div class="container-fluid">
<div class="row">
<div class="brown-row col-md-8 col-md-offset-2">
<div class="row">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body">
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
<!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
</div>
</div>
</div>
</div>
and css:
body {
background: #634a16;
}
.brown-row {
background: #9e7623;
}
#loginbox {
margin-top: 50px
}
I'd like to draw a table using bootstrap css and looks like this:
After reading many tutorials on internet, I didn't find any examples directly support multi controls aligned as the pictrue above (either using .form-horizontal or .form-inline).
Can anyone show me an example please ?
You can also use grid system without adding any customized styles:
<form>
<div class="row">
<div class="col-md-1 col-sm-1 form-group">
<label>Name</label>
</div>
<div class="col-md-5 col-sm-11 form-group">
<input type="text" class="form-control" />
</div>
<div class="col-md-1 col-sm-1 form-group">
<label>Age</label>
</div>
<div class="col-md-5 col-sm-11 form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-1 col-sm-1 form-group">
<label>Sex</label>
</div>
<div class="col-md-5 col-sm-11 form-group">
<input type="text" class="form-control" />
</div>
<div class="col-md-1 col-sm-1 form-group">
<label>Job</label>
</div>
<div class="col-md-5 col-sm-11 form-group">
<input type="text" class="form-control" />
</div>
</div>
</form>
Results:
large
small
Smallest
#ineztia: try this source code and let me know.
.form-row > .control-label {
margin-top: 5px;
}
.form-row > .input-text {
margin-bottom: 5px;
}
#media screen (min-width: 768px) {
.form-row > .control-label {
margin-top: 0;
}
.form-row > .input-text {
margin-bottom: 0;
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<div class="form-row">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Name</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
<input type="text" placeholder="Name..." class="form-control input-md">
</div>
</div>
<div class="form-row">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Age</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
<input type="text" placeholder="Age..." class="form-control input-md">
</div>
</div>
</div>
<!--/form-group-->
<!-- Text input-->
<div class="form-group">
<div class="form-row">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Sex</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
<input type="text" placeholder="Sex..." class="form-control input-md">
</div>
</div>
<div class="form-row">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
<input type="text" placeholder="Job..." class="form-control input-md">
</div>
</div>
</div>
<!--/form-group-->
<!-- Button (Double) -->
<div class="form-group text-right">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button name="btn-ok" class="btn btn-cancel btn-success">OK</button>
<button name="btn-cancel" class="btn btn-cancel btn-danger">Cancel</button>
</div>
</div>
<!--/form-group-->
</fieldset>
<!--/fieldset-->
</form>
<!--/form-->
</div>
</div>
</div>