I am building a website and part of the site consists of a place for FAQ questions. I am using bootstrap to have an accordion style display the question then when clicked on the answer will pop up. But I also have a picture displaying to the right of the FAQ section. Whenever I click on the FAQ question the answer overrides the picture to the left. I was wondering how to constrain the answer so that it will fit in its div and not override the picture. There is a comment called FAQ Question that starts that portion of the code.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Best Handrails</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<style>
body,html
{
overflow-y: scroll;
overflow-x: hidden;
}
.header_div
{
background-color: #1a1a1a;
}
.header_image1
{
position: relative;
left: 100px;
}
.header_image2
{
position: relative;
left:70px;
}
.header_links
{
position: relative;
left: 600px;
color:white;
font-family: 'Nunito Sans', sans-serif;
}
.main_image
{
position: relative;
width: 100%;
}
.main_image_text
{
font-family: 'Nunito Sans', sans-serif;
color: white;
position: absolute;
top: 200px;
left: 750px;
width: 100%;
}
.the_idea
{
position: relative;
width: 100%;
background-color: #e6e6e6
}
.the_idea_image
{
float: left;
position: relative;
width: 25%;
top: 35px;
left: 100px;
/*border:20px solid #BDB76B;
border-radius: 180px;*/
}
.the_idea_title
{
font-family: 'Nunito Sans', sans-serif;
position: relative;
left: 250px;
}
.the_idea_text_div
{
float:right;
position: relative;
left: 200px;
top: 10px;
width: 75%;
margin-bottom: 10px;
}
.the_idea_text
{
font-family: 'Nunito Sans', sans-serif;
float:left;
position: relative;
left: 0px;
top: 10px;
width: 75%;
}
.quote_div
{
/*width:800px;*/
margin:10 auto;
/*overflow:hidden;*/
float:left;
/*position: relative;
top: 400px;*/
top: 400px;
width: 100%;
background-color: #333333
/*z-index: 0;*/
}
.quote_text
{
width:100%;
float:left;
color:white;
font-family: 'Nunito Sans', sans-serif;
text-align: center;
/*position: absolute;
top: 400px;*/
/* z-index: 1;*/
}
.faq_div
{
float:left;
top:500px;
text-align: center;
background-color: #d9d9d9;
}
.faq_questions
{
font-family: 'Nunito Sans', sans-serif;
color:black;
/*text-align: left;*/
text-align: center;
}
.faq_dropdown
{
text-align: left;
width: 100%;
}
.faq_answer_dropdown
{
width: 50%;
}
.faq_hr
{
color:white;
}
.faq_image_div
{
background-color: #d9d9d9;
float:right;
width: 36.0625%;
height: 939px
}
.faq_image
{
float:right;
position: relative;
/*width: 25%;*/
top: 400px;
right: 60px;
/*left: 200px;*/
border:20px solid #BDB76B;
border-radius: 170px;
}
.gallery_div
{
}
.gallery_info
{
}
</style>
</head>
<body>
<div class="header_div">
<img class="header_image1" src="../image-assets/BestHandRail_Logo_W-01.png" alt="BestHandRail_Logo" style="width:600px;height:150px;">
<img class="header_image2" src="../image-assets/BuyNow_Button-01.png" alt="BuyNow_Button" style="width:300px;height:150px;">
<nav id= "nav_links">
<a class="header_links" href="index.html"> THE IDEA </a>
<a class="header_links" href="index.html"> FAQ </a>
<a class="header_links" href="index.html"> GALLERY </a>
<a class="header_links" href="index.html"> PURCHASE </a>
</nav>
</div>
<div class="main_image">
<img src="../image-assets/20160730_142111.jpg" alt="OldMan" style="width:100%;height:100%;">
<h1 class = "main_image_text "> HELPING <br> SENIORS <br> STAY <br> SAFE. </h1>
</div>
<div class="the_idea">
<div class="the_idea_image">
<img src="../image-assets/ALL.jpg" alt="All" class="img-circle" style="width:320px;height:340px;">
</div>
<div class="the_idea_text_div">
<h2 class="the_idea_title"> THE IDEA </h2>
<p class ="the_idea_text"> One Sunday afternoon as we were walking into the house after church, I realized my wife needed something to help her navigate the steps from our garage into our house. Monday morning found me searching in vain across the internet and through U.S. Patents. It became obvious that what my wife required did not exist. As a matter of fact, nothing like I imagined existed. So, I invented the Best Handrail and submitted my design with the necessary patent forms and received notification of patent-pending within a couple weeks.<br> <br> Now, the Best Handrail—the perfect solution for my wife—is available for everyone from besthandrail.com. The Best Handrail will help you and your loved ones navigate entry steps and other recessed or elevated living spaces, inside and outside your home. I know members of your family will benefit from the stability provided by the Best Handrail, just as my wife does. <br> <br>The Best Handrail could be the best solution for navigation, entry and improved mobility in your home. You’ll soon wonder how you ever got along without it. <br> <br> <strong>Purchase yours today.</strong> With our overnight shipping option, you can enjoy the benefits of your Best Handrail tomorrow. <br> <br> </p>
</div>
</div>
<div class="quote_div">
<hr>
<div class="quote_text">
<h2> MY HANDRAIL HAS MADE LIFE <br> I FEEL SAFER THAN I HAVE IN YEARS! <br> –MABEL BROWN, AGE 96 </h2>
<hr>
</div>
</div>
<!-- FAQ Section -->
<div class="faq_div">
<h2 class="faq_questions"> FAQ </h2>
<div class="faq_questions faq_dropdown">
<div class="container faq_dropdown" >
<div class="panel-group faq_answer_dropdown" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Will THE BEST HANDRAIL help me if I have difficulty going up or down steps?</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Will THE BEST HANDRAIL improve my mobility?</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Enim pulvinar vehicula ut magna. Nullam semper quisque pede at ut massa, sed lorem porta, etiam et dis enim vivamus posuere mi, eleifend quam per duis, faucibus vitae quam. Augue vivamus sed pellentesque ligula. Neque arcu minus euismod cras eget rutrum, sit eget nascetur, suscipit eleifend accumsan nullam nulla consectetuer cursus. Massa facilisi eu auctor interdum. Pellentesque enim dictumst justo nullam. Mauris tellus rhoncus fringilla, ut feugiat. Ridiculus est porta nulla. Purus quisque neque est amet quis. Quam at. Ut a urna donec gravida consequatur, sed tristique imperdiet nam at sit turpis.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Can THE BEST HANDRAIL be installed where there are changes in doorway elevation—a tripping hazard?</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Fusce vitae ultrices vivamus, mauris metus integer dolor tortor et, pharetra sapien curae, vestibulum ultrices velit arcu risus. Et turpis adipiscing, morbi aliquam, condimentum mauris, lacinia luctus, scelerisque justo justo massa vitae. Magna donec, faucibus in sem pede lectus sed duis, ipsum proin a urna orci dolor. Euismod lorem penatibus sed fringilla nec. Cursus erat, consectetuer quam neque sed aliquet phasellus libero, nibh adipiscing consequat ante nec torquent aliquam, libero risus tempor ornare.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse4">Will THE BEST HANDRAIL provide safer passage through challenging spaces?</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse5">Will THE BEST HANDRAIL provide safer passage through challenging spaces?</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">Elit amet massa, ligula sapien neque lobortis donec vel. Odio justo a, quisque habitasse vel velit ligula interdum, vestibulum egestas aliquam nulla odio vitae. Nam luctus mauris id a sollicitudin sem. Placerat amet nibh sodales diam, ac sed pellentesque purus arcu amet urna, lobortis porta cras. Et elit amet turpis aliquam commodo, odio faucibus leo quam at nec, lorem nullam fermentum, duis eros suscipit sem imperdiet nam sem, quis fermentum molestie nec.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse6">It THE BEST HANDRAIL easy to install?</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">Vestibulum adipiscing. Nullam diam et nonummy venenatis adipiscing imperdiet, lectus condimentum eget, wisi morbi, nulla scelerisque, lorem lacus a mus a. Semper dolor, pellentesque sed ipsum natoque vehicula purus. Cum dui at pede nec amet. In neque nibh praesent wisi, lectus porttitor arcu nulla, cras felis molestie adipiscing dolor lobortis sem. Libero integer in, vel urna faucibus.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse7">Are they different models of THE BEST HANDRAIL?</a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse8">How many colors of besthandrail.com are there?</a>
</h4>
</div>
<div id="collapse8" class="panel-collapse collapse">
<div class="panel-body">THE BEST HANDRAIL comes in four different colors or finishes: <br>
Flat Midnight Black (durable flat black) <br>
Victorian White (sun-bleached white-gray) <br>
Statuary Bronze (satin-finished blackened bronze) <br>
Brick Brown (rich brown with textured finish).</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse9">How much does besthandrail.com cost?</a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse10">How do I order THE BEST HANDRAIL?</a>
</h4>
</div>
<div id="collapse10" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse11">How will THE BEST HANDRAIL shipped to me?</a>
</h4>
</div>
<div id="collapse11" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Image next to FAQ -->
<div class="faq_image_div">
<div class="faq_image">
<img src="../image-assets/ALL.jpg" alt="All" class="img-circle" style="width:300px;height:300px;">
</div>
</div>
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../image-assets/Brown.jpg" alt="..." style="width:300px;height:300px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="../image-assets/White.jpg" alt="..." style="width:300px;height:300px;">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
set a width for faq_div
for instance:
.faq_div{
width:500px
}
or
.faq_div{
width:40%
}
Related
I found this piece of code for a timeline I need for a website online. You can see how it looks at https://jsfiddle.net/ . My question is why is it so small? I don't see anything in the css setting the size, is this a bootstrap feature?
Code also posted below:
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
21 March, 2014
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
21 000 Job Seekers
4 March, 2014
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
Awesome Employers
1 April, 2014
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS:
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
Thanks for any help, as you can tell I am not the best developer but I would really like to add this feature on my site.
You should change the class of div from ".col-md-6, .offset-md-3" to ".col-12" and if and it is not sufficient then change ".container" to ".container-fluid".
<body>
<div class="container-fluid mt-5 mb-5">
<div class="row">
<div class="col-12">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
21 March, 2014
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
21 000 Job Seekers
4 March, 2014
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
Awesome Employers
1 April, 2014
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
</body>
I am trying to create this in bootstrap 3:
However, right now I have got this:
My image is not lined up perfectly with the h4 tag and my p tags will not stay in a line as the first image. I am using bootstrap 3, so I am getting used it everything, and I was wondering if anyone can help me achieve this look. So far I have:
.col-content {
overflow: hidden;
padding: 0 15px;
}
.col-content p {
font-size: 13px;
font-weight: normal;
text-align: center;
}
.col-icon {
font-size: 48px;
float: left;
padding: 20px 10px;
text-align: left;
}
<div class="row">
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Web <span class="highlight">Development</span></h4>
<p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Internet <span class="highlight">Marketing</span></h4>
<p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Client <span class="highlight">Support</span></h4>
<p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
</div>
</div>
</div>
I am just trying to make it look like the first image with bootstrap 3.
remove text-align: center from .col-content p to avoid the text-centering in the paragraphs and change padding: 20px 10px; to padding: 0 10px 20px 10px; in .col-icon to move the icons up to the top of their container:
https://codepen.io/anon/pen/wpaebo
for line up use display:inline-flex;align-item: flex-start; and remove text-align: center; from p tag
Use a combination of top and left while making the icon position:relative
position: relative;
top: -11px;
left: 8px;
.col-content {
overflow: hidden;
padding: 0 15px;
}
.col-content p {
font-size: 13px;
font-weight: normal;
text-align: center;
}
.col-icon {
font-size: 48px;
float: left;
text-align: left;
position: relative;
top: -11px;
left: 8px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Web <span class="highlight">Development</span></h4>
<p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Internet <span class="highlight">Marketing</span></h4>
<p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Client <span class="highlight">Support</span></h4>
<p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
</div>
</div>
</div>
Okay guys so I have this green container:
And I need the text - Would you like to chat ? - to be at the bottom of it's parent (the green background)
I tried adding a style to the text like this:
<div class="row" style="position: relative;">
<div style="position: absolute; bottom:0; right:0;"> Would you like to chat ? </div>
</div>
But that did not work, the text is just over another text, not bottom.
I do not want to use margin-top, because it won't be good at mobile screens.
Here is the code:
<!-- About page -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6 bg-success">
<div class="col-lg-6">
<img src="images/girlprofile.jpg" class="img-responsive" alt="pic1notworking" height="220" width="220" style="padding-bottom: 25px; padding-top: 15px;">
</div>
<div class="col-lg-6" style="padding-bottom: 25px; padding-top: 15px;">
<center>
<div class="usernamestyle"> Username <br> </div>
<div class="onlinestyle">
is currently online <br>
Would you like to chat ? <br>
</div>
</center>
</div>
</div>
<div class="col-lg-6">
<p style="font-size: 140%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum, felis ac tristique tempor, tortor justo fringilla erat, id porta dui nisl quis leo. Proin non quam vitae erat placerat tincidunt. Mauris aliquam tempor finibus. Nulla a purus vehicula, tempus augue placerat, tincidunt odio. Mauris aliquet placerat urna vitae fermentum. Duis posuere risus ac elit mattis gravida. Pellentesque a quam eu massa efficitur aliquam. <br> <br>
Suspendisse tincidunt convallis nulla in pharetra. Ut ac erat convallis, dictum velit nec, sagittis ipsum. Quisque venenatis, nisi id consectetur imperdiet, nibh velit scelerisque arcu, ac placerat neque elit sit amet nisl. Aliquam nec dolor quam. Pellentesque maximus dui id justo ullamcorper auctor. Ut placerat purus vitae ipsum sodales, vel molestie magna finibus.
</p>
</div>
</div>
</div>
</div>
CSS:
.usernamestyle{
font-size: 200%;
}
.onlinestyle{
font-size: 160%;
}
<div class="col-lg-6" style="position: relative;height:100%; padding-bottom: 25px; padding-top: 15px;">
<center>
<div class="usernamestyle"> Username <br> </div>
<div class="onlinestyle">
is currently online
</div>
</center>
<div style="position: absolute; bottom:0; right: 0;">
Would you like to chat ?
</div>
</div>
Question background:
I'm pretty new to Bootstrap and have been developing a site as of late and have run into an issues with the content of my page 'overlapping' the footer at the bottom when the window is resized to a 'mobile' device resolution.
The issue:
The following picture shows a maximized screen with no overlap.
Re-sized screen, footer overlap:
HTML:
I have a 'master page' which holds the footer, each page implements this.
<div class="row-fluid">
<div class="span12">
<div class="padding">
<h2>C#</h2>
<div class="row-fluid">
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectTwoInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectOneInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectOneInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 cSharpBackGroundColour">
<div class="container">
<div class="span12">
<div class="row-fluid">
<div class=" paddingTop">
<div class="span3 circle-image">
</div>
<div class="span3 circle-image">
</div>
<div class="span3 circle-image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT:
Footer code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Martin Bean" />
<link href="\Bootstrap\css\bootstrap.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.min.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-social.css" rel="stylesheet" />
<link href="\CustomCSS\Footer.css" rel="stylesheet" />
<link href="\CustomCSS\HeroUnit.css" rel="stylesheet" />
<link href="\Bootstrap\FontAwesome\css\font-awesome.css" rel="stylesheet">
<link href="\Bootstrap\FontAwesome\css\font-awesome.min.css" rel="stylesheet">
<script src="\Scripts\jquery-2.1.1.min.js"></script>
<script src="\Bootstrap\js\bootstrap.js"></script>
<title>Twitter’s Bootstrap with Ryan Fait’s Sticky Footer</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: auto;
}
.colour {
background-color: #272727;
height: 100px;
}
.imageCentering {
align-content:center;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
background-color: white;
}
.wrapper2 {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: white;
margin-left: 250px;
margin-right: 250px;
padding: 25px 25px 25px 25px;
}
.title {
margin-top: 40px;
padding-left: 5px;
font-family: 'Segoe UI';
color: white;
font-size: x-large;
}
.push {
height: 90px;
}
.pushtop {
height: 5px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 20px;
}
.buttonAlign {
align-content: center;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects
<b class=" caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
<li>Proj1</li>
<li>Proj2</li>
<li>Proj3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
#*</div>*#
<div class="colour">
<div class="row-fluid">
<div class="title">
Software Developer#*</div>*#
</div>
</div>
</div>
<div class="wrapper">
#RenderBody()
</div>
<div class="push"></div>
<footer>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="floatLeft">
<a><ul>About Me</ul></a>
<a><ul>Projects</ul></a>
<a><ul>Contact Me</ul></a>
</div>
<div class="floatRight">
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-linkedin-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
</div>
</div>
</div>
</div>
</footer>
Any help resolving this issue would be great. Please note I would also want the 'grey' background div - that holds the 3 images to be responsive.
you have several HTML code issues, I did a clean-up and also simplified things a bit for demo purposes (you may adjust at will, of course).
The HTML part:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About
</li>
<li>Contact
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects
<b class=" caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
<li>Proj1
</li>
<li>Proj2
</li>
<li>Proj3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="colour">
<div class="row-fluid">
<div class="title">Software Developer</div>
</div>
</div>
<div class="wrapper">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet rutrum leo quis aliquam. Sed pretium efficitur enim at ultricies. Nullam ullamcorper porta risus, quis imperdiet eros rutrum sit amet. Nullam in nisl bibendum, dignissim arcu quis, consectetur turpis. Cras luctus egestas ligula. Suspendisse dignissim diam a augue egestas pharetra. Donec viverra eu velit ut pharetra. Nulla suscipit, ante eget venenatis cursus, nulla erat congue tellus, faucibus cursus orci lacus sit amet urna. Nulla facilisi. Duis commodo porttitor sem. In hac habitasse platea dictumst. Integer dui elit, rhoncus vitae tincidunt nec, scelerisque ac dolor. Integer at ligula eget ligula scelerisque volutpat eget quis lorem.</p>
<p>Praesent ac sapien sit amet magna sollicitudin vestibulum et nec erat. Quisque consectetur vel dui ac dapibus. Praesent at sapien tristique augue tincidunt auctor sed non justo. Fusce ac venenatis mauris. Quisque lobortis neque a eros hendrerit consectetur ac id magna. Mauris non velit ante. Nunc orci lorem, auctor a orci a, luctus sollicitudin turpis. Phasellus ornare tempus felis eu pharetra.</p>
<p>Integer eleifend, sapien eu molestie tristique, nunc felis varius tellus, at congue magna sapien ut tortor. Maecenas sodales ultricies ligula sollicitudin cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet odio ex, ut luctus tortor mollis sit amet. Aenean rutrum consequat lorem eget porta. Aliquam lacus enim, congue ac condimentum sit amet, consequat a diam. Duis eget mauris id nisi molestie vulputate sit amet vel nulla. Curabitur ac feugiat enim, eu rutrum magna.</p>
<p>Suspendisse sed lorem ac leo volutpat sodales. Pellentesque erat ex, tincidunt eu urna ac, gravida convallis eros. Phasellus nisl purus, egestas quis ipsum id, ornare pharetra tellus. Nullam congue leo ex, nec sagittis dolor tempor nec. Sed convallis sem risus, a congue leo feugiat non. Integer placerat dui eget lorem eleifend, a gravida tortor tempus. Vestibulum at est tempor sem sollicitudin hendrerit. Etiam vitae mauris eget sapien pharetra mattis a quis metus. Mauris facilisis sapien non fringilla scelerisque. Fusce a odio ultricies, rutrum nunc quis, faucibus quam.</p>
<p>Donec sed est vitae elit dignissim gravida. Vivamus blandit eros ex, vel placerat dui ornare in. Nullam feugiat risus lectus. Cras sagittis dolor vitae vulputate accumsan. Sed arcu massa, tempor vel massa nec, vehicula pellentesque tortor. Suspendisse fringilla eros risus, a scelerisque neque tempor ut. In et velit sapien. Etiam porttitor aliquam arcu, ut mollis augue rutrum feugiat.</p>
</div>
</div>
<div class="push"></div>
<footer>
<div class="container">
<div class="row-fluid">
<div class="span12 links">
<div class="floatLeft"> <a>About Me</a>
<a>Projects</a>
<a>Contact Me</a>
</div>
<div class="floatRight"> <i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-linkedin-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
</div>
</div>
</div>
</div>
</footer>
You had those <UL> elements before the footer's <A> and also an additional closing </div> on all sections. With the HTML cleaned, CSS is as simple as this:
.links .floatLeft a {
padding:30px;
background:#fc0;
}
footer, .wrapper, .push {
position:relative;
clear:both;
padding-top:20px;
}
See fiddle for complete code and preview
I'm trying to create some nice looking blockquotes in Bootstrap by stacking some rows with quotes above and below the quotation, like so just to give you a rough example ( can be seen here (http://www.bootply.com/weEUvuQfw2 ). As seen in the bootply example, the left quotation mark hovers high above the quote, since its character is originally that high when used in a sentence. I imagine it's got to be something simple, but what can I do to get the left quote to hover at the bottom of the top left cell of this grid? setting a negative margin or padding doesn't seem to do it. Any ideas?
<div class="container">
<div class="row right">
<div class=" col-lg-3 ">
<font size="40">“</font>
</div>
<div class="col-lg-6 ">
</div>
<div class="col-lg-3 ">
</div>
</div>
<div class="row center">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet blandit libero. Nullam at tincidunt risus. Nam quis suscipit ligula, ut cursus nunc. Nulla eget eros diam. Aenean bibendum accumsan velit in dapibus. Pellentesque sodales leo nec lacus consequat, nec tempor nibh sollicitudin. Fusce mollis luctus ultrices. Quisque tempus placerat velit, at varius libero pulvinar eu. Curabitur sit amet est velit. Praesent id eleifend nulla, eu iaculis lacus. Integer imperdiet, tellus nec tristique mattis, magna quam luctus tellus, nec semper enim felis eget nisl.
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row left">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
<font size="72">”
</font></div><font size="72">
</font></div><font size="72">
</font></div><!-- /.container -->
And CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
Are you looking for something like so?
HTML:
<div class="container">
<div class="row right">
<div class=" col-lg-3 ">
<font size="40">“</font>
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row center">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet blandit libero. Nullam at tincidunt risus. Nam quis suscipit ligula, ut cursus nunc. Nulla eget eros diam. Aenean bibendum accumsan velit in dapibus. Pellentesque sodales leo nec lacus consequat, nec tempor nibh sollicitudin. Fusce mollis luctus ultrices. Quisque tempus placerat velit, at varius libero pulvinar eu. Curabitur sit amet est velit. Praesent id eleifend nulla, eu iaculis lacus. Integer imperdiet, tellus nec tristique mattis, magna quam luctus tellus, nec semper enim felis eget nisl.
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row left">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
<font size="72">”
</font></div><font size="72">
</font></div><font size="72">
</font></div><!-- /.container -->
CSS:
.center {
text-align: center;
}
.right {
text-align: left;
margin-bottom: -20px;
}
.left {
text-align: left;
}
Here is a fiddle: http://jsfiddle.net/4g0gp5pp/
That's a lot of markup to create something really simple.
DEMO: http://jsbin.com/hadapo/1/edit
HTML:
<blockquote class="quotemarks">
<p>Words go here</p>
<footer>Someone</footer>
</blockquote>
CSS
.quotemarks:before,
.quotemarks:after {
text-align: center;
font-size: 60px;
line-height: 1;
}
.quotemarks:before {
content: "\201C";
position: relative;
bottom: -20px;
}
.quotemarks:after {
content: "\201D"
}
.quotemarks {
border: 0;
padding: 0;
text-align: center;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.quotemarks footer {
text-indent: -10px
}