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;.
Related
I'm trying to create a fixed footer from a jumbotron including a text area and a button. This is what I have now at the end of <body>:
<div class="jumbotron jumbotron-fluid position-fixed fixed-bottom">
<div class="container-fluid">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Message: </span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Send</button>
</div>
</div>
</div>
</div>
But this jumbotron doesn't stick to the bottom of the page. It stays about 50px above the bottom, it's so ugly and I don't know how to fix it!
Because the default .jumbotron has margin-bottom: 2rem;. Removing that bottom margin will fix the issue.
You can also do your custom style:
.jumbotron.fixed-bottom {
margin-bottom: 0 !important;
}
By the way, you don't need .position-fixed class. .fixed-bottom will do the fixed position for you!
This question already has answers here:
Twitter Bootstrap 3, vertically center content [duplicate]
(2 answers)
Closed 5 years ago.
I have a row in Bootstrap. Within this row, I have three columns. The first column has an input field. The second column has some text. The third column has another input field. You can see this layout in this Bootply, which includes this code:
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-5">
<div class="form-group">
<label for="Minimum">Minimum</label>
<div class="input-group">
<input class="form-control" data-val="true" id="Minimum" name="Minimum" type="text" value="0">
</div>
</div>
</div>
<div class="col-xs-2 text-center"><p>Up To</p></div>
<div class="col-xs-5">
<div class="form-group">
<label for="Maximum">Maximum</label>
<div class="input-group">
<input class="form-control" data-val="true" id="Maximum" name="Maximum" type="text" value="100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm am trying to figure out how to vertically align the "Up To" text in the middle column. I want to vertically align the text against the bottom of the row. How can I do that?
The line height for the table rows is 34px, so setting your line height for that element to 68px would vertically align it.
You can add a class on your row and set display: table;
Then you add another class on your 3 divs and set display: table-cell;and float: inherit; and a last class on your element you want to align vertically and set vertical-align: middle;
Updated Bootply
I am working on an app that uses Bootstrap 3. In this app, I have a row defined like this:
<div class="row" style="background-color:navy; color:white;">
<div class="col-lg-3">
<h2>Welcome</h2>
</div>
<div class="col-lg-8">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
find:
</div>
<input type="search" class="form-control" id="queryField" />
</div>
</div>
</form>
</div>
<div class="col-lg-1">
<button type="button" class="btn btn-primary">Go</button>
</div>
</div>
I want to make the search field and the Go button vertically aligned with the Welcome text. The Welcome text is kind of vertically aligned. I tried adding vertical-align: middle. That did not work. I was trying to avoid using padding. But if its required, its required. I appreciate any help you can provide.
There is default margin, padding in all tags, so put a class of
h2{ margin: 0; padding: 0; }
and it is automatically come in same line
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;
}
any suggestions on the best way to do a form like that? http://i.imgur.com/vT7tC.png
I'm using tables + input with width: 100%, I know it's probably not the best way
(also, for some reason the input width: 100% gets bigger than [td] or [div] (the red border on this image is from a [div][input ...][/div])
thanks
You can float the left label/inputs to the left and the right label/input to the right.
You will need to specify a width otherwise you will end up with a large gap between your columns and your middle column will not line up with your large right input.
This is how I would code that form:
HTML
<div class="content">
<div class="row">
<div class="lrow">
<label>aaa aaa</label>
<input type="text" class="large">
</div>
<div class="rrow">
<label>bbb</label>
<input type="text" class="small">
</div>
</div>
<div class="row">
<div class="lrow">
<label>ccc</label>
<input type="text" class="small">
</div>
<div class="rrow">
<label>ddd ddd</label>
<input type="text" class="large">
</div>
</div>
<div class="row">
<div class="lrow">
<label>eee</label>
<input type="text" class="small">
</div>
<div class="rrow">
<label>fff fff</label>
<input type="text" class="small">
</div>
<div class="crow">
<label>ggg</label>
<input type="text" class="small">
</div>
</div>
</div>
CSS
.content {width:542px;}
.row {overflow:hidden;margin:5px 0;}
.row label {float:left;text-align:right;width:60px;margin-right:5px;}
.row input {float:left;}
.lrow {float:left;}
.rrow {float:right}
.large {width:300px;}
.small {width:100px;}
don't waste your time by making columns by hand.
just use Blueprint CSS Framework. it's really nice and easy to use and does the job in a way you want.
the most important of all, you do not need to care about browser compatibility anymore.