Digital Chalkboard Feb 8
Here was the four-part question from class:
<!– Create a footer that is fixed and always visible at the bottom of the page –>
<!– NEW INFO: use the <footer> element. There is no footer class in Bootstrap –>
<!– The footer should have a column on the left for conference details –>
<!– and a column on the right for contact details –>
<!– Footers don’t render well on small devices, so hide it below the large breakpoint. –>
<!– STEP ONE: CREATE THE FOOTER AND FIX IT TO THE BOTTOM –>
<!– STEP TWO: CREATE THE COLUMNS IN THE FOOTER –>
<!– STEP THREE: CREATE LISTS IN COLUMNS ONE AND THREE –>
<!– STEP FOUR: MAKE THE FOOTER GO AWAY BELOW THE LG BREAKPOINT –>
And here is one version of an answer:
And here is one version of an answer:
[code language=”html”]
<!– REMEMBER: NEED TO ADD BOTTOM MARGIN TO THE BODY IN CSS –>
<footer class=“fixed-bottom bg-dark text-white d-none d-lg-block”>
<div class=“container”>
<div class=“row”>
<div class=“col-3”>
<ul>
<li>Conference title</li>
<li>Sub-title</li>
</ul>
</div>
<div class=“col”>
</div>
<div class=“col-3”>
<ul>
<li>Contact us</li>
<li>Deatils</li>
</ul>
</div>
</div>
</div>
</footer>
[/code]