Menu icon Foundation
Styling footer with border

Hi everyone! Hannes emailed us a question about adding styling to a footer. Let's help him out!

--

maybe you could give me a litte support.

In my footer, i need a line between the two columns (like the red line in the clip). I find no way to create it.

<footer class="row">
<div class="large-12 columns">
<hr>
<div class="row">
<div class="large-6 columns">
<p>Content</p>
</div>
<div class="large-6 columns">
<p>Content</p>
</div>
</div>
</div>
</footer>
            

         

Layout

footerstylecss

Hi everyone! Hannes emailed us a question about adding styling to a footer. Let's help him out!

--

maybe you could give me a litte support.

In my footer, i need a line between the two columns (like the red line in the clip). I find no way to create it.

<footer class="row">
<div class="large-12 columns">
<hr>
<div class="row">
<div class="large-6 columns">
<p>Content</p>
</div>
<div class="large-6 columns">
<p>Content</p>
</div>
</div>
</div>
</footer>
            

         

Layout
Steve Trask about 5 years ago

Hi Hannes,

Is it not possible to add a border right on the left div in the footer or a left border on the right div? Really depends how you want the final result and what content you need to add

Rafi Benkual about 5 years ago

You can do this:

 <footer class="row">
    <div class="large-12 columns">
      <hr>

      <div class="row">
        <div class="large-6 columns">
          <p>Content</p>
        </div>


        <div class="large-6 columns">
          <p>Content</p>
        </div>
      </div>
    </div>
  </footer>
footer div {
  border-right: 5px solid #ff0000;
}

footer div:last-child {
  border-right: 0;
}