How can I align a bootstrap form input to the bottom of the page? I've tried several different approaches nothing has worked.
How it currently looks.
How I want it too look.
I need to align the form element to the bottom to make it look like proper messaging input.
However, when I attempt to use form { position: fixed; bottom: 0; } it changes the formatting of the input like so.
Thanks for the help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3 messages">
<p class="city">Edinburgh Uni <i class="fa fa-graduation-cap"></i><i style="float:right" class="fa fa-sort-desc"></i></p>
<p class="paddingLeft" style="margin-top:-15px"><i class="fa fa-user-circle"></i> Jack</p>
</div>
<div class="col-md-9">
<h4 style="margin-top:20px">International Business 📈 <i style="float:right" class="fa fa-cog"></i></h4>
<p class="description"><i class="fa fa-user"></i> 10 | Support group for International Business Students class of 2019.</p>
<hr>
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
position: absolute; bottom: 0;
use absolute position on the form, and place it 0 pixels from the bottom of its parent;
make sure the parent container (col-md-9) has an appropriate height for this to work.
Try this (use position that is the most appropriate to you):
form { position: fixed; bottom: 0; }
Hope this helps :)
I have a row with header text and a button on the right.
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
The code above is what I have currently but I have tried many variations. In all of them, the button is not vertically aligned with the text. (The image below includes the overlay when I hover over the element in the Elements pane of Chrome, in order to show vertical alignment.)
Searching existing questions on stackoverflow, I've found this question posted a number of times; however, I found no knowledgeable answers.
Has anyone figured this out?
This happens because the line-height of the heading and the height of the button differ.
With a line-height: 1.9; for the heading it should work:
.page-header h4 {
line-height: 1.9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
You can try using the grid to be mobile friendly and make everything inside vertically aligned.
<div class="page-header vertical-center">
<div class="row">
<div class="col-md-8">
<h1>Text on the left</h1>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
</div>
</div>
Add this CSS
.row > div {
border: 1px solid black;
}
.vertical-center .row {
display: flex;
align-items: center;
}
/*maybe create an id instead of h1*/
h1 {
margin: 0;
}
Hiii Everyone,
I have multiple divs.Inside each div there will be panel body and its footer.What happening is based on panel body content its not adjusting instead its overlapped panel footer above panel body.Below is my screenshot
In the above image u can understand what is happening.And my example code is
<main class="page-content content-wrap" style="background-color:#E9EDF2;height:auto">
<div id="main-wrapper">
<div id="five_radio_question">
<div class="panel-body">
<br/><br/>
<h2 style="color:#C32F10"><b>Reorder Paragraphs</b></h2><br/>
<div class="panel-body" style="background-color:#EFAD4D;color:#fff;border-radius:4px;padding:1px">
<h4>The text bubbles in the left panel have been placed in a random order. Restore the original order by dragging the text bubbles from the left panel to the right panel.</h4>
</div>
<br/>
<p style="font-size:14px">
Write 1-5 next to each paragraph to indicate the order you think is correct.
</p>
Contentss
</div>
</div>
<div class="panel-footer">
<h3 style="float:left"> Question 5 of 14</h3>
<div style="float:right">
<button class="btn btn-danger btn-lg first_ques_button4">
Previous Question
</button>
<button class="btn btn-danger btn-lg second_ques_button4">
Next Question
</button>
</div>
</div>
</main>
And also I tried with css in somany ways with the help of google.And My issue is not resolved.
#main-wrapper:after {
clear: both;
content: "";
display: table;
}
body {
display: block;
position: relative;
height: auto;
min-height: 100% !important;
}
Please anyone help me to get out of this issue.Thanks in advance..
I am attempting to vertically center a search bar in my websites navigation. I've tried adding a div around the search element and adding text-center to it. I have also tried margin: 0px auto !important;. None of which seemed to have any effect on the element.
I have created a bootsnipp
http://bootsnipp.com/snippets/E7WgX
Try to this
.top-header {
background-color: #D9D9D9;
}
.media-body{
vertical-align: middle !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row top-header">
<div class="container">
<div class="media">
<div class="media-left">
<img class="media-objects" src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
</div>
<div class="media-body">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
Vertical align is a difficult topic and the correct solution is very dependent on the used layout. If the snippet layout is what you use I would suggest adding these styles to columns. To get vertical-align: middle css working, you need to disable floating of columns and to keep them inline add display: inline-block. So apply to both columns class float-disable, then add vcenter to column containing search. Css styles looks like this:
.float-disable{
float: none;
display: inline-block;
}
.vcenter{
vertical-align: middle;
}
I'm building a website using Bootstrap and I'm now trying to make something like this:
===========================================================
| #################### |
| #################### Big Title |
| ##THIS IS AN IMAGE## |
| #################### |
| #################### Read more |
===========================================================
The problem is that I can't align the ReadMore button to the bottom. I tried using the tips in this SO answer, but to no avail. I created a fiddle of my code here and I'll paste my code below.
Does anybody know what I'm doing wrong here? All tips are welcome!
My HTML looks like this:
<div class="container">
<div class="row">
<div class="col-sm-8">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img class="img-responsive" src="image.png">
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
<div class="col-sm-4"><div class="row"></div></div>
</div>
</div>
and my css:
#media (min-width: 768px ) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
}
Try this:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
#media (min-width: 768px) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
.col-sm-7 {
position: absolute;
width: 100%;
height: 100%;
}
}
<div class="container">
<div class="row">
<div class="col-sm-12"> <a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
</div>
</div>
Here's a fiddle
Is it what you were looking for?
Sometimes you have to work against bootstrap's floats to get what you're looking for, basically by not using them (pulls, etc). I've updated your fiddle, and I believe it's close to what you were asking. Another issue was your #media was throwing things off due to the size of the result window.
Updated Fiddle
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.rel {
position: relative;
height:300px;
width: 600px;
}
.read-more {
position: absolute;
bottom: 0;
right: 0;
}
.background {
background-image: url("http://placehold.it/600x300");
height: 300px;
width: 600px;
}
}
<div class="container rel"> <a href="/thelink">
<article class="property-ad">
<div class="background img-responsive">
<div class="title">Big Title</div>
</div>
</article>
<button class="btn btn-default read-more">Read more</button>
</a>
</div>
This is due to the right panel only being the height of the content, in this case the title and the button.
To counter this, you need to set a height.
I added the class box-height to the html and, as the image seems to max at 141px [At least for me, W7 PC], I set the container height to that height (141px)
You can see a working example here; http://jsfiddle.net/8pLjfq5u/18/
Without the height being given, the button will just fix itself to the height of the container, which in this case is set by the title height etc.
Edit
I would advise against setting css changes in bootstrap classes in this instance.
At some point, that change to the core CSS will bite you in the behind, when you need it to work as intended in the original build.
Second Edit
It would appear that if you simply move the button into a col-sm-12 div, that you can get the desired result.
This also scales into mobile view too, without the need to add additional classes or css attributes.
http://jsfiddle.net/8pLjfq5u/20/
There are two possible problems here - depending on what exaclty you want to achieve!
(I guess it's the second one you are looking for!)
First:
if you want to position your read more at the bottom right corner of the whole page:
You have position:relative in your CSS for .row.
This means all elements inside an element with class row will be positioned relative to this element - so your read more can only be positioned inside it with your CSS (with negative values for right and bottom it can be outside, but still relative to this element).
Second:
If you want to position your read more at the the bottom right corner of the article
The parent element to your #read-more has only height of 20px, because the text Big Title in the div above is only of that height.
As your #read-more element is positioned absolute, it doesn't contribute to the height.
I tried setting height: 100%; on the parent element of #read-more, but it doesn't work.
So, it seems, you will have to put your #read-more elemnt outside of its parent div, directly into the article, like this:
<div class="container">
<div class="row">
<div class="col-sm-12">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</article>
</a>
</div>
</div>
I added "col-xs" classes to your markup and it generated the desired display based on what you showed in your question
<div class="col-sm-5 col-xs-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7 col-xs-7">
<div class="title">Big Title</div>
If you plug that into your fiddle it displays the way you want with your media query. When you really shrink it down though it get's pretty illegible at that point.
Maybe you want to adjust the media query to display differently for "sm" and "xs".
Try this:
<div class="d-flex justify-content-end">
<button class="btn" type="submit">Connect</button>
</div>