I am trying to center the content to center in bootstrap, i searched and found solution, which is not working for me, could someone help me out here,
<style>
.center{
margin:0 auto;
}
</style>
<div class="center">
<form method="post" action="" enctype="multipart/form-data">
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
<label for="name">Book Name</label>
<input type="text" name="name" class="form-control" id="name">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
<label for="author_id">Author</label>
<select name="author_id" class="form-control" id="author_id">
<option value="author_id">Author</option>
</select>
</div>
</div>
</form>
</div>
In order for the .center div to be centered with margin: 0 auto; it also needs to have a set width value. By default, a div takes 100% of it's containers width. If the div is 100% wide, it can not be centered as it is in a way technically already centered. You could give .center a width to fix this...
.center {
width: 400px;
margin:0 auto;
}
You may not want a fixed width though, in-fact I'd say you definitely dont want that considering you are using a responsive template...
The better solution is to center the content, rather than the div container.
Try adding text-align: center; to the form-group class, or make your own class with text-align: center; and add the class to the HTML div's that group your labels/inputs.
.form-group {
text-align: center;
}
Related
why does the input element render differently in a bootstrap col-auto column than a span element? An input element with class form-control renders wider in the col-auto column than a span element with the same styling.
I want to render, using bootstrap, a span element the same as a readonly input element.
span.input-readonly-like {
background-color: #e9ecef;
padding:6px 12px;
display:block;
border-radius:.25rem;
border:1px solid #ced4da;
width:100%;
line-height: 1.5;
}
<div class="container mt-3">
<div class="row">
<div class="form-group col-auto">
<label>LOC - SPAN</label>
<span class="form-control input-readonly-like">MM68A0</span>
</div>
<div class="form-group col-auto">
<label>LOC - INPUT</label>
<input type="text" class="form-control" readonly value="MM68A0">
</div>
</div>
</div>
What you see is the expected behavior. From the docs:
Use col-{breakpoint}-auto classes to size columns based on the natural
width of their content.
So any particular demand for .col-auto? Use .col and you will achieve what you want: Two equally sized .form-group's. They will fit the parent .row containers entire width:
<div class="form-group col">
<label>LOC - SPAN</label>
<span class="form-control input-readonly-like">MM68A0</span>
</div>
<div class="form-group col">
<label>LOC - INPUT</label>
<input type="text" class="form-control" readonly value="MM68A0">
</div>
I have this html code:
<form>
<div class="form-group">
<label>Label1</label>
<input/>
</div>
<div class="form-group">
<label>Longer label 2</label>
<textarea>Some text</textarea>
</div>
</form>
How can I display this in a nice grid without setting a fixed width for the labels and without changing the html code?
The result should look like this:
Label1 Input
Longer label 2 TextArea
CSS-Tables
.form-group {
display: table-row;
padding-bottom: 1em;
}
label {
display: table-cell;
vertical-align: top;
padding: 0 .5em .5em
}
<form>
<div class="form-group">
<label>Label1</label>
<input/>
</div>
<div class="form-group">
<label>Longer label 2</label>
<textarea>Some text</textarea>
</div>
</form>
Flexbox is your best friend. Bootstrap grids are based on them too.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<form style="display:flex; flex-wrap: wrap;">
<div class="form-group">
</div>
<div class="form-group">
</div>
</form>
you can then style your form-group according to your needs like flex-grow flex-order...
You should use bootstrap for this. It will be very helpful creating this kind of layout.
I have html like
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-inline">
#Html.Kendo().NumericTextBoxFor(m => m.Min).Decimals(2);
#Html.Kendo().NumericTextBoxFor(m => m.Max).Decimals(2);
</div>
</div>
</div>
</div>
Kendo's numeric text box has .k-numerictextbox class. and i have CSS
.form-group .k-numerictextbox {
width: 100% !important;
}
with this settings currently CSS is getting applied to NumericTextBox.
I dont want CSS to apply on NumericTextBox if its under form-inline class
For this specific html structure (there is always one element between .k-numerictextbox and .form-group which either is or not .form-inline) then
.form-group *:not(.form-inline) .k-numerictextbox {
width:100%;
}
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-inline">
<input class="k-numerictextbox" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-not-inline">
<input class="k-numerictextbox" />
</div>
</div>
</div>
</div>
(keep in mind that it is a fragile rule, because if there is yet another container of the .k-numerictextbox inside the .form-group it will not work)
I would remove using !important since it's probably not needed. Add another rule with more specificity (including the .form-inline would be a good way to do this:
.form-group .k-numerictextbox {
width: 100%;
}
.form-group .form-inline .k-numerictextbox {
width: auto;
}
Trying to create a layout that has two columns, and text between those columns
Something like this:
But I am running into spacing issues with twitter bootstrap to make it actually work. On top of making these items the same width with the text between, they should all be vertically aligned.
You can do that using 3 columns
Live Demo jsfiddle
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">.col-sm-6</div>
<div class="col-xs-6">.col-sm-6</div>
</div>
<br/>
<p>Create an account...............................</p>
<div class="row">
<div class="col-xs-6 test" >
<form class="form-horizontal vmid" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password"/>
</div>
</div></form>
</div>
<div class="col-xs-1 test" >
<p class="asd"> ~OR~</p>
</div>
<div class="col-xs-5 test" >
<button type="submit" class="asd btn-primary btn-lg">Facebook</button>
</div>
</div>
</div>
Style
.vmid{
position:relative;
top:50%;
transform:translateY(-50%);
}
.asd{
position:relative;
top:50%;
transform:translateY(-35%);
}
This is not a bootstrap answer just a plain simple CSS one. Although you can adapt it to bootstrap easily because the basic underlying principle is the same. Instead of using width percentages that I have used in my example, bootstrap grid system columns can be used instead. Saying all that, you can achieve your desired effect by dividing the wrapper div into 3 columns and then using the display table for parent and table-cell and vertical align middle for the child to place the respective input elements and button elements in its place as needed.
The fiddle can be found here
The code snippet follows...
.wrapper {
height: 300px;
width: 100%;
background: pink;
}
.leftSide,
.rightSide,
.midPart {
box-sizing: border-box;
height: 100%;
display: table;
}
.leftSide {
width: 45%;
background: lightgray;
float: left;
}
.midPart {
width: 10%;
background: aqua;
}
.midPart p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.leftSide div,
.rightSide div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rightSide {
width: 45%;
background: lightcyan;
float: right;
}
button {
height: 3em;
width: 100px;
background: blue;
color: white;
}
<div class="wrapper">
<div class="leftSide">
<div>
<input placeholder="Enter Username" />
<br/>
<br/>
<input placeholder="Enter password" />
</div>
</div>
<div class="rightSide">
<div>
<button>Hello</button>
</div>
</div>
<div class="midPart">
<p>-or-</p>
</div>
</div>
Hope this helps. Happy coding :)
Update::
***Another updated Fiddle without colors***
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 8 years ago.
I am learning bootstrap for the first time. I am having difficulty to centralize a panel in the middle of the page for a login.
Example:
<div class="container">
<div style='width:500px' class="panel panel-default">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Login</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-lg btn-primary">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
How can it be done?
See Your Modified Code >> Middle Panel
<div style='width:500px;margin:0 auto;' class="panel panel-default">
Assign
.container {
width:100%;
}
.panel-default{
margin: 0 auto;
}
with margin: 0 auto it's possible to set margin to the div: 0 is refered to top and bottom, while auto is refered to left and right. With 0, will be added a margin of 0px (no margin at all). With auto you ask the browser to set an automatic calculated amount of pixel given the possibility to center the div into a div parent (.container). To apply auto, the div parent should have a width at least greater than its child. In this case, to center the child div to center of page, we should set parent's width to 100% (that means the same width of its container (in this case container of ".container" should be body!).
This is generally achieved by giving the div a specific width (percentage or fixed) as well as margin:0 auto;.