Lists

<div class="container">
 <div class="row">
    <div class="col-md-4">
      <!-- Unordered -->
      <ul>
        <li>Responsive</li>
        <li>Block Based</li>
        <li>Free Icons</li>
        <li>
          Retina Ready
          <ul>
            <li>Ultra Fast</li>
            <li>Bootstrap Grid</li>
            <li>Clean Code</li>
          </ul>
        </li>
        <li>User Friendly</li>
        <li>Free Support</li>
        <li>Shortcodes</li>
        <li>Unique Design</li>
      </ul>
    </div>
    <div class="col-md-4">
      <!-- Unstyled -->
      <h4 class="underline">Unstyled</h4>
      <ul class="list-unstyled">
        <li>Responsive</li>
        <li>Block Based</li>
        <li>Free Icons</li>
        <li>Retina Ready</li>
        <li>Ultra Fast</li>
        <li>Bootstrap Grid</li>
        <li>Clean Code</li>
        <li>User Friendly</li>
        <li>Free Support</li>
        <li>Shortcodes</li>
        <li>Unique Design</li>
      </ul>
    </div>
    <!-- Definition List -->
    <div class="col-md-4">
      <h4 class="underline">Definition List</h4>
      <dl>
        <dt>100% Responsive</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
        <dt>Retina Ready</dt>
        <dd>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
        <dt>Free Support</dt>
        <dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
      </dl>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
 <div class="row">
    <!-- Ordered -->
    <div class="col-md-3">
      <ol>
        <li>Responsive</li>
        <li>Block Based</li>
        <li>Free Icons</li>
        <li>Retina Ready</li>
        <li>Ultra Fast</li>
        <li>Bootstrap Grid</li>
        <li>Clean Code</li>
        <li>User Friendly</li>
        <li>Free Support</li>
        <li>Shortcodes</li>
        <li>Unique Design</li>
      </ol>
    </div>
    <!-- Ordered Default -->
    <div class="col-md-3">
      <div class="default-list">
        <ol class="primary">
          <li><p>Responsive</p></li>
          <li><p>Block Based</p></li>
          <li><p>Free Icons</p></li>
          <li><p>Retina Ready</p></li>
          <li><p>Ultra Fast</p></li>
          <li><p>Bootstrap Grid</p></li>
          <li><p>Clean Code</p></li>
          <li><p>User Friendly</p></li>
        </ol>
      </div>
    </div>
    <!-- Ordered Rounded -->
    <div class="col-md-3">
      <div class="rounded-list">
        <ol class="border-primary">
          <li><p>Responsive</p></li>
          <li><p>Block Based</p></li>
          <li><p>Free Icons</p></li>
          <li><p>Retina Ready</p></li>
          <li><p>Ultra Fast</p></li>
          <li><p>Bootstrap Grid</p></li>
          <li><p>Clean Code</p></li>
          <li><p>User Friendly</p></li>
        </ol>
      </div>
    </div>
    <!-- Ordered Background Rounded -->
    <div class="col-md-3">
      <div class="rounded-list">
        <ol class="list-primary">
          <li><p>Responsive</p></li>
          <li><p>Block Based</p></li>
          <li><p>Free Icons</p></li>
          <li><p>Retina Ready</p></li>
          <li><p>Ultra Fast</p></li>
          <li><p>Bootstrap Grid</p></li>
          <li><p>Clean Code</p></li>
          <li><p>User Friendly</p></li>
        </ol>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <!-- Icon List -->
    <div class="col-md-6">
      <ul class="list-unstyled gnx-icon-list icon-default-xs icon-primary">
        <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-default-sm icon-primary">
        <li><i class="fa fa-gear"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-default-lg icon-primary">
        <li><i class="fa fa-plus"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
    </div>
    <!-- Icon List -->
    <div class="col-md-6">
      <ul class="list-unstyled gnx-icon-list icon-circle-xs icon-primary">
        <li><i class="fa fa-calendar"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-sm icon-primary">
        <li><i class="fa fa-recycle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-lg icon-primary">
        <li><i class="fa fa-sitemap"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <!-- Icon List Colors -->
    <div class="col-md-6">
      <ul class="list-unstyled gnx-icon-list icon-circle-xs icon-primary">
        <li><i class="fa fa-share-alt"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-sm icon-success">
        <li><i class="fa fa-magnet"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-lg icon-info">
        <li><i class="fa fa-life-ring"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
    </div>
    <div class="col-md-6">
      <ul class="list-unstyled gnx-icon-list icon-circle-xs icon-warning">
        <li><i class="fa fa-key"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-sm icon-danger">
        <li><i class="fa fa-info"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-lg icon-dark">
        <li><i class="fa fa-leaf"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <!-- Icon List Background -->
    <div class="col-md-6">
      <ul class="list-unstyled gnx-icon-list icon-circle-xs list-bg-dark">
        <li><i class="fa fa-share-alt"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-sm list-bg-primary">
        <li><i class="fa fa-magnet"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-lg list-bg-success">
        <li><i class="fa fa-diamond"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
    </div>
    <div class="col-md-6">
      <ul class="list-unstyled gnx-icon-list icon-circle-xs list-bg-info">
        <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-sm list-bg-warning">
        <li><i class="fa fa-bookmark"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
      <ul class="list-unstyled gnx-icon-list icon-circle-lg list-bg-danger">
        <li><i class="fa fa-calendar-check-o"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- Inline List -->
      <ul class="list-inline">
        <li>Home</li>
        <li>Products</li>
        <li>About Us</li>
        <li>Contact</li>
      </ul>
    </div>
    <div class="col-sm-12">
      <!-- Horizontal Definition List -->
      <div class="preview-box">
        <dl class="dl-horizontal">
          <dt>Lorem ipsum</dt>
          <dd>Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</dd>
          <dt>Ut enim ad minim</dt>
          <dd>Veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
          <dt>Duis aute irure dolor</dt>
          <dd class="m-b-0">Excepteur sint occaecat cupidatat non proident.</dd>
        </dl>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <!-- List Group -->
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
    <div class="col-sm-6">
      <!-- Linked Items -->
      <div class="list-group">
        <a href="#" class="list-group-item active">
          Cras justo odio
        </a>
        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item">Morbi leo risus</a>
        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item">Vestibulum at eros</a>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->