i am trying to control my width's for my input but i am having some trouble. Here is my mark up
<section class="bg-lb pt40 pb40 btborder">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bg-white ">
<div class="pt40 pb40">
<a class="btn btn-default hvr-fade">Login</a>
<span id="cricle"><b>OR</b></span>
<a class="btn btn-default hvr-fade">Register</a>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span></div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span></div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
<a class="btn btn-default hvr-fade"><b>LOGIN</b></a>
</form>
</div>
</div>
</div>
</div>
</section>
im just simply trying to reduce the width of the input and center the form,
live preview here
http://plnkr.co/edit/RN6tPNCynK2lEdTeWmFQ?p=preview
If you want to continue using the grid system you can change the way your col-'s are setup.
Change:
<div class="row">
<div class="col-sm-12">
<div class="bg-white">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
To:
<div class="row">
<div class="bg-white">
<form>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
The main difference is that <div class="col-md-6 col-md-offset-3"> is now specifically wrapping the <div class="form-group">. Where the col-md-offset-3 is what will be centering your form.
Or to go a bit further, create a new <div class="row"> for each <div class="form-group"> instead of embedding all columns into one row.
The bootstrap way is to reduce the width of the column the form is in. With 3 columns you can center the form:
<div class="col-sm-3"></div>
<div class="col-sm-6">form comes here</div>
<div class="col-sm-3"></div>
http://plnkr.co/edit/DSroqJsfQBTuwBUgo3ps?p=preview
Just override bootstrap .css in a particular place. Try this for eg:
put it inside the css:
input.form-control{
max-width: 100px;
}
input.form-control will override every input with class set to : form-control
Or you can shrink the entire container class
.container{
max-width: 250px;
}
Test here : http://plnkr.co/edit/kR69nCvsDCp9AlQqZztY?p=preview
Related
I am trying to make a Sign-UP form in html and CSS with notepad++ but whenever I try to run it on chrome, it loads very slowly. Is it a configuration error or something? What am I doing wrong? Is there a plugin needed? This is my entire code:
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the bootstrap and jQuery plugins.
In HTML page link the external files properly.
In head section add the external links.
Maintain the folder structure neat so that linking extrnal files is easy.
If everything is correct go to this link to set up Chrome: https://www.webnots.com/fix-slow-page-loading-issue-in-google-chrome/
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have problem with responsive design. So i have components:
Here is code:
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
The problem is when i change size of window - i have this ugly destroyed design:
How i can fix it? (only bootstrap if it's possible)
UPDATE
Using advices i've add pull-left to all columns and everything is okay.
But when i little bit ensmall size there are result:
Bit of a guess right now, not sure if you want the form items to reflow or not. What is the expected result? Should each input be on it's own row (i.e. 4 rows of inputs)? Or should the two inputs per row be maintained at all sizes?
Here is an answer to place each input on their own row at the breakpoint.
Remove .pull-left from the first column in each row.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
Here is a solution for maintaining two inputs per row. You need to use a different column class. Currently you're using the medium -md- class. Here I have used the extra small -xs- class. See Bootstrap Grid Options for different column classes.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<div class="container">
<div class="row">
<div class="col-xs-7">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
I think you just need add the "pull-left" to all the column <div> tags like mentioned below:
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5 pull-left">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5 pull-left">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
I and able to get decent result.
I would like to add a button to the right of the zip code without effecting the size of the field.
Any suggestions would be appreciated.
My original markup was (which is what picture matches):
<div class="col-md-6 col-md-offset-3 text-center" style="border:solid">
// All my fields...
</div>
I then tried:
<div class="col-md-3"></div>
<div class="col-md-6">
// All my fields using form-group
</div>
<div class="col-md-3">
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group">
#(Html.Kendo().Button()
.Name("btnLookup")
.Content("Lookup")
)
</div>
</div>
However it placed the button to the top of the form.
Before I added the button the page looks like:
Have you tried adding them via display: absolute?
.form-group {
position: relative;
}
.lookup {
position: absolute;
top: 0;
right: -50px;
width: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Postal">
<button class="btn btn-primary lookup"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="City">
</div>
</div>
</div>
</div>
i have been creating a form by using bootstrap but the result is not ok for me. how can i make my form better?
<div class="row" ng-if="model.FieldType == customTypes.Select">
<div class="form-group">
<label class="control-label col-md-4">Seçim</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect"/>
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+</button>
</div>
</div>
<div class="form-group">
<div class="col-md-8 pull-right">
<select class="form-control" ng-options="field.id as field.value for field in DropdownListCustomItems" ng-model="model.DropdownListCustomItem"></select>
</div>
</div>
</div>
</div>
If I'm right, you are looking for something like this. This code will fix alignment issue. How ever, I don't know the bootstrap way for setting top-margin. In this code, I'm using a custom css for setting top margin.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label class="control-label col-md-4">Seçim</label>
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect" />
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+
</button>
</div>
</div>
</div>
<div class="col-md-8 col-md-push-4" style="margin-top: 4px">
<div class="form-group">
<select class="form-control"></select>
</div>
</div>
</div>
</div>
I am trying to center a form in the center of the page, but everytime I center the col, the contents get pushed to the left side of that col. I want the form to be the full width of the col-md-6 and that col centered in the middle of the page.
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-2">Your Name:</div>
<div class="col-md-4">
<input type="text" name="uname" class="form-control" required="" placeholder="Your Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Email:</div>
<div class="col-md-4">
<input type="email" name="email" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Company:</div>
<div class="col-md-4">
<input type="text" name="company" class="form-control" required="" placeholder="Company Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Contact:</div>
<div class="col-md-4">
<input type="email" name="contactemail" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Choose file(s):</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required="">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
</div>
</div>
http://www.bootply.com/OiRABZIff0
Add col-md-offset-3 before col-md-2.
Have a look at the bootply here
Also not that col should be defined within rows and rows should be encapsulated within container, so I modified the html structure a bit as well.
Change your
<div class="col-md-6 col-md-offset-3">
to
<div class="col-md-7 col-md-offset-4">
I have edited. check out this help you.
http://www.bootply.com/QnYcyyIh2V