How can i use margin and padding inside of bootstrap? - html

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>

Related

Is leaving completely empty columns in Bootstrap a bad design/programming practice?

Here's what I mean.
I have a log in button on the top right of the page, and the title of the page centered in the middle.
However, the only way I found to center the tile on the div, was the center the div itself on the page, which was col-md-9.
I tried using CSS to center the Div, but I couldn't make it work, so the workaround I found was the center the div by using another column before the column where the Title is positioned.
However, this new div is completely empty. I might put a logo in it later on, but I planned for the top right of the page to be empty.
Is there something bad with having empty divs?
Is there a better way to implement this?
Code for reference.
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1 id="TEXT">OH SNIP</h1>
<br>
</div>
<div class="col-md-3">
<div class="dropdown">
<button id="dpBt" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
<form id="logIn" action="api/users" method="POST">
<div class='form-group'>
<label for='username' class='sr-onl'>Username</label>
<input id='username' type='username' required='' placeholder='Username' class='form-control' name='username'>
</div>
<div class='form-group'>
<label for='password' class='sr-onl'>Password</label>
<input id='password' type='password' required='' placeholder='Password' class='form-control' name='password'>
</div>
<div class='form-group'>
<button id="btnLogin" class='btn btn-block'>Login</button>
</div>
</form>
<hr>
<input id="btnRegisto" type="button" class="btn btn-block" value="Sign up">
<br>
</div>
</div>
</div>
</div>
You could leave blank columns, but a better approach provided by Bootstrap is to use offsets.
Here is an example from Bootstrap 3.3
https://getbootstrap.com/docs/3.3/css/#grid
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
Here's an example that better fits what your trying to do. Notice the offset for the button.
<form class="form-horizontal" method="post" action="/login/">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="id_username" name="username" value="" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" value="" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>

Bootstrap align horizontal

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>

Bootstrap Horizontal Form not vertical

I would like to create a form and have it vertical. However on my computer the fields are all inline:
<div class="container">
<div class="col-sm-6 col-md-offset-3">
<form role="form" ng-submit="submit()" ng-controller="formCtrl">
<div class="col-sm-6 form-group">
<input type="email" data-ng-model="form.email" placeholder="your#email.here" class="form-control">
</div>
<div class="col-sm-6 form-group">
<input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
</div>
<div class="col-sm-4 form-group">
<button type="submit" class="btn btn-success">sign in</button>
</div>
</form>
<div id="messages"></div>
</div>
</div>
I would like a slightly more narrow form as seen in the code. class="form-horizontal" does not help at all. Picture below shows the result!
Reduce the parent container class to col-sm-3 and increase the child container's class to be col-sm-12.
So the parent container will have 25% width while the child containers will occupy the full width(100%) of the parent.
Readjust the centering of the form by modifying the offset-* classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-sm-3 col-sm-offset-4">
<form role="form" ng-submit="submit()" ng-controller="formCtrl">
<div class="col-sm-12 form-group">
<input type="email" data-ng-model="form.email" placeholder="your#email.here" class="form-control">
</div>
<div class="col-sm-12 form-group">
<input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
</div>
<div class="col-sm-4 form-group">
<button type="submit" class="btn btn-success">sign in</button>
</div>
</form>
<div id="messages"></div>
</div>
</div>

Unable to position well to center

I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.

how do i control width of input with bootstrap

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