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..
Related
Currently the button is always below the last element that exists in the view.
Then I add bottom: 2px and position: absolute to the button and it goes to the bottom, but when I open the drop-down the screen is enlarged and the button is not at the bottom.
It currently works like this. I want it to continue working like this, but with the button at the bottom
Placing bottom: 2px and position: absolute the button goes to the bottom but when the drop-down is opened it overlaps.
<style>
.card-one{display:flex;}
.card-section{display:flex;margin:5px;text-align:center; min-height:300px;background:#000; flex-direction: column; width:33%;color:#fff;}
.card-section h2{color:#fff;}
.card-section .book-btn{margin-top:auto;}
</style>
<div class="card-one">
<div class="card-section">
<h2>Hello One</h2>
<button class="btn book-btn">Book Now</button>
</div>
<div class="card-section">
<h2>Hello One</h2>
<button class="btn book-btn">Book Now</button>
</div>
</div>
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;
}
I have a title with a button on the right, but I met two problem:
I want the title in the centre of the page;
I want the button and title are in the same horizontal line.
This is my code:
<div class="container">
<div class="row">
<div class="btn btn-primary pull-right">This is a long button</div>
<h1 class="text-center">This is a long title</h1>
</div>
</div>
This is my demo.
Please help me, thanks.
Use this code to attain the desire result:
HTML:
<div class="container">
<div class="row">
<div class="col-xs-2"></div>
<div>
<h1 class="col-xs-8 text-center">This is a long title</h1>
</div>
<div class="btn btn-primary col-xs-2 pull-right mar">Follow</div>
</div>
</div>
CSS:
.mar{
margin-top: 20px;
}
you can use the tags < center > < /center >
example:
<center>long title</center>
Just add this data in a new CSS file or in an existing CSS file.
#bt {
width: 100%;
}
.text-center {
width: 100%;
}
Also add an ID to the button as "bt".
Just zero the margin-top on the h1
.text-center {
margin-top: 0;
}
At least in your code-pen that did the trick.
In the future, in situations like this, always use the inspector on your browser to see the box-model of the element, helps a lot.
If you need more info on the box-model: http://www.w3schools.com/css/css_boxmodel.asp
Make Your Div Width as 100% and make use of Text-align Property.
<h2 style="text-align: center">XYZ</h2>
Then adjust your buttton with margin-top property.
Like this:-
<div class="container">
<div class="row">
<div class="col-xs-2"></div>
<div>
<h1 class="col-xs-8 text-center" **style="margin-top: 0"**>This is a long title</h1>
</div>
<div class="btn btn-primary col-xs-2 pull-right">Follow</div>
</div>
</div>
I'm having trouble figuring out why my jumbotron container is covering the entire page. I am trying to have the jumbotron stop right before "Find your university".
Second, I am also having trouble with moving the search bar to the middle of the jumbotron. Can anyone help? I'm new to HTML, CSS and Bootstrap.
HTML:
<div class="center jumbotron">
<div class="container">
<h1>MOVE ABROAD WITH EASE</h1>
<h2>Find out about the cities, where to live and eat, hangout groups.</h2>
<div class="container">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-6">
<input type="text" class=" search-query form-control" placeholder="Which city are you moving to?" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.center {
text-align: center;
}
#custom-search-input {
margin: 0;
margin-top: 50px;
margin-bottom: 50px;
padding: 10;
}
Your jumbotron is likely filling your page because you have all your content inside of it. Just move everything from Find Your University and below out of it.
As for centering your input, Bootstrap provides the col-xx-offset-# concept to help with this.
Here's a Fiddle with your code updated to illustrate.
Some additional notes and pointers:
padding: 10; is invalid css (possibly just a typo). make sure to include px if that was your intention.
Creating your own .center class is unnecessary. Bootstrap comes with a .text-center class for this purpose.
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>