I'm currently working on the John's Hopkins HTML/CSS and Javascript course on Coursera coding the David Chu's China Bistro using Bootstrap 3.6 (outdated, I know). I came across a problem where the copyright line ended up underneath the third column (my site screensho) rather than centered at the bottom of the footer (official site screenshot). Here is the code for that footer section:
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span>Hours:</span><br>
Sun-Thurs: 11:15am-10:00pm<br>
Fri: 11:15am - 2:30pm<br>
Saturday collapsed<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span>Address:</span><br>
7105 Resterstown Road<br>
Baltimore, MD 21215
<p>* Delivery area within 3-4 miles, with minimum order of
$20 plus $3 charge for all deliveries.</p>
<hr class="visible-xs">
</section>
<section id="testimonials" class="col-sm-4">
<p>"The best Chinese restaurant I've been to! And that's saying
a lot, since I've been to many!"</p>
<p>"Amazing food! Great service! Couldn't ask for more! I'll be
back again and again!"</p>
</section>
<div class="text-center">© Copyright David Chu's China Bistro 2016</div>
</div>
</div>
</footer>
Now I understand that it isn't centered because the div with the copyright symbol should not be inside the div with class="row", but regardless I don't understand why the div is underneath the third column. All of the sections as per Bootstrap should be floated meaning that they are taken out of normal document flow. However, the copyright statement is not floated, so shouldn't that take up the entire width and be centered in the middle of the page? Sorry, I'm a bit of a beginner at HTML/CSS!
The solution is just to move it up one level outside and I think it will be solved.
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span>Hours:</span><br>
Sun-Thurs: 11:15am-10:00pm<br>
Fri: 11:15am - 2:30pm<br>
Saturday collapsed<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span>Address:</span><br>
7105 Resterstown Road<br>
Baltimore, MD 21215
<p>* Delivery area within 3-4 miles, with minimum order of
$20 plus $3 charge for all deliveries.</p>
<hr class="visible-xs">
</section>
<section id="testimonials" class="col-sm-4">
<p>"The best Chinese restaurant I've been to! And that's saying
a lot, since I've been to many!"</p>
<p>"Amazing food! Great service! Couldn't ask for more! I'll be
back again and again!"</p>
</section>
</div>
<div class="text-center">© Copyright David Chu's China Bistro 2016</div>
</div>
</footer>
If issue still exists, try to use p tag for copyright instead of div
Related
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
I've been trying to re-order my bootstrap columns when in mobile view but my code is just not working. Most probably because I am doing something incorrect.
Here is my markup:
<div class="container">
<div class="row text-center">
<div class="col-12">
<h2 class="mb-lg-4 mb-sm-3">Early Stages</h2>
</div>
<div class="col-md-7 col-sm-push-5">
<p>Also known as 'the Poor Fellow-Soldiers of Christ and of the Temple of Solomon', the Knights Templars were originally founded circa 1120 CE, by Hugues de Payens, as a means to protect Christian pilgrims to the Holy Land. It was originally intended that nine Templars would protect the pilgrims.</p>
</div>
<div class="col-md-5 col-sm-push-7">
Image Here
</div>
</div><!--/row-->
</div>
What I am trying to do is essentially make the "Image Here" section go above the "also known as the poor etc." section when in mobile view (col-sm). I looked at Bootstraps guide but I think I am understanding it incorrectly, can someone show me how its done?
Thanks in advance
Try this HTML
<div class="container">
<div class="row text-center">
<div class="col-12">
<h2 class="mb-lg-4 mb-sm-3">Early Stages</h2>
</div>
<div class="col-md-5 col-sm-push-7">
Image Here
</div>
<div class="col-md-7 col-sm-pull-5">
<p>Also known as 'the Poor Fellow-Soldiers of Christ and of the Temple of Solomon', the Knights Templars were originally founded circa 1120 CE, by Hugues de Payens, as a means to protect Christian pilgrims to the Holy Land. It was originally
intended that nine Templars would protect the pilgrims.</p>
</div>
</div>
<!--/row-->
Link for reference
hope this helps..
This is probably an easy one, but I'm new to bootstrap and aren't quite familiar with how it works. I have the following code to create 4 even-width columns in a row. But it keeps showing up as 4 vertically stacked columns on my laptop (1920x1080) and I'm not quite sure where I'm doing it wrong.
<div class="container">
<div class="row-fluid">
<div class="col-md-3"><!--about us feature 1st -->
<div class="about-block">
<div class="heading">
<h6>AVAILABILITY</h6>
<p>Fast Response Time<br> 15 Minutes Setup</p>
</div>
</div>
</div><!--about us feature 1st closed -->
<div class="col-md-3"><!--about us feature 2nd -->
<div class="about-block">
<div class="heading">
<h6>SPEED</h6>
<p>Average 7x Faster<br> Complete Data Coverage</p>
</div>
</div>
</div> <!--about us feature 2nd closed -->
<div class="col-md-3"><!--about us feature 3rd -->
<div class="about-block">
<div class="heading">
<h6>SAFETY</h6>
<p>Reduce Human Risk<br> No Scaffolding</p>
</div>
</div>
</div><!--about us feature 3rd closed -->
<div class="col-md-3"><!--about us feature 4th -->
<div class="about-block">
<div class="heading">
<h6>COST SAVINGS</h6>
<p>Targeted Repairs<br> Less Outage Time</p>
</div>
</div>
</div><!--about us feature 4th closed -->
</div>
</div>
UPDATE Added screenshot:
Use col-sm-3 instead, or make your <div> element wider. If you are using a container directly inside body, you shouldn't have any problem. If you are using inside another element, make sure it is wide enough.
First, try changing row-fluid class to style="float: left". Second, it is true that (in theory) the screen is divided into 12, but 3*4 might be more than 12 (margin, border, etc.). If the first part renders three columns and the 4th underneath, try reducing the size of the columns by setting, for instance, width=24%.
I'm having issues with putting together my page based on my design with Bootstrap. I will provide the following html code and see if someone can help me understand why my footer isn't the full width of the page and why my purple box class is.
If you can review my html code and see if you can explain to me also why my image under Lessons isn't the full width as well because I set it to 100% width which I was understanding does it compared to its parent container which would be the div with a class of container.
Link to actual dev site page. Dev Lessons Site Page
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A great site to hear the musical talents of Cassandra Davidson and also to promote her as a private instructor.">
<meta name="keywords" content="music, teacher, lessons, weddings, church">
<meta name="author" content="Jeffrey Davidson">
<title>Cassandra Davidson Studio</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="assets/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<header>
<h1>Cassandra Davidson Studio</h1>
<nav>
<ul>
<li><a id="active" href="index.html">Home</a></li>
<li>About</li>
<li>Lessons</li>
<li>Recordings</li>
<li>Contact</li>
</ul>
</nav>
</header>
<h2>Lessons</h2>
<div class="row">
<div class="col-xs-12">
<img src="assets/images/music-staff.png" alt="Music staff">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>About Your Lessons</h3>
<p>Lessons are face to face once a week for 30 minutes or 60 minutes. Times based on age, and level of interest. Lessons are given for students to gain knowledge of the flute. They will learn flute techniques, musicality, and standard flute works. Students will learn to perform for others and gain confidence in themselves and their playing.</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>Practice</h3>
<p>Students are expected to practice every day. Students in a 30 minute lessons should be practicing for at least 30 minutes every day, while students in 60 minute lessons should be practicing for at least 60 minutes.</p>
</div>
<div class="col-xs-6">
<h3>Materials</h3>
<p>Student should bring with them to lessons books decided by the instructor at their first lesson, and a spiral notebook. There may be more needs as the student moves on in lessons. These book will include, a tone book, technique book, etude book and solo material. For beginning students they should also bring the book being used in their band class.</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>Recitals</h3>
<p>The studio will give at least two recitals throughout the year. Students are expected to play for these recitals and stay to listen to their peers. If a student needs to miss, there will need to be approval beforehand. Recitals are a good opportunity for students to learn from others and to hear different pieces of music.</p>
</div>
<div class="col-xs-6">
<h3>Masterclasses</h3>
<p>The studio will provide a masterclass situation about three times a year. This may be all students of the same age together in a joint lesson with the teacher, bringing in another instructor to give feedback, or a few students playing solo and getting feedback from the other students as well as the instructor. The students are expected to attend these classes, so they can benefit from hearing other students, playing with students, and getting feedback from another source.</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>Payment</h3>
<p>Payment is due at the beginning of every month, for the entire month. The cost is $25 per lesson for 30 minute lessons and $50 per lesson for 60 minute lessons. This cost includes all expenses for the recitals and masterclasses, so there are no extra fees for those events.</p>
</div>
<div class="col-xs-6">
<img src="assets/images/girl-playing-piano.png" alt="Girl looking at camera while playing piano.">
</div>
</div>
<div class="row">
<div class="col-xs-12 purple-box">
<h3>Cancellation/Make-up</h3>
<p>If a student cannot attend lessons for any reason, please call the instructor as soon as possible. If possible at the beginning of each month, let the instructor know if the students cannot attend any lesson that month. If the instructor receives at least 24 hour notice than there will be a make-up lesson scheduled if possible or a credit for the next month. Make-up lessons are always preferred and the use of a credit should only be used if a make-up lesson cannot be scheduled because of conflicts. If a student does not show up for a lesson without notifying the instructor there will be no make-up lesson or credit. If the instructor must miss for any reason, they will contact the students as soon as possible and schedule a make-up lesson or give a credit.</p>
</div>
</div>
<footer>
<div class="row">
<div class="col-xs-12">
<p>© 2015 Jeffrey Davidson</p>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="assets/js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Simplify your markup.
The row class provides negative margin (-15px) left and right, so that the columns appear properly within them.
The col class elements have 15px padding left and right to provide spacing "internally", but this causes the 15px of space on the left / right edge, which is why the row column has negative margin.
The div.row inside of footer was unnecessary, and causing the extra space.
<footer class="row">
<div class="col-xs-12">
<p>© 2015 Jeffrey Davidson</p>
</div>
</footer>
As for the image, it does not have any styles on it, therefore it is not filling the full width. (I've inspected your live site using browser inspector, and there are definitely no styles on it).
Give it a class, or apply styles directly, so that:
img {
width: 100%;
height: auto; /* without this, the image will skew */
}
Lastly, for your left / right spacing after thinking this through, in order for this to be responsive, your best bet is to use some markup / css to provide a "max width" on the spaces. If you used padding, you'd have to adjust the padding at each media query / kick, where really what you are after is some space at the larger desktop sizes.
Personally, for clarity, I like to create a div called "liner" or similar, like so:
<footer class="row">
<div class="liner">
<div class="col-xs-12">
<p>© 2015 Jeffrey Davidson</p>
</div>
</div>
</footer>
Then, give that liner some css like so:
div.liner {
margin: 0 auto; /* auto ensures it will stay centered */
padding: 0; /* may or may not be necessary depending on your resets */
max-width: 1000px; /* or whatever your desired max width is */
}
Add this .liner to your header, footer, and your main content area, and you will get the desired effect.
Add row class for footer and remove it for div inside (then you can safely remove that div):
<footer class="row">
<div class="col-xs-12">
<p>© 2015 Jeffrey Davidson</p>
</div>
</footer>
To match your page look to an image further you can add some padding to <p> in a footer:
footer p {
padding: 10px 0;
}
Just adjust padding value to get desired effect.
I have two bootstrap items one col-md-5 and one col-md-4. But i want to centered these two items in the middle of the page, both of them. Now my col-md-4 is at the left side of the page and the col-md-5 is at the middle of the page. Has anyone an idea how to centered these two items without use only margin.
<div class="col-md-4">
<div class="klantcases">
<h2>Company</h2>
<li>Over ons</li>
<li>Kernwaarden</li>
<li>Missie en visie</li>
<li>Nieuws</li>
<li>Blog</li>
<li>Development Blog</li>
<li>Marketing Blog</li>
<li>Development</li>
<li>Marketing</li>
<li><a href="#">Werken bij ons></li>
</div>
<div class="col-md-5">
<div class="blogpreview">
<img src="img/kan.png" alt="kan" /><h1>The latest from our</br>
DEVELOPMENT BLOG</h1>
<img src="img/bloglaptop.jpg" alt="bloglaptopcode" />
<div class="bloginfo"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<img src="img/pfoon.png" alt="pfoon" /> <h1>The latest from our</br>
MARKETING BLOG</h1>
<img src="img/iphone.jpg" alt="iphonehand" />
<div class="bloginfo2"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
</div>
You can offset columns in bootstrap. See Docs.
By using a class such as, col-md-offset-4 you can push your columns across the page.
In your case you would need to adjust your columns to make up an even total, e.g. col-md-4 and col-md-6, and then add col-md-offset-1 to offset the first column by 1 column.
Since the Bootstrap default grid has 12 columns, you cannot center the 9 columns grid with the default Bootstrap offsets. So all you need to do is create a custom 1.5 offset (which left margin would be equal to 1.5/12*100% = 12.5%) and apply it to the .col-md-4 container:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-custom">...</div>
<div class="col-md-5">...</div>
</div>
<!-- / .row -->
</div>
<!-- / .container -->
#media(min-width: 992px && max-width: 1199px) {
.col-md-offset-custom {
margin-left: 12.5%;
}
}
JSFiddle: http://jsfiddle.net/Lq06L4hb/2/