District Site

410 Central Ave. N.
New Prague, MN 56071

phone: 952-758-1700
fax: 952-758-1799

Menu

Unordered List (Columns)

Normal Unordered List

  • Entry One
  • Entry Two
  • Entry Three
  • Entry Four
  • Entry Five
  • Entry Six

Two Column, Bulleted

  • Entry One
  • Entry Two
  • Entry Three
  • Entry Four
  • Entry Five
  • Entry Six
  • Entry Seven
  • Entry Eight
  • Entry Nine

Three Column, With Squares

  • Entry One
  • Entry Two
  • Entry Three
  • Entry Four
  • Entry Five
  • Entry Six
  • Entry Seven
  • Entry Eight
  • Entry Nine

Four Column, No Bullets

  • Entry One
  • Entry Two
  • Entry Three
  • Entry Four
  • Entry Five
  • Entry Six
  • Entry Seven
  • Entry Eight
  • Entry Nine
  • Entry Ten
  • Entry Eleven
  • Entry Twelve
  • Entry Thirteen
  • Entry Fourteen
  • Entry Fifteen

The Code

The following code will need to be added into the content area of your page while it is in "Embed code" format. Adjust the list-style-type (disc/square/none), number of columns (adjust webkit and moz columns as well), and gaps and padding as needed.

<style>
ul.multi-col {
  list-style-type: disc;
  columns: 2;
  column-gap: 2.5em;
  -webkit-columns: 2;
  -webkit-column-gap: 2.5em;
  -moz-columns: 2;
  -moz-column-gap: 2.5em;
  list-style-position: outside;
}
.multi-col li {
  padding-left: 1px;
}
</style>

You will need to then add class="multi-col" to the <ul> tag for any unordered list you want to apply this to. For example:

<ul class="multi-col">