Difference between revisions of "User:Mike/footer"

From wiki
Jump to navigation Jump to search
Line 28: Line 28:
 
  -->
 
  -->
 
<!-- Footer -->
 
<!-- Footer -->
−
<div class="page-footer font-small blue pt-4">
+
<div style="   display:table;
−
  <!-- Footer Links -->
+
    table-layout:fixed;
−
  <div class="container-fluid text-center text-md-left">
+
    min-width:900px;        /* some minimum width is a good idea. */
−
     <!-- Grid row -->
+
    border-spacing:20px 0;  /* note that spacing is also applied to right and left ends */
−
     <div class="row">
+
    background-color:#666;
−
      <!-- Grid column -->
+
    margin:0 auto;">
−
      <div class="col-md-6 mt-md-0 mt-3">
+
    <div style="display:table-cell;
−
        <!-- Content -->
+
    width:33%;
−
        <h5 class="text-uppercase">Footer Content</h5>
+
    vertical-align:middle;
−
        <p>Here you can use rows and columns to organize your footer content.</p>
+
    border:1px solid #bbb;
−
      </div>
+
     background-color:#eee;
−
      <!-- Grid column -->
+
     padding:30px;">Content for "leftdiv" Goes Here. </div>
−
      <hr class="clearfix w-100 d-md-none pb-3">
+
    <div style="display:table-cell;
−
      <!-- Grid column -->
+
    width:33%;
−
      <div class="col-md-3 mb-md-0 mb-3">
+
    vertical-align:middle;
−
        <!-- Links -->
+
    border:1px solid #bbb;
−
        <h5 class="text-uppercase">Links</h5>
+
    background-color:#eee;
−
<ul class="list-unstyled">
+
    padding:30px;">Content for "middiv" Goes Here. Content for "middiv" Goes Here. Content for "middiv" Goes Here. Content for "middiv" Goes Here.</div>
−
<li>
+
    <div style="display:table-cell;
−
<a href="#!">Link 1</a>
+
    width:33%;
−
</li>
+
    vertical-align:middle;
−
<li>
+
    border:1px solid #bbb;
−
<a href="#!">Link 2</a>
+
    background-color:#eee;
−
</li>
+
    padding:30px;">Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. </div>
−
<li>
 
−
<a href="#!">Link 3</a>
 
−
</li>
 
−
<li>
 
−
<a href="#!">Link 4</a>
 
−
</li>
 
−
</ul>
 
 
</div>
 
</div>
−
      <!-- Grid column -->
 
−
      <!-- Grid column -->
 
−
      <div class="col-md-3 mb-md-0 mb-3">
 
−
        <!-- Links -->
 
−
        <h5 class="text-uppercase">Links</h5>
 
−
        <ul class="list-unstyled">
 
−
          <li><a href="https://openconcept.ca/">Link 1</a></li>
 
−
<li><a href="#!">Link 2</a></li>
 
−
          <li>
 
−
            <a href="#!">Link 3</a>
 
−
          </li>
 
−
          <li>
 
−
            <a href="#!">Link 4</a>
 
−
          </li>
 
−
        </ul>
 
−
      </div>
 
−
      <!-- Grid column -->
 
−
    </div>
 
−
    <!-- Grid row -->
 
−
  </div>
 
−
<!-- Footer Links -->
 
−
<!-- Copyright -->
 
−
<div class="footer-copyright text-center py-3">© 2020 Copyright: <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a></div>
 
−
<!-- Copyright -->
 
−
</div>
 
−
<!-- Footer -->
 

Revision as of 12:59, 18 January 2020

Content for "leftdiv" Goes Here.
Content for "middiv" Goes Here. Content for "middiv" Goes Here. Content for "middiv" Goes Here. Content for "middiv" Goes Here.
Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here.
Retrieved from "https://wiki.gccollab.ca/index.php?title=User:Mike/footer&oldid=15928"